kailoon.com Tutorials . Comic . Web Design . Freelance . Blog

very simply and straight forward

Nice CSS tips very helpful. Thanks

cool.., thank’s a lot for the list it’s so good for the beginner of blogging like me.. good job pavan,:P

great advice, i am using this right now to build a menu on my website! thank you

thank for those goood

so nice tips .. thanks for your time ..

Thank you for another essential article.I was very encouraged to find this site. I wanted to thank you for this special read. I definitely savored every little bit of it and I have you bookmarked to check out new stuff you post.

This is a great tutorial! It works flawlessly.

Thank You, this works amazingly well. Much easier and cleaner to implement than the usual sliding door tabs which are just a headache. Thanks again!

Pins | Piratenfahnen | Webkatalog| Feldbergferien

Really great. Planning to use it! thanks

Hi There! I am trying to do something similar to this. I am essentially creating one large button with an unordered list inside. When you rollover the list items, the background image on the whole button needs to change. I am having an issue directing to the nested div instead of the list item itself. Any help would be greatly appreciated

good information very nice…

great web thanks information

Nice tutorial….

great post thanks a lot good article.

I loved this job:):):):):

Very Very Nice Technique, visit this web again

I’ve been looking for something like this for a long time, and never thought I’d find it. Thank you for helping me.

Used this in one of my web projects. Worked awesomely well! I know it’s a bit dated, but it never gets stale! Thanks Kai Loon.

Great 1000 Thx.
But how could you use this with half height.
I dont know how to Hor-center the Text when i half the height.

this is very nice css menu, thanks

These things are very basic and important. I will keep them in mind. It’s nice to share your post. Good article!

Kamera alarm sistemi izmir

How do I make the background color go all the way across the screen? Other than that this is awesome! Thanks!

ty for post

woow this good tool thanks for sharing

Wow, great info. Been looking for this type of direction for a while, thanks for providing.

It’s very useful for me to study CSS. Thank you very much.

Thanks for this tutorial, useful and an effective way to create a button in CSS with the sliding door technique.

nice technique, however you cant align PNG’s to the right as background images in IE6 and below…using a GIF in that situation would suffice.

How cool, i’ve been looking for that for ages! Thanks

Is there a way to modify the code you provided and use a CSS sprite?

Thank you for another essential article.I was very encouraged to find this site. I wanted to thank you for this special read. I definitely savored every little bit of it and I have you bookmarked to check out new stuff you post.

Excellent article! Another great source for those who wants to see menus, web site trends, galleries, free extension and job for freelancers etc, visit http://www.1artmedia.com, you have online demo and free download. Hope that will be useful for you…

i like it as well as i need how to add multiple menu in this menu

Thank you very much for this post. This is very cool.

It works great. With two different boxes in one image an a negative background-position for the hover you create an awesome effect with only one image.

thanks! awesome stuff

You’ve described the button style, in very detailed and meaning method you’ve chosen. Thank you

only in css

Why a and span to float it?
Thanks

I think firefox is a much better browser anyway.

What an excellent? teacher you are! You break it down so simply. I am no longer intimidated by html code. thanks!

That’s it! It will be more easy to use. Specially, it will save image slicing time and will be more manageable.

Great.

This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time.

I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind.

This is my first time here; I found your link on speckyboy.com. Because this is my first time here, I actually haven’t followed any of your tutorials before (funny that) and I don’t know what to do with the image, even though you assume I do.

So I’m going to use a different site. I’ll find one that actually teaches me

FORGOT TO TELL ONE THING THIS IS HOW CENTER UR NAVIGATION DIVE AND EQUAL COLUMN SCRIPT WITH PNG TRANSPERANCY SUPPORT NOT FOR BUTTONS BUT FOR .CONTENT IMG DIV, SORRY FOR POOR ENGLISH

column

function $() {
var elements = new Array();
for (var i=0;i<arguments.length;i++) {
var element = arguments[i];
if (typeof element == 'string') element = document.getElementById(element);
if (arguments.length == 1) return element;
elements.push(element);
}
return elements;
}

var BoxHeights = {
maxh: 0,
boxes: Array(),
num: 0,
op_test: false,
equalise: function() {
this.num = arguments.length;
for (var i=0;i<this.num;i++) if (!$(arguments[i])) return;
this.boxes = arguments;
this.maxheight();
for (var i=0;i<this.num;i++) $(arguments[i]).style.height = this.maxh+"px";
},
maxheight: function() {
var heights = new Array();
for (var i=0;i<this.num;i++) {
if (navigator.userAgent.toLowerCase().indexOf('opera') == -1) {
heights.push($(this.boxes[i]).scrollHeight);
} else {
heights.push($(this.boxes[i]).offsetHeight);
}
}
heights.sort(this.sortNumeric);
this.maxh = heights[this.num-1];
},
sortNumeric: function(f,s) {
return f-s;
}
}

window.onload = function() {
BoxHeights.equalise('left','content','right');
}

