CSS Sliding Door using only 1 image

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

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.

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.

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!

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!

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.

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

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.

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.

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…

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!

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.

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.

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.

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.

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!

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…

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

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 :)

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

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!

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?

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)

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!

@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