LoonDesign Tutorials . Comic . Web Design . Freelance . Blog

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?

Very good codes.

I cant get mines to work, I am using:

Category

#news_wrapper .newsitem .container .meta span.category { background: url(“images/button.png”) no-repeat top right; }
#news_wrapper .newsitem .container .meta span.category a { margin-right: 10px; background: url(“images/button.png”) no-repeat top left; padding: 8px 15px; color: #6f6f6f; }

Any reason why this is not working???

Hi There!

Just a question: Why do you use this span inside the a-tag? On the one hand it doesn’t look fine in the code and on the other it is absolutely needless.
Without span you still have two nestet tags, put the right aligned background to the li-tag and the left aligned to the a-tag..
Than you just need a padding-left and a margin-right at the a-tag

Greetings

very nice trick. thanks

hi these are good notes.

The technique’s great, until you use transparent PNGs or even transparent GIFs.

Here’s a simple cure to get my menu to pass W3C validation… you must define a width, so… everywhere you see float: … follow by a width, as such:

float: left;
width:auto;

I received warnings for “Same color used”… change one of the “fff” to fffffe”… (5x f + e) a different color, but the eye can’t tell

ul.red li a:hover {
color: #FFFFFE;

Thanks for a handy script.

Hi there, thanks so much for your tutorial. I find it much more semantically efficient to use a single image as an asset. I’m a little new to CSS though, I was wondering if you can inform me about something I’m missing.

When I implemented this technique on my page, the anchor tag background of each list element is at the exact same left offset as the left offset of the child span element. As such the rounded left edge also shows the anchor tag’s left most background.

When I look at your examples, I see this doesn’t seem to be the case, but I’m not sure why.

Hi – good stuff, looking at the implementation would it not be better though to wrap the buttons label in the span? This would make more sense rather than having an empty tag.

The image applies to the background on the a-tag left aligned while the span tag has same the background but right aligned.

The a-tag will need left padding and the span right padding so that the right curve doesn’t appear over the left curve.

I guess as another feature you could also put an icon image within the SPAN tag to give each element a unique identifier, set the image to vertical-align:middle; should keep it all balanced – good tutorial, it’s made me think!

How do you center the menu on the page?

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…

Thank you.

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

Very nice…. Thats Really Great!

Thanx ………………

kailoon in one of the best site for css

hey can you write a tutorial on how to implement this into a drop down menu? thank!

http://yoyurec.in.ua/button_with_1_image/
i think there are problems with using block elements (floating span) in button
i just change your link style (vertical align) from padding (and span negative margin) to height=line-height.
theoretically code is right, but:
Opera 9.5 – good, FF3 – strange padding near span, IE7 – doesn’t understand floating and button text shifted to 2nd line (((

looks like the best way is to wrap whole button text in span, like here -
http://filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/ and then add little changes for using your idea of 1-image slidind doors…

PS: sorry for my english

hi! good article!!!
but what about styling forms in this way? i mean making instead links?
i change html & style in your example (a -> button)… works fine, but i have strange left padding in FF3 (((( have you any ideas? 10x!

Thanks
Here is another version for TABS
http://www.vision.to/single-image-tabs-with-three-state-rollover.php

Hi
here is my version
http://www.vision.to/single-image-sliding-doors-and-rollover.php

css Font examples , Properties , Attribute – - //
http://www.css-lessons.ucoz.com/font-css-examples.htm

Ahh, those spans do wonders – thanks for the article!

Pretty cool technique. Thanks mate.

Pretty smart, saves a bunch of time from cutting up every sliding door image that you plan on creating.

If nothing else it saves the amount of code and server calls to download the two separate images, etc…

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.

@jeffjose @Palantir
try to do the same with n imgs and js, with dreamweaver you can do it in minutes.
you will see by yourself that this tecnique is a lot more fast, because it neads only 1 http request and because css sliding is very fast

thnx for share

Bro, I love your Blog’s Theme, its so cute.. I wish I had it
Nice work on the skin buddy..