CSS Sliding Door using only 1 image
May 27th, 2008 in CSS, Tutorials by kailoonBefore I know about this technique, I was using different images for each of the button I needed in a navigation bar. I found that it is not user friendly and also need more CSS coding. Besides, it is increasing the processing time and bandwidth in loading a site. In this tutorial, I will show you how to code the navigation bar using only 1 image. I will not cover the image creation part because I think you should know how to do that after follow few of my tutorials in the past. So, start here…
The Image

I will not show how to create this but I will let you guys download the psd file as a reference. I provided 4 types of colors as default, you can edit them according to your preferences. Download the psd here and I even prepared the slices for you. What you need in building the navigation menu is only a 493px X 24px image like below.

Before we start, head over and see what we are going to achieve from this tutorial.
Concept
The concept of the sliding door is to use a background image for the buttons in a navigation menu. I am using a span within a link in the list to hold a part of the image. the link itself will hold another part of it. Which means, the important part will be the background-image position.
HTML
<ul class="blue"> <li><a href="#" title="home">home</a></li> <li><a href="#" title="products">products</a></li> <li><a href="#" title="blog">blog</a></li> <li><a href="#" title="contact">contact</a></li> </ul>
Now, I add in a <span> for each of the link to hold the left hand side of the background image.
<ul> <li><a href="#" title="home" class="current"><span>home</span></a></li> <li><a href="#" title="products"><span>products</span></a></li> <li><a href="#" title="blog"><span>blog</span></a></li> <li><a href="#" title="contact"><span>contact</span></a></li> </ul>
CSS
1. <ul> – Unorder-List
ul { padding: 5px; margin: 10px 0; list-style: none; float: left; } ul li { float: left; display: inline; /*For ignore double margin in IE6*/ margin: 0 10px; } 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 10px 0 -10px; padding: 1px 8px 5px 18px; position: relative; /*To fix IE6 problem (not displaying)*/ float:left; }
We need to make list-style as none because no image for any list within it. I use a float left here because I am going to use float left for the <span> and also <li>. I am not going to define a width for it because this is just a sample.
4. <Hover> – mouse over action
ul.blue li a.current, ul.blue li a:hover { background: url(images/blue.png) no-repeat top right; color: #0d5f83; } ul.blue li a.current span, ul.blue li a:hover span { background: url(images/blue.png) no-repeat top left; }
Since we are going to have the same effect for the mouse over and active link. I combine the codes.
Here is another example with 4 colors.
Compatibality, Conclusion and Download
This script has been tested in IE6, 7, Firefox 3.5.5, Safari and Google Chrome. This is a very useful technique which you can re-use in page with only 1 image. It is easy to use and I hope that you guys can understand my poor English explanation. Any question, just send me an email or drop me a comment here.
Update ( 10th Decemeber 2009 )
Thanks Dimitar Yanev for the advice to not using empty tags, I decided to update the codes. I hope you guys enjoy this little trick!
http://www.eceguvenlik.com
it’s very good
How can we create this image in fading background color?
Thanks, it’s a good tutorial.
nice
Great Tutorial.
But how should the “ul” be replaced that it’s not effecting other “ul’s” used on a webpage?
a great site to play flash games. You can find new games every time. Do you want to play the newly released flash games visit this site for the first time. You will not regret it.
Hi there, I discovered your website by means of
Google even as searching for a comparable subject, your web site got
here up, it appears to be like good. I have bookmarked it
in my google bookmarks.
Hello there, simply turned into aware of your blog thru Google, and located that it
is truly informative. I’m gonna be careful for brussels. I’ll be grateful in the event
you continue this in future. Numerous people can be
benefited from your writing. Cheers!
This is wonderful, I’ll give it a shot …Thank you
n resurrected nt popular style n hair tattoos. To take
matters into her own hands and figure how to get herself that ring.
How to Save Money When Booking a Family Vacation.
awesome blog and post. thank u for share
thank u for share
Star is reflected in the turbulent sea, wave up and down dancing, when the current is off.
Thank You. Excellent tutorial.
Great..!! thanks for the tutorial…
Great..!! thanks for the tutorial…
how can i hoover the active site?
so when i click the background picture moves to the active oneclicked menu item
Thanks a lot,,,,,,,
Great work, thanks!
WOW !! GOOD JOB, and thanks for it!!!
Thanks :)
Wow!! great tutorial dude. Thanks for sharing it…
Thanks for idea good day
thnx for share
hello
Pretty smart, saves a bunch of time from cutting up every sliding door image that you plan on creating.
It’s great… love it buddy… your article helps me a lot… Coulld you post more about CSS tricks…
good job dude….
this is a very good post.Great and helpful blog
I am glad to be a visitor of this pure web blog ! , appreciate it for this rare information! .
Great post. very useful. I am glad to be a visitor of this web blog !
great article bro
using a GIF in that situation would suffice.
Nice post: I like it.
Active status with this technique is’nt working on ie, i change :hover by :active and it work in all browsers less IE; do you know how to fixe it?
Fantastic JQuery menu! Very nice and simple!
How can i insert it in a right side of a table with 2 rows?
Can anyone help?
Thx
@palantir… How do you mean it’s just a swap image ?
I dont see anything special here. Its just a swap image or a roll over effect which is pretty easily implementable.
Thank you! So cool!
In your CSS for the background put “repeat-x”. Thank you
well Im still struggling with css, I perhaps need to spend more time on it
thank very much for this tutorial, well covered.
Thank you! So cool!
Excellent tutorial Bro. It’s a creative solution to that issue.
I love your sliding door effect!
When you rollover the list items, the background image on the whole button needs to change
Excellent tutorial Bro. It’s a creative solution to that issue.
i like this
nice button guys
Is there any way to go from an ordered list to an un ordered list back to an ordered list?
Eg.
{
1. eggs
2. ham
*honey
3. peanut butter
}
Kinda like that idea?
Do you have a similar tutorial for CSS3? At http://xn--klnningar-w2a.com/ I’ve been working with HTML5 and I wish I could learn som juicy CSS-action :)
this is very nice css menu, thanks
Thank for the awesome tips!
please can you tell me the link where we can create the image ????
thanks ;)
You can create an image using GIMP, there is a helpful tutorial here:
http://mygimptutorial.com/web-20-button-with-reflection
excellent !! tutorial
very simply and straight forward
Amazing tutorial. I’ll just have to tewak it little because ul and li tags brak my templeate..
Nice CSS tips very helpful. Thanks
very nice Tutorials
cool.., thank’s a lot for the list it’s so good for the beginner of blogging like me.. good job pavan,:P
Very nice tutorial thanks..
i will try it imediatly.
thanks again
great advice, i am using this right now to build a menu on my website! :) thank you
Been looking for the hover command… Thanks!
thank for those goood
Exactly what I was looking for me website, thank you!
so nice tips .. thanks for your time ..
Thanks for sharing with us. this is such a great information. i have just bookmarked your site and waiting for your next post
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.
I actually thouroughly enjoyed this point Bulletproof CSS Sliding Doors – Saddam Azad – UI Designer, Front-end Engineer. it was a definite terrific browse through thank you
This is a great tutorial! It works flawlessly.
This is very much helpful. I will incorporate this css scripts with my lecture on Dreamweaver CS4 tutorials and Dreamweaver CS5 tutorials
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
Thanks dude! This saved me a lot of time in a project i’m working at. I always forget how to do sliding door buttons with one image. I forget some floats :)
Bookmarked.
Really great. Planning to use it! thanks
Good tutorial!
I love your Blog’s Theme, its so cute.. I wish I had it
Nice work on the skin buddy..
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
I don’t get it…what’s so special about it ? it is just a swap image!!
good information very nice…
great tutorial – thanks for sharing it
great web thanks information
A really nice simple and functional explaination.
Many Thanks
Nice tutorial….
so nice but i want more
great post thanks a lot good article.
Hi everyone! Do you have the same model in another language? Should i use CSS instead? Thanks in advance.
I loved this job:):):):):
Thank You
Very Very Nice Technique, visit this web again
Great! Thank you very much, it helps me a lot!
I’ve been looking for something like this for a long time, and never thought I’d find it. Thank you for helping me.
Hey thanks for this informative post. Can you plz explain technique for creating vertical menu. Thanks
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.
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!
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.
The quality of post is very good.
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!
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
Pretty cool technique. Thanks mate.
I sometimes have real hard time wrapping my head around CSS. I was able to follow the above without a problem however. Thanks for the concept explanation and the examples. Mostly for the examples they seem to help me the most thanks.
thanks for free css samples
good news tut
this will do the trick thanks
I’m delighted that I’ve observed this weblog. Finally something not junky, which we suffer incredibly frequently. The website is well serviced and stored up to date. So it must be, thank you for sharing this with us.
thakyour dedi onur
This pretty fancy. I am thoroughly impressed with this web design tip.
very nice!
But it will only work when the background color of the container element of the button is a solid color (in this case white) for a transparent button you will need two images.
Thanks for posting. good an article.
thank you for post it. i can do it now. very thnx rly.
How do I make the background color go all the way across the screen? Other than that this is awesome! Thanks!
I figured it out, but thanks for copying my post. In your CSS for the background put “repeat-x”.
How do I make the background color go all the way across the screen? Other than that this is awesome! Thanks!
thnak you for post good article.
ty for post :)
These things are very basic and important. I will keep them in mind. It’s nice to share your post. Good article!
woow this good tool thanks for sharing
Very nice work my friend. I know nothing about compatibility with other browsers but… as long as your CSS code is absolutely in with all standards and there are no any single suspicious hack, I don’t care about other browsers. Mozilla works perfect.
Wow, great info. Been looking for this type of direction for a while, thanks for providing.
Thanks good tools have nice time
It’s very useful for me to study CSS. Thank you very much.
Thanks man !
Thanks for this tutorial, useful and an effective way to create a button in CSS with the sliding door technique.
Nice technique, very useful…
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.
nice css ill use taht thanks
How cool, i’ve been looking for that for ages! Thanks :-)
Thanks for sharing..Like it.
Is there a way to modify the code you provided and use a CSS sprite?
I am impressed by the simplicity of this problem. I’ve tried few hours to make a similar sliding door but after this time, I’ve found your tutorial, with the solving of the problem. Thank you !
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.
The tutorial is very easy to understand, now I’m learning CSS. This is very helpful.
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…
great help for reusable button codes
i like it as well as i need how to add multiple menu in this menu
Thanks for posting a article about CSS.As CSS Plays a best Role in Web designing & it reduces a work of defining a repeatedly Colors,Font styles. Also there are 2 types of CSS. Internal CSS & External CSS. As External CSS reduced the work of Redfining color & fonts in a Site. Also it is easy as compared to internal CSS.
That is to be expected in a long-term, high-risk project like ours. So, we turned to the blogging community for help – and got it! We have published our problems, and the community responded with results!
Thank you very much for this post. This is very cool.
I love your navigation bar, and want to use pink for my blog. I can’t open the script download because I don’t have the proper software. What is the entire script?
When I am inserting it into my watermark template blog html, do I simply insert the CSS above the , and put in my http address into the html in a widget?
Thanks SO much for this!
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.
Still trying to figure out how to imlement this tutorial in one of my blog. Thanks, anyway for a great help.
thanks! awesome stuff :)
I must to say that I have been looking for this kind of info on this topic for quite a long time and nearly given up the search for it hoping that I will not get it.
You’ve described the button style, in very detailed and meaning method you’ve chosen. Thank you
Thanks for the good information it is easy understandable even for non IT specialist, says Fussbodenheizung
only in css
Hi can u pls show me how to add multilevel drop down to this Sliding Door menu.
Thks
Why a and span to float it?
Thanks
Great tutorial! Thank you very much.
I think firefox is a much better browser anyway.
wow this made the whole process simple.
going to implement it in my page ASAP
What an excellent? teacher you are! You break it down so simply. I am no longer intimidated by html code. thanks!
Yes it can get very intimidating for those who are new to html but it’s not that difficult once you practice little bit.
Prior to a more widespread adoption of CSS, we started seeing a lot of innovation in navigation design. Creative shapes, masterful color blending, and mimicry of physical interfaces from the real world. But these designs often relied heavily on a complex construction of text-embedded images, or were wrapped with multiple nested tables.
hey can you write a tutorial on how to implement this into a drop down menu? thank!
Thanks realy good article css sample
i love too much this sliding door css thanks for sharing
Thanks for this css usefull that
i just used this for my current project and it looks great and simple to use… thanks!
thank you for sherring. this codes are very usely. thank you…
thanks for information really good article thanks
Good article thanks for share
Good article thanks for share
Thanks for sharing
a great share. save this page and always will be. health care into your hands. Thank you.
thanks for sharing usefull information
good sharing i use that code thanks
I loved this tutorial. Thanks for sharing ur knowledge with us :)
Thanks for your teaching us, it`s very useful!
resume services
Very cool…
Thanks for this excellent
I need a horizontal menu-bar with a vertical runoff-list of sub-items. I rearranging you css code as best as I could to fit my criteria, I was unable to get the right side of the image (span?) to show.
My css code looks like this:
.menu-dir {
font: .75em “Myriad Pro”, “Lucida Grande”, Lucida, Verdana, sans-serif;
float: left;
}
.menu-dir ul {
list-style-type: none;
margin: 10px 0;
padding: 5px;
}
.menu-dir ul li.menu-head {
margin: 0 10px;
}
.menu-dir ul li.menu-item {
margin: 0 10px;
}
.menu-dir ul li.menu-head a {
color: #f13a15;
text-decoration: none;
font-weight: bold;
letter-spacing: .09em;
}
.menu-dir ul li.menu-item a {
text-decoration: none;
color: #333;
}
.menu-dir ul li.menu-head a span {
margin: 0 10px 0 -10px;
padding: 1px 8px 5px 18px;
position: relative;
/*To fix IE6 problem (not displaying)*/
float: left;
}
.menu-dir ul li.menu-item a span {
margin: 0 10px 0 -10px;
padding: 1px 8px 5px 18px;
position: relative;
/*To fix IE6 problem (not displaying)*/
float: left;
}
.menu-dir ul li.menu-head a:hover {
background: url(../i/blue.png) no-repeat right top;
}
.menu-dir ul li.menu-item a:hover {
background: url(../i/blue.png) no-repeat right top;
}
.menu-dir ul li.menu-head a:hover span {
background: url(../i/blue.png) no-repeat left top;
}
.menu-dir ul li.menu-item a:hover span {
background: url(../i/blue.png) no-repeat left top;
}
Hi Kailoon
Your technique is nice and I like it, but it doesn’t work in Opera and I work in a public sector company where every browser has to render the same way. And with conditional comments only available for IE, it makes things more difficult. Please, is it possible to have another version tested on Opera too? or maybe you can advice me alternatively.
Many Thanks
If you’d notice, this tutorial is written n 2008. It may not compatible with the latest browsers. But you can have the basic idea how it works.
Further, more and more people is using border radius which not required any images. You should try that.
I have a problem with it when I try to add a second menu below the first one. The problem is showing with IE 7:
http://imghost.klayz.com/k/xnormanhch.jpg
as you can see.. ‘Eventi’ and ‘Annunci’.
easy menu design, nice
That’s it! It will be more easy to use. Specially, it will save image slicing time and will be more manageable.
Great.
A great html tutorial! I’m always in need for some simple html!
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. :)
Hi,
I’ve just discovered an issue on all the versions of IE : if you place your buttons in a div and then you show/hide this div with display:none/display:*whatever*, the right side of the rounded background disappears.
I’ve spent hours trying to tackle this bug but found no solution.
try using visibility:hidden instead of display:none.
Just added, this link describe some sliding door technique using image http://morzdesign.com/pure-css-tab-based-horizontal-menu-with-icon
Dude!! awesome thanks for this sliding doors, the only thing that i would augment is using css sprites for the hover, anyway your slidiing door technique just rocks
Excellent tutorial Bro. It’s a creative solution to that issue.
This was really helpful. Thanks!
Wow, this is very helpful. I have 4 websites I’m tweaking a bit . Thanks
thank you very much very vell
Great tut. I already know where I can use this technique. I also found this site to generate the background images like the ones you used (instead of photoshop). http://www.easyimg.com/canvas.aspxThanks again!
Nice and simple. Thanks! Especially for preview and download option.
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
BYTW, stands for Unordered List, as opposed to which stands for Ordered List. UL’s are used for list items (aka ) that do not require numbering or ordering.. hence the name ;) UL’s are also the most common way to create/style navigation.. that is until HTML 5 takes the scene on a larger scale with its element – inside of which, we will most likely continue to use UL’s anyway :D
Thanks tutorial added
This is very usefull article its giving page speed thanks for sharing.
Excellent job! Thank you for the inspiration.
use this tutorial
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 :)
Awesome tips by you.
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
i made lot changes in css and images pls notice that
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;
}
Interesting! I haven’t used this technique before but I’d like to try it.
Thanks for this tutorial.
It is very helpful.
i’ve just started to try out the possibilities of css. i wonder if its possible to combine your code with some kind of simple hover-trick like shown here: http://www.webmasterpro.de/coding/article/css-hover-grafiken-ohne-nachladen.html/sample/02c094ffa2a9221a338b049d4caab57d/
Which Values do I have to alter, if I want to use larger graphics?
Wow!! excellent tutorial on css buttons. thanks.
Nice tutorial, I’ll practice it soon :)
Great article! but i totally agree with Chrisbergr. I tried it and it works totally without any unecessary empty tags.
I’ve update the codes, please check!
Thanks for your feedback!
Great..!! thanks for the tutorial…
ITs just perfect for me.
I’m using slightly different technique wich I find more elegant HTML-wise, since I don’t like empty tags to be used.
HTML
‹a href=""›
‹span›Submit‹/span›
‹/a›
CSS
a {
background: url(button.png) top right;
}
a span {
background: url(button.png) top left;
margin: 0 10px 0 -10px;
padding: 5px 8px 5px 18px;
}
I’m using too
It’s no have support to a flexible text.
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 :)
Hey,
Any idea if there is a release with drop down menu for this sliding door menu
very nice trick. thanks
I’m finding it!thanks
hi these are good notes.
This technique is not so new… I’ve used it about a year ago, in code for some poll…
The technique’s great, until you use transparent PNGs or even transparent GIFs.
Great Tutorial and nice CSS code. Very useful to me. Thanks guys.
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.
good solution, thx
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 Kailoon, i really impressed with your work that how you smartly used one single image without slicing it a part( though sliding door means slicing an image into two to use) but you buttons works well and they will scale to top notch. the only problem is it won’t pass validation of strict xhtml because no element in xhtml should be empty. so place the nav-text inside the span to make them work perfect and valid.
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!
Hi there
When I’m trying this, ‘Home’ is permanently highlighted regardless of what page I’m on. How do I get it so that the page I’m on is highlighted in the menu?
Great tutorial otherwise!
It is because there is a “current” class for home link. You need to use dynamic language such as php or javascript to add class to highlighted link.
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?
If possible, can you paste your code somewhere? So that I can check it out?
Excellent tutorial Bro :)
How do you center the menu on the page?
I can’t get what you mean…
I think he means that when the links are listed left to right… the list as a whole isn’t centered in the webpage.
For instance, I am trying to put 5 buttons side-by-side under my banner on the top of my webpage… the banner is centered so the buttons must be centered. The button on the left of the list is all the way on the left, and the button on the right doesn’t reach all the way to the right… the list isn’t centered on the screen.
How can we adjust the values in the CSS sheet to make the list center itself on the webpage (meaning distributed evenly horizontally but in the middle of the page)
thx…ur site was very useful..^^
nice
what if the corner is transparent?
Then you need to split the image into two parts, with a large transparent chunk in between (a small chunk and a long one). And the css changes quite a lot to match.
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!
1 = TMENU
1 {
wrap = (ul class=”blue”)|(/ul)
expAll = 1
NO.wrapItemAndSub = (li)|(/li)
NO.stdWrap.wrap = (span)(/span)|
}
Use “” instead of “(” and “)”.
its simple but i dont understand culd u plz explain it plzzzzzzzz
This is too perfect!!!
Thanks for tutorial!
It’s a great menu to learn CSS.
Thanks, very easy to understand and implement
Really cool tutorial. It help me on my proojects.
very neat….. thanks
Waw Cascading Style Sheets tuty, thank for sharing to us…
I lke the site…
this is good!
amazing… love it buddy… helps me a lot… can you post more about CSS tricks…
can it work for blogspot??
Thank for the awesome tips!
kailoon in one of the best site for css
mamjed :
Hmm.. okie, I will try :)
hey can you write a tutorial on how to implement this into a drop down menu? thank!
found FF button padding fix:
button {padding:0; border:0}
button::-moz-focus-inner {padding:0; border:0}
button:focus {outline: 1px dotted}
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 :)
YoYurec :
Mind to show me the sample?
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!
Wow ~
Thanks :-)
Here is another version for TABS
http://www.vision.to/single-image-tabs-with-three-state-rollover.php
:-)
feha :
Cool :)
Hi
here is my version
http://www.vision.to/single-image-sliding-doors-and-rollover.php
:-)
Cool Tutorial, How about to get the page validate in the span use
Ahh, those spans do wonders – thanks for the article!
Ross Johnson:
Ya, the good thing to have css based website is cutting up unnecessary codes and images. Thanks!
John:
Opps, typo :P luckily readers still can understand and they are so kind :) Thanks for informing me on this.
Shreemani:
Thank you!
existdissolve:
Hi there, wow. cool ~ :)
Fazal:
Huh? Really? I don’t have such problem. Anyway, thank you for your suggestion:)
Buzu:
Thank you.
Phunky:
Thank you. yeah~ but I prefer to put it as empty :P
smt:
thanks for your explanation :)
Pretty cool technique. Thanks mate.
Your concept example shows “<span”… this is not correct.
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…
Excellent tutorial Bro. It’s a creative solution to that issue.
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.
Good article–I am using a similar technique on the submission form field “hints” at http://css-imagine.com.
@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
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.
thnx for share
Thanks :)
Bro, I love your Blog’s Theme, its so cute.. I wish I had it :(
Nice work on the skin buddy..
Yeah, I dont see anything special here. Its just a swap image or a roll over effect which is pretty easily implementable.
the width is extensible without using multiple images for different buttons (even w/ rounded corners or glossy background).
great tutorial kailoon. now i know how to make sliding door with ur clear tutorial. thx dude for sharing
thanks Bel..
Good tutorial!
I don’t get it…what’s so special about it ? it is just a swap image…
Haha…the only comment we have here :P thanks dude ….