My first idea was that it is complicated to do menu items with rounded corners and change color on hover.
So I thought why not make a rectangle and lay a picture with transparent sections on it,
so it would seem that the menu items are actually with rounded corners.
It’s definitely a brilliant idea, it’s just that anchors need to be one the “top” of the stack to work… that’s why CSS people use WAY too many images and containers… because the other rule we have to live with (for now) is one bg image per container. So some sites, just for rounded corners, have lots and lots of containers.
Javascript can do rounded corners just fine, but if you go that route, make sure there’s something usable for the rest of us.
Here’s a very quick quicky of something like what you would do if you used CSS Sprites/Sliding Doors in this menu (the images look terrible, and if this were a client’s site then I probably wouldn’t be messing with the margins like I did here to position the anchors, but I’d prolly use some other positioning technique):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Background CSS Image Sprites and Sliding Doors</title>
<style type="text/css">
* {
margin: 0;
}
ul {
list-style: none;
}
#base {
width: 1024px;
height: 455px; /*only for this test*/
margin: 0 auto;
background: url(webzoneee.png) 0 0 no-repeat;
}
#menu {
min-height: 148px;
padding: 41px 0 36px 114px;
overflow: hidden;
}
* html #menu {height: 148px;}
#menu li {
display: inline; /*pretty much only bothered stating this for IE*/
}
#menu a {
float: left;
width: 196px;
height: 72px;
margin-right: 90px;
color: #000;
font-size: 1em;
line-height: 72px;
text-align: center;
background: #f08 url(anchorbg.png) 0 0 no-repeat;
}
#menu a.last {
margin-left: 24px;
}
#menu a:focus, #menu a:hover, #menu a:active {
font-weight: bold;
font-size: .8em;
background-color: #f00;
background-position: 0 -73px;
}
</style>
</head>
<body>
<div id="base">
<ul id="menu">
<li><a href="#">AAAAAAAAAAA</a></li>
<li><a href="#">BBBBBBBBBBB</a></li>
<li><a class="last" href="#">CCCCCCCCCCC</a></li>
</ul>
<ul class="menu1">
<li><a href="#">AAAAAAAAAAA</a></li>
<li><a href="#">BBBBBBBBBBB</a></li>
<li><a href="#">CCCCCCCCCCC</a></li>
</ul>
<ul class="menu2">
<li><a href="#">AAAAAAAAAAA</a></li>
<li><a href="#">BBBBBBBBBBB</a></li>
<li><a href="#">CCCCCCCCCCC</a></li>
</ul>
</div>
</body>
</html>
I didn’t actually do any styling of the other two menus.
Because of bugs IE has when you play with the body like a container, I left it and used #base to be the box who’s centered and 1024px wide. This is definitely the safer route… arg, I didn’t bookmark the threads but there are some very recent, active threads where the problems with IE and doing goofiness with the body are shown and explained by Paul O’B.
http://stommepoes.nl/Tests/webzoneee/anchortest.html for you to look at. Obviously it would look better if the images had been done better.
If you turn images off in your browser (or misspell the image names/paths) then you’ll see what you have is something that still works, where a background colour changes on both hover AND focus (don’t forget focus!!) and active just for IE6. So the images are not doing any work (you can’t rely on images to convey information like that, since not everyone is guaranteed to see them).
The moving of the background position is often called “Sliding Doors” (though the actual sliding-door technique was a single image split up among two elements so you could imitate something like a rounded-cornered tab without having images of a set width, so each tab could naturally be the width of the text inside it) and using a single image for it is often called a “CSS Sprite”, with the idea that, like in older video games, a single image moves around rather than a different one for each position.
You can find a ton more about them if you google those terms.
Here’s another one I did for someone on another forum (so, those aren’t my images or anything): http://stommepoes.nl/Tests/lilbellas2.html
You can just grab the images from the folder and see what they look like. I’m taking down the version I made for you in about a week or so.
