CSS Nav trouble

HTML & CSS
1

Hi,

I’ve been trying to work off of Eric Watson’s graphical CSS nav at: http://www.visibilityinherit.com/code/nav20.php

I’m only working w/2 states on this, but having trouble making it work vertically. You’ll see that between each button is a vertical gap that I would like to be dead space (not clickable). In addition, I can’t for the life of me get the default text to be hidden and I can’t understand how he does it.

A test page is at: http://ehydrant.com/test.html

Any help on this?

Thanks Guys.

2

Hello, I can’t look at the moment, but in the meantime, here is the tut associated with that nav it’s of any help… http://www.visibilityinherit.com/code/sprites.php

3

I see the tut, but I have no idea where I’m off the track :eek:

4

You’ll see that between each button is a vertical gap that I would like to be dead space (not clickable).
Hi Ken,
From looking at your ul id #nav you have not removed the default margins and paddings that browsers apply to a ul.

#nav {
[B]margin:0;
padding:0;[/B]
list-style:none;
width:227px;
height:360px;
overflow:hidden;
background:url(graphics/nav.jpg);  /*IE6 Flicker Fix */
}

In addition, I can’t for the life of me get the default text to be hidden and I can’t understand how he does it.
Well, you left out the “b” tag that the text is wrapped in. That is what hides the text. The “b” tag is given absolute positioning and a negative z-index via the css.

Look back at the tut and look for those b tags in both the css and html. :wink:

This selector is saying “target the b tag which is found in the anchor” -

#nav a b {
[B]position:absolute; /* the magic */[/B]
left:0;top:0; /* the magic */
[B]z-index:-1; /* the magic */[/B]
height:50px; /* same height as anchor */
width:150px; /* same width as anchor */
line-height:50px; /* more style */
text-align:center; /* more style */
}
5

Thanks Ray.

I was trying to understand the “b” tag stuff and see your quick update, but look back at the original link I posted to Eric’s demo and none of that stuff is there.

6

After resetting your ul you will also need to add margin to your li if you want dead space between the anchors.

This gets it close

#nav li {
float:left;
[B]margin:5px 0;[/B]
}

You will probably need to define a height on your anchor to get things pixel perfect with your sprite.

I was trying to understand the “b” tag stuff and see your quick update, but look back at the original link I posted to Eric’s demo and none of that stuff is there.
Yes, it’s there. Look at the second example ( …Or Even Better!) called the “Spriteric” lower down the page.

7

Now I have a complete disaster http://ehydrant.com/test.html

What exactly does the “b” in this code mean?
#nav a b

8

You just made your anchor 360px high. That’s bigger than your menu. :shifty:

Look at Eric’s 2nd example on the tut page and look at the html. The b tag is highlighted in bold text. You still have not got it in your html yet so it is not doing anything.

The b tag is just the “bold” tag. It is an inline element so it will legally nest within the anchor. It is just for hooking the absolute positioning and negative z-index to.

When you copy and paste other peoples code it is always important to adapt it to your project.

9

It looks like you got it now. :slight_smile:

I was putting it together too, I set a 15px top and bottom padding on the ul though.

That allowed me to get rid of the margin on your first and last anchors.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sprite Nav</title>
<style type="text/css">
* {
margin:0;
padding:0;
}

#nav {
width:227px;
padding:15px 0;
list-style:none;
overflow:hidden;
background:url(graphics/nav.jpg); /* IE6 Flicker Fix */
}
#nav li {
float:left;
position:relative; /* Spriteric Add */
margin:5px 0;
}
#nav a {
float:left;
width:227px;
height:20px;
background:url(graphics/nav.jpg);
outline:0;
text-decoration:none; /* Spriteric Add */
color:#000; /* Spriteric Add */
}
#nav a:hover b, #nav a:focus b { /* Spriteric Add */
font-size:120%;
}
#nav a b { /* Spriteric Add */
position:absolute;
left:0;top:0;
z-index:-1;
height:30px; 
width:227px;
line-height:30px;
text-align:center;
}
* html #nav a b { /* Spriteric Add for IE6 */
left:-999em;
}

/* Default State */
#nav #a{background-position:0 -20px;}
#nav #b{background-position:0 -50px;}
#nav #c{background-position:0 -80px;}
#nav #d{background-position:0 -110px;}
#nav #e{background-position:0 -140px;}
#nav #f{background-position:0 -170px;}
#nav #g{background-position:0 -200px;}
#nav #h{background-position:0 -230px;}
#nav #i{background-position:0 -260px;}
#nav #j{background-position:0 -290px;}
#nav #k{background-position:0 -320px;}

