Sliding doors navigation

HTML & CSS
1

Hi,
I have used Andy Budd’s CSS Mastery Book to create a ‘Sliding doors’ menu. Here it is: http://86.125.253.236:8888/menu/

There is a problem. The CSS code doesn’t show the complete height of the menu (notice the bottom). “tab-left.png” is 44px, altough the website shows just 30px. Any idea how can I solve this problem?

2

Hi,

As you have a fixed height menu you will need to set the height accordingly.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simplified Sliding Doors</title>
<style type="text/css">
<!--
/* Basic Styling
------------------------------------*/

body {
    font: 76&#37;/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    background-color: #fff;
}
/* mainNav
------------------------------------*/

ul#mainNav {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 72em;
    list-style: none;
    text-transform: uppercase;
}
ul#mainNav li {
    float: left;
    background: url(http://86.125.253.236:8888/menu/img/tab-right.png) no-repeat top right;
}
/* Hack to make IE/Mac play nice */
ul#mainNav li a {
    padding: 0 2em;
    background: url(http://86.125.253.236:8888/menu/img/tab-left.png) no-repeat top left;
    text-decoration: none;
    color: #fff;
    float: left;
[B]    height:44px;
    line-height:44px;[/B]
}
ul#mainNav a:hover {
    color: #333;
}
-->
</style>
</head>
<body>
<ul id="mainNav">
    <li class="first"><a href="#">Home</a></li>
    <li><a href="about.htm">About</a></li>
    <li><a href="news.htm">News</a></li>
    <li><a href="products.htm">Products</a></li>
    <li><a href="services.htm">Services</a></li>
    <li><a href="clients.htm">Clients</a></li>
    <li><a href="casestudies.htm">Case Studies</a></li>
</ul>
</body>
</html>

Hope that was what you wanted.

Remember to use the id name before the selctor or you will style all elements on the page and not just the one you are concerned with.

e.g. Not this:
ul {color:red}

but use this:

ul#mainNav {color:red}

3

Thanks, mate. It works! :wink:
How can I add some space between the menu elements?
I tried:


ul li {
  float: left;
  background: url(img/tab-right.png) no-repeat top right;
  padding: 0 10px;
}

and the result: http://86.125.253.236:8888/menu/

4

Hi,

Padding is the space inside the element and you need it outside the element so use margin instead.


ul li {
  float: left;
  background: url(img/tab-right.png) no-repeat top right;
 [B] margin: 0 3px 0 0;[/B]
}
5

Can I use a CSS sprite instead of the two PNG file ? Something like this : http://dl.dropbox.com/u/1924024/sprite.png

Thanks!

6

Yes just use the one image as long as your text is never going to be longer than that image (or that the zoomed text doesn’t overflow within reasonable limits).

You shouldn’t need to change much apart from the image url and some padding.

7

Something like this:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simplified Sliding Doors</title>
<style type="text/css">
<!--
/* Basic Styling
------------------------------------*/

body {
    font: 76&#37;/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    background-color: #fff;
}
/* mainNav
------------------------------------*/

ul#mainNav {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 72em;
    list-style: none;
    text-transform: uppercase;
}
ul#mainNav li {
    float: left;
    background: url(http://dl.dropbox.com/u/1924024/sprite.png) no-repeat top left;
        padding:0 0 0 6px;
        margin:0 3px 0 0;
}
/* Hack to make IE/Mac play nice */
ul#mainNav li a {
    padding: 0 2em 0 1.5em;
    background: url(http://dl.dropbox.com/u/1924024/sprite.png) no-repeat top right;
    text-decoration: none;
    color: #fff;
    float: left;
    height:44px;
    line-height:44px;
}
ul#mainNav a:hover {
    color: #333;
}
-->
</style>
</head>
<body>
<ul id="mainNav">
    <li class="first"><a href="#">Home</a></li>
    <li><a href="about.htm">About</a></li>
    <li><a href="news.htm">News</a></li>
    <li><a href="products.htm">Products</a></li>
    <li><a href="services.htm">Services</a></li>
    <li><a href="clients.htm">Clients</a></li>
    <li><a href="casestudies.htm">Case Studies</a></li>
</ul>
</body>
</html>
8

Thanks. I don’t really understand the technique, but it works :slight_smile:
I need to remove the small gap in the sprite.png file.

9

I like the first method better, because:


padding: 0 2em;

sets 2em on both left and right side. The CSS sprite uses:


padding: 0 2em 0 1.5em;

which is weird :frowning:

10

You are missing the point.:slight_smile:

The remainder of the padding is on the parent list so that the left edge which is 6px wide is protected and not covered by the image on the anchor which is placed on top. If there were no padding on the list then the image on the anchor would rub out the left corner.

If you change the padding to px then you can work it out easier.

li {padding:0 0 0 6px}
li a{padding:0 24px 0 18px}

This makes the padding equal on both sides.

11

Thanks!
I would like to add an aditional image file (active.png) for active links. I think, this one is enough:


#navbar ul li.active {
  background: url(img/active.png) no-repeat top left;
}

#navbar ul li.active a {
  background: url(img/active.png) no-repeat top right;
}

The other properties are inherited, right?

12

(I assume mean for the current link on a page and not the pseudo class :active.)

Yes that should work fine but you could also incorporate that into the original sprite as well if you wanted.

Just create a double image with the highlighted image underneath the other one at a set number of pixels down. then you just change the background-position properties for the li.active.

Say the second image is stacked 100px from the top of the whole image:


#navbar ul li.active { background-position:0 -100px;}
#navbar ul li.active a { background-position:100&#37; -100px;}

A lot neater and no delay :slight_smile:

13

Thanks. I noticed a small problem in the right corners:
http://dl.dropbox.com/u/1924024/corner.png

I can solve the problem using: margin-right: -1px on the anchor element. Any idea why does this happen?

14

Hi,

Are you using a transparent png?

If so then when you lay the right side of the image on top of the image underneath then the image below shows through the transparent portions.

Usually you would use non transparent pngs for sprites like this assuming you are keeping then on the same white background.

If you want transparent pngs then you need to ensure that the transparent parts are moved away from the image underneath so that it doesn’t show through the transparent corners which as you found out can be done with negative margins in most cases.

Hope that explains it:)

15

Yes. I’m using a transparent PNG.
I modified the sprite: http://dl.dropbox.com/u/1924024/sprite.png

The new background-positions:


ul li {
   background: url(img/sprite.png) no-repeat left -47px;
}

li a {
   background: url(img/sprite.png) no-repeat right 0;
}

Using this method, the weird pixels dissapear in the right corner, altough I don’t understand why.

16

That’s because the left image is only a few pixels wide and doesn’t extend to the right corner so there is nothing to show through. :slight_smile: