Help with Lists Not displaying backgrounds

[cfair22]

Having Problems getting the nav work. heres my code. the goal is that i have a sprite already made with the top half the default state and the bottom half with a rollover image. and i can’t get the background image to display on the page. all i see is the default unordered list and there isn’t one picture showing up. and i referenced 6 different.

not sure what im doing wrong please help.

“

• Previous
• Home
• Portfolio
• About
• Contact
• Next

“

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;
}

[cfair22]

Also having problems showing my HTML im guessing that since its coming up how it is shown on my page maybe thats not the problem. the list is exactly what i have.

[Tcooper]

Hi cfair, the problem is your CSS selectors. Your ul has an id of nav, the start of your selectors ‘#ul nav’ is trying to select a nav element inside something with the id of ‘ul’. Instead of ‘#ul nav’ you can just use ‘#nav’, as that is your ul’s id. (I think you were going for ‘ul#nav’ which would also work but is slightly less efficient than just ‘#nav’).

You have a similar problem with the li selectors – your classes are on the list item not the anchor, so when you declare styles for eg. ‘li .next’ you are looking for an element with the class ‘next’ inside the li. To select list items with a class of next you would use’ li.next’, again slightly more efficient to just use ‘.next’.

I hope this helps, Chris has some excellent articles that look a bit more in-depth at selectors, I suggest you take a look through these:

https://css-tricks.com/specifics-on-css-specificity/
https://css-tricks.com/efficiently-rendering-css/

You may also want to investigate using sprites in CSS, you are on the right track thinking you can use the same image for normal and hover states, but you could also use just one image for each nav section.

[cfair22]

Thank you so much. i changed #ul nav to #nav and it worked perfectly.

i really appreciate the quick response

[Author]

Posts