/* Hover/Focus State */
#nav #a:hover,#nav #a:focus{background-position:-227px -20px;}
#nav #b:hover,#nav #b:focus{background-position:-227px -50px;}
#nav #c:hover,#nav #c:focus{background-position:-227px -80px;}
#nav #d:hover,#nav #d:focus{background-position:-227px -110px;}
#nav #e:hover,#nav #e:focus{background-position:-227px -140px;}
#nav #f:hover,#nav #f:focus{background-position:-227px -170px;}
#nav #g:hover,#nav #g:focus{background-position:-227px -200px;}
#nav #h:hover,#nav #h:focus{background-position:-227px -230px;}
#nav #i:hover,#nav #i:focus{background-position:-227px -260px;}
#nav #j:hover,#nav #j:focus{background-position:-227px -290px;}
#nav #k:hover,#nav #k:focus{background-position:-227px -320px;}
</style>
</head>
<body id="home">
    <ul id="nav">
        <li><a href="#" id="a"><b>ABOUT</b></a></li>
        <li><a href="#" id="b"><b>CORP/NON-PROFIT</b></a></li>
        <li><a href="#" id="c"><b>GOLF</b></a></li>
        <li><a href="#" id="d"><b>WEDDING</b></a></li>
        <li><a href="#" id="e"><b>PORTRAITS</b></a></li>
        <li><a href="#" id="f"><b>PETS/PEOLE</b></a></li>
        <li><a href="#" id="g"><b>BLOG</b></a></li>
        <li><a href="#" id="h"><b>CONTACT</b></a></li>
        <li><a href="#" id="i"><b>TESTIMONIAL</b></a></li>
        <li><a href="#" id="j"><b>LINKS</b></a></li>
        <li><a href="#" id="k"><b>CLIENT ACCESS</b></a></li>
    </ul>                
</body>
</html>
10

Thanks Ray! It’s perfect now.

Adapting? I was adapting - I did take it from horiz. to vert. and figure out the extra top margin didn’t I? :wink: I could have adapted for weeks and never understood why a bold tag (not in the original example) was being used until you said “It is just for hooking the absolute positioning and negative z-index to.” Now I see it’s a “trick”.

Still, if you go to Eric’s example I originally “adapted” from http://www.visibilityinherit.com/code/nav20.php and search for every letter “b” in the code, there’s no “#nav a b” to be found.

Here’s that code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Nav #20</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#eee;
}
#nav {
list-style:none;
width:750px;
height:50px;
margin:20px auto;
overflow:hidden;
background:url(images/sprites.gif); /* IE6 Flicker Fix */
}
#nav li {
float:left;
}
#nav a {
float:left;
width:150px;
padding-top:50px;
outline:0;
background:url(images/sprites.gif);
}
/* Default State */
#nav #a{background-position:0 0;} 
#nav #b{background-position:-150px 0;}
#nav #c{background-position:-300px 0;}
#nav #d{background-position:-450px 0;}
#nav #e{background-position:-600px 0;}
/* Hover/Focus State */
#nav #a:hover,#nav #a:focus{background-position:0 -50px;}
#nav #b:hover,#nav #b:focus{background-position:-150px -50px;}
#nav #c:hover,#nav #c:focus{background-position:-300px -50px;}
#nav #d:hover,#nav #d:focus{background-position:-450px -50px;}
#nav #e:hover,#nav #e:focus{background-position:-600px -50px;}
/* Active State */
#nav #a:active{background-position:0 -100px;}
#nav #b:active{background-position:-150px -100px;}
#nav #c:active{background-position:-300px -100px;}
#nav #d:active{background-position:-450px -100px;}
#nav #e:active{background-position:-600px -100px;}
/* Current Page */
#home #nav #a{background-position:0 -150px;}
#about #nav #b{background-position:-150px -150px;}
#services #nav #c{background-position:-300px -150px;}
#map #nav #d{background-position:-450px -150px;}
#contact #nav #e{background-position:-600px -150px;}
</style> 
</head>
<body id="home">

<ul id="nav">
  <li><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.visibilityinherit.com/code/nav20.php#)" id="a">HOME</a></li>
  <li><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.visibilityinherit.com/code/nav20.php#)" id="b">ABOUT</a></li>
  <li><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.visibilityinherit.com/code/nav20.php#)" id="c">SERVICES</a></li>
  <li><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.visibilityinherit.com/code/nav20.php#)" id="d">MAP</a></li>
  <li><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.visibilityinherit.com/code/nav20.php#)" id="e">CONTACT</a></li>
</ul>

</body>
</html>

Now my next issue is an unbelievably easy float problem… that is for you guys. For me, I’m reading Floatutorial over and over again and can’t figure it out…:injured:

