LoonDesign Tutorials . Comic . Web Design . Freelance . Blog

This is a great tutorial! I’m very familiar with using user lists to style navigation menus but this is worth bookmarking for upcoming projects. I happened to stumble upon this page by accident trying to figure out how to style links and/or individual buttons…but again, well worth bookmarking.

I just wanted to note that for any other people that are looking for a way just to use css sliding doors to style individual buttons and/or links then maybe this will help…

http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx

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???

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…

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..