Need help in fixing vertical navigation

**colourels** · Sep 17, 2007 10:33

Hi all,
I have been scratching my head for 2 days in fixing it. Here is the problem - the links are not working, and it shown whole nav.gif. Please help. Thanks in advance.

Here is the html:
<div id="nav" >
<ul id="nav" name="nav">
<li id="n-main"><a href="/" title="welcome" >main</a></li>
<li id="n-work"><a href="/work/" title="work samples">work</a></li>
<li id="n-about"><a href="/about/" title="Find out more">about</a></li>
<li id="n-contact"><a href="/contact/" title="Get in touch, hire me or ask me a question">contact</a></li>
</ul>
</div>

Here's the CSS:
#nav {
position:absolute;
top:259px;
left:830px;
width: 160px;
height: 110px;
background:url(/assets/images/nav.gif) no-repeat;
margin: 0;
padding: 0;
float: left;
}

#nav ul li, #nav ul a {
background:url(/images/nav.gif) no-repeat;
display:block;
height:28px;
overflow: hidden;
text-indent:-5000px;
width:80px;
}
li#n-main a {
background-position:0px;
}
li#n-work a {
background-position:0pt -28px;
}
li#n-about a {
background-position:0pt -56px;
}
li#n-contact a {
background-position:0pt -84px;
}
li#n-main {
background-position:-80px 0pt;
}
li#n-work a {
background-position:-80px -28px;
}
li#n-about a {
background-position:-80px -56px;
}
li#n-contact a {
background-position:-80px -84px;
}

**all4nerds** · Sep 17, 2007 10:58

Hello

#n-main {} has less power then # nav li {}, it needs to be #nav #n-main {}

Code:

<!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" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- saved from url=(0022)http://www.domain.com/ -->
<style type="text/css">
*{padding:0;margin:0;}

#navx{
position:absolute;
top:259px;
left:830px;
width:260px;
height:110px;
background:#ffccff url(/assets/images/nav.gif) no-repeat;
}

ul{list-style:none;}

#nav li,#nav a{
background: url(http://www.google.nl/images/firefox/fox1.gif) 0 0 no-repeat;
display:block;
height:28px;
overflow:hidden;
text-indent:-5000px;
}
#nav #n-main{background-position:0 0;}
#nav #n-work {background-position:0 -28px;}
#nav #n-about{background-position:0 -56px ;}
#nav #n-contact{background-position:0 -84px;}
#n-main a{background-position:100&#37; 0;}
#n-work a{background-position:100% -28px;}
#n-about a{background-position:100% -56px;}
#n-contact a {background-position:100% -84px;}
</style>
<script type="text/javascript">

</script>
</head>
<body>

<div id="navx">
<ul id="nav">
<li id="n-main"><a href="/xxxx" title="welcome" >main</a></li>
<li id="n-work"><a href="/work/" title="work samples">work</a></li>
<li id="n-about"><a href="/about/" title="Find out more">about</a></li>
<li id="n-contact"><a href="/contact/" title="Get in touch, hire me or ask me a question">contact</a></li>
</ul>
</div>


</body>
</html>

**Dan Schulz** · Sep 17, 2007 12:58

You also can't use the "nav" ID more than once, in Strict DOCTYPES the name attribute has been deprecated in all elements other than forms and form controls, and you really don't need that DIV around your list anyway.

**colourels** · Sep 17, 2007 20:42

thanks for the fast reply! much appreciated !
I have a question.
Is it the right way to always add "ul{list-style:none;}" when using image replacement method in list?

btw, this my first time to code a site in CSS first time. So I may sound silly to you guys.

**Dan Schulz** · Sep 17, 2007 21:08

Image replacement, CSS based menus, pretty much any time you don't want the bullets to appear.

**colourels** · Sep 19, 2007 03:43

Thanks, Dan!

But the navigation run in to another problem... which is the hover state shifted and the nav.gif is repeating when viewing in IE7.
Any hacks can fix it ?

sigh .. I need to postpone the launch date of my first site. >_<

**Centauri** · Sep 19, 2007 07:42

Another problem I can see here is you are applying the nav image to the background of both the <li> and <a>, so one will cover the other. Also, in IE the negative text indent on the <li> can shift the entire <a> element off the page. Hover state? - you have no hover rules in your css ...? Got a link to the tempory site?

As for the list-style, as the bullets are generated by the <li>s, I normally apply the list style to the <li> rather than the <ul> - works either way, just i like to apply it to the element that produces it.

**colourels** · Sep 19, 2007 07:59

Thanks for the reply, Centauri!

Here's the updated CSS with the help of all4Nerds.

Code CSS:

#navx {
background:transparent url(/assets/images/nav.gif) no-repeat scroll 0&#37;;
height:110px;
left:830px;
position:absolute;
top:259px;
width:80px;
}
ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#nav li, #nav a {
background:transparent url(/assets/images/nav.gif) no-repeat scroll 0%;
display:block;
height:28px;
overflow:hidden;
text-indent:-5000px;
}
#nav #n-main {
background-position:0pt;
}
#nav #n-work {
background-position:0pt -28px;
}
#nav #n-about {
background-position:0pt -56px;
}
#nav #n-contact {
background-position:0pt -84px;
}
#n-main a {
background-position:0pt;
}
#n-work a {
background-position:0pt -28px;
}
#n-about a {
background-position:0pt -56px;
}
#n-contact a {
background-position:0pt -84px;
}
#n-main a:hover {
background-position:-81px 0pt;
}
#n-work a:hover {
background-position:-81px -28px;
}
#n-about a:hover {
background-position:-81px -56px;
}
#n-contact a:hover {
background-position:-81px -84px;
}

Should I take out the background from either one of them ?

**Centauri** · Sep 19, 2007 08:10

I would change the #nav li, #nav a css to just #nav a so that the <li>s don't have any other styles applied (so the backgrounds are on the <a>s only) and delete the first 4 background-position css rules.

**colourels** · Sep 19, 2007 08:29

Thanks for the quick response !
Do you mean I have to delete the first lines in #navx ?

**all4nerds** · Sep 19, 2007 10:55

Hello

No only use the background image on the A Tag remove the red, if possible Please upload your page so we can see what you try to do

#nav li, #nav a {
background:transparent url(/assets/images/nav.gif) no-repeat scroll 0%;
display:block;
height:28px;
overflow:hidden;
text-indent:-5000px;
}

**colourels** · Sep 20, 2007 00:38

Problem solved !
Thanks all of you good people !!!
I feel touched and encouraged.

User Tag List

Thread: Need help in fixing vertical navigation

Thread Tools

Display

Need help in fixing vertical navigation

Bookmarks

Bookmarks

Posting Permissions