11

Sorry about that, I was referring to the Main Sprite Tut link that Eric gave in post #2. Not the one you posted. I see where you were confused now.

12

Good job Ray.

“where b?” if you go to that tut I linked to above you will find both examples (b and no b). You grabbed that nav from my compilation section.

13

I understand now which version to work from, but still don’t fully get the #nav a b part.

14

Ken, there is one more thing you need to do. You need to set the “b” height and line-height the same as your anchor height. It will just keep things looking uniform if the image is disabled. Which is the whole purpose of that text replacement method. I set the color as white on the anchor also.


#nav a {
float:left;
width:227px;
[B]height:20px;[/B]
background:url(nav.jpg);
outline:0;
text-decoration:none; /* Spriteric Add */
[B]color:#FFF; /* Spriteric Add */[/B]
}
#nav a:hover b, #nav a:focus b { /* Spriteric Add */
[B]font-size:95&#37;;[/B]
}
#nav a b { /* Spriteric Add */
position:absolute;
left:0;top:0;
z-index:-1;
width:227px;
[B]height:20px;/*same as anchor height*/[/B]
[B]line-height:20px;[/B]
text-align:center;
[B]font-size:90%;[/B]
}
15

It’s saying your targeting a “b” nested in a “a” nested in the #nav. If your uncomfortable with that image replacement method you can just get rid of all the b stuff and just use text-indent:-999em instead. The b stuff only caters for pepole with images off and css on, which probably is not much.

16

Thanks again guys.

Now I understand that #nav a b could have also been #nav a i or other possibilities. But with a meaning “active” and ID’s of a, b, c,… etc., the letters were getting confusing. (:

17

Hi Ken,
I just looked through that link again and I see you have your page set up. That layout your using looks like this one.
http://www.css-lab.com/demos/2col-fluid/2col-elastic.html

I could tell from the comments in the css, I just reworked it yesterday. :slight_smile:

Rather than taking a min-max/elastic layout and adapting it into a fixed width layout you would have been better off choosing a fixed width layout to begin with.
http://www.css-lab.com/demos/2col/2col-equal.html

After you set a fixed width on that elastic layout it defeated the logic behind the layout’s structure and left the IE6/7 fixes kinda meaningless (though they are still needed with your template).

They could have gained “haslayout” from the defined widths of the fixed width layout. It also left the “clearfix” float containment unnecessary for good browsers since they get the child floats (left & content) contained by the floated parent (innerwrap) in that fixed width layout. :wink:

You also have an ID of the same name being used twice on that page. ID’s are unique and they can only be used once in a page.

<body [B][COLOR=Red]id="a"[/COLOR]>[/B]
    <div id="wrapper">
        <div id="header"></div>
            <div id="navbar">
                <ul id="nav">

                    <li><a href="#"[B] [COLOR=Red]id="a"[/COLOR]>[/B]<b>ABOUT</b></a></li>
18

First, I would like to take this opportunity to put a shout out to CSS Lab and it’s talented and modest owner, Ray Hopson. Take a bow Ray.
:slight_smile: Remember to visit CSS Lab for all your CSS layout example needs. :slight_smile:

Sure that’s your layout! If I wanted to hide that I would have pulled all the comments and mucked up the code a bit.

Sure I know ID’s have unique names. I’m just sloppy.

I started by trying my own layout and getting into trouble, so I looked for a good way out. I’m not surprised I took the wrong way out, are you?

19

Sure that’s your layout! If I wanted to hide that I would have pulled all the comments and mucked up the code a bit.
No need to hide or muck anything. :slight_smile:

"I hope you find these demos useful and that they will help you learn more about structuring CSS layouts…
The opening statement is an invitation to all who need something to build on.

There is not any techniques being used in the demos that I can take full credit for. In fact you will find credit links in several of them.
I just try to put my own twist on them and keep the code lean.

I started by trying my own layout and getting into trouble, so I looked for a good way out. I’m not surprised I took the wrong way out, are you?
The reason there are so many different variations (fixed/fluid etc.) is because they all require a different approach and IE workarounds (mainly IE6/7). Some require more html/css than others to accomplish the goal. It is always best to keep your code to a minimum and not have styles lying around that are not doing anything.

I have been slowly working my way through them and cleaning up the code and deleting some of them completely. It is time consuming but I hope to get them all as clean as possible. :slight_smile:

I look back on some of them that I made when I was first learning and I am finding a lot of things that are a bit bloated.

20

Since I am not as lean as I can be, I at least like my code as lean as possible.

So, do you think I should switch to the other layout you suggested, or not worth the effort and risk w/my junior trainee skills?