PDA

View Full Version : List not displaying background for nav links


cfair22
01-27-2011, 05:34 PM
Having Problems getting the nav work. heres my code. the goal is that i have a image already made with the top half the default state. and the bottom half with a rollover image. now i know i haven't finished to display the rollover but im getting just the UL list with links displayed on my page. there isn't one picture showing up. and i referenced 6 different.

not sure what im doing wrong please help.

<div id="pagewrap">

<ul id="nav">
<li class="previous"><a href="#">Previous</a></li>
<li class="home"><a href="#">Home</a></li>
<li class="portfolio"><a href="#">Portfolio</a></li>
<li class="about"><a href="#">About</a></li>
<li class="contact"><a href="#">Contact</a></li>
<li class="next"><a href="#">Next</a></li>

</ul> <!-- end nav -->

and the css stylesheet thats attached to html


#pagewrap{
width:800px;
margin:0 auto;
}
#ul nav {

}
#ul nav li {
display:inline;
}
#ul nav li a {
display:block;
height:35px;
text-indent:9999px;
float:right;
}
#ul nav li.previous a {
width:84px;
background: url(images/navi-previous.png) top center no-repeat ;
}
#ul nav li .home a {
width:84px;
background: url(images/navi-home.png) top center no-repeat;
}
#ul nav li .portfolio a {
width:84px;
background: url(images/navi-portfolio.png) top center no-repeat;
}
#ul nav li .about a {
width:84px;
background: url(images/navi-about.png) top center no-repeat;
}
#ul nav li .contact a {
width:84px;
background: url(images/navi-contact.png) top center no-repeat;
}
#ul nav li .next a {
width:84px;
background: url(images/navi-next.png) top center no-repeat;
}
#ul nav li a:hover {
background-position: bottom center no-repeat;
}

gentleone
01-27-2011, 07:32 PM
Are you sure your paths are okay?
url(images/navi-previous.png)
Where do you have your stylesheet? Is it in a folder called css or something?

Ricky55
01-27-2011, 08:28 PM
Your styles are not written correctly.

Your UL have as an ID of nav and the li's have classes. Your CSS selectors should look like

#nav li.next a {
/*some style*/
}

gentleone
01-27-2011, 08:36 PM
Your styles are not written correctly.

Your UL have as an ID of nav and the li's have classes. Your CSS selectors should look like

#nav li.next a {
/*some style*/
}
Aha, right... totally missed that one. Good catch, Richard!

cfair22
01-27-2011, 11:42 PM
thanks alot guys i appreciate it alot :)