home
products
blog
contact

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dolor quis urna bibendum hendrerit in vel quam. Aliquam pellentesque porttitor nibh, eget viverra justo volutpat sit amet. Mauris ligula lorem, pellentesque sit amet egestas ut, dapibus sed nulla. Mauris varius nulla sed eros euismod feugiat placerat quam feugiat. Aliquam lobortis metus a libero dapibus ut consectetur sem fermentum. In ultricies sollicitudin orci, sit amet consectetur lorem vulputate eu. Sed lobortis commodo massa, ac imperdiet felis elementum a. Nulla facilisi. Nam orci purus, pulvinar vel lobortis eu, adipiscing bibendum ante. Duis dapibus convallis urna, et pulvinar lacus adipiscing in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dolor quis urna bibendum hendrerit in vel quam. Aliquam pellentesque porttitor nibh, eget viverra justo volutpat sit amet. Mauris ligula lorem, pellentesque sit amet egestas ut, dapibus sed nulla. Mauris varius nulla sed eros euismod feugiat placerat quam feugiat.

© 2009. All rights reserved.

@charset “utf-8″;
/* CSS Document */
*{
margin:0;
padding:0;
}
a{
outline:0;
}
#container {
width: 990px;
background-color: #3366FF;
margin:0 auto;
background-image: url(images/images/bg_02.png);
background-repeat: repeat;
}
#head {
background-color: #000033;
height: 45px;
}
#navigation {
margin:0 auto;
padding:0 auto;
clear: both;
height: auto;
width: 500px;

}

ul {
list-style: none;
float: left;
clear: left;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0px;
margin-left: 0;
}

ul li {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 25px;
}

ul li a {
text-decoration: none;
float:left;
color: #999;
cursor: pointer;
font: 900 14px/22px “Arial”, Helvetica, sans-serif;
}

ul li a span {
margin: 0 25px 0 -25px;
padding: 10px 5px 20px 20px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;

}

/*BLUE*/
ul.blue li a.current, ul.blue li a:hover {
color: #0d5f83;
background-image: url(images/glass_01.png);
background-repeat: no-repeat;
background-position: right top;
}

ul.blue li a.current span, ul.blue li a:hover span {
background-image: url(images/glass_01.png);
background-repeat: no-repeat;
background-position: left top;
}

#main_content {
padding: 15px;
width: auto;
background-color: #99FF99;
}
#left {
background-color: #00FFFF;
height: auto;
width: 25%;
border: 1px solid #0033CC;
float: left;
}
#content {
float: left;
height: auto;
width: 49%;
background-color: #00CCCC;
border: 1px solid #9933CC;
display: inline;
}
.content_image {
float: left;
height: 165px;
width: 74px;
padding-top: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
border-top-color: #00CCCC;
border-right-color: #00CCCC;
border-bottom-color: #00CCCC;
border-left-color: #00CCCC;
margin-top: 15px;
margin-right: 0px;
margin-left: 15px;
display: inline;
background-image: url(images/images/bg.png);
background-repeat: no-repeat;
}

#right {
float: left;
height: auto;
width: 25%;
background-color: #33FF99;
border: 1px solid #CCCC33;
}
.clear_float {
clear: both;
}
#footer {
background-color: #CC3333;
height: 10px;
width: auto;
padding: 15px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
}
.copy_right {
float: left;
}
.tecanda {
float: right;
}
.tecanda a {
color: #FFFFFF;
text-decoration: none;
}
.tecanda a:hover {
color: #0000FF;
text-decoration: underline;
}
.tecanda a:active {
color: #0000FF;
text-decoration: underline;
}

IE ONLY CSS FOR PNG TRANSPERANCY
@charset “utf-8″;
/* CSS Document */

.content_image {
height: 165px;
width: 75px; /* Must Specify Width */
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’images/images/bg.png’);
float: left;

}

Thanks for this tutorial.
It is very helpful.

Which Values do I have to alter, if I want to use larger graphics?

Nice tutorial, I’ll practice it soon

Thank you. I had to change it into a div so that it coild work with the CMS (joomla). It still cuts out either the left or the right edge of the image in the navigation generated by the cms. How do i solve this?

Very nice!

I´m trying a typo3-version.

Instead of:

1.
2. home
3. products
4. blog
5. contact
6.

I´m using

1 = TMENU
1 {
wrap = |
NO = 1
NO.linkWrap = |
}

The css is identic. Unfortunately this doesn´t work. Does anyone have an idea to solve the problem?

With best regards!

Thanks, very easy to understand and implement

very neat….. thanks

I lke the site…

amazing… love it buddy… helps me a lot… can you post more about CSS tricks…

Thank for the awesome tips!

found FF button padding fix:

button {padding:0; border:0}
button::-moz-focus-inner {padding:0; border:0}
button:focus {outline: 1px dotted}

Cool Tutorial, How about to get the page validate in the span use  

Your concept example shows “<span”… this is not correct.

Excellent tutorial Bro. It’s a creative solution to that issue.

Good article–I am using a similar technique on the submission form field “hints” at http://css-imagine.com.

Palantir, its not a image swap as its using the same single image – but just moving the background-position of the image instead.

There is no need to leave the SPAN’s as empty tags they should really hold the text of the ANCHOR and can still give the same effect.

Yeah, I dont see anything special here. Its just a swap image or a roll over effect which is pretty easily implementable.