By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,864 Members | 1,293 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,864 IT Pros & Developers. It's quick & easy.

Horizontal List with different images

P: n/a
I want to have a list that is horizontal and each <li> has different
images. I also want them to change on hover. I want the words to be
below the images as well. Anyone of you styles gurus have any words
of wisdom? Please! :-)

Here is what I have so far.

<!--styles-->
ul#mainNav{
font: bold 80% Verdana;
display : block;
}

ul#mainNav li {
float:left;
width: 15%;
height : 50px;
background-repeat : no-repeat;
background-position : top;
vertical-align: baseline;
}

ul#mainNav a {
color: #cccccc;
text-decoration : underline;
}

ul#mainNav li.aboutUs {
background-image: url(../images/aboutUs_Off.gif);
}

ul#mainNav li.contactUs{
background-image: url(../images/contactUs_Off.gif);
}

ul#mainNav li.home{
background-image: url(../images/home_Off.gif);
}

ul#mainNav li.photos{
background-image: url(../images/photo_Off.gif);
}

ul#mainNav li.shows{
background-image: url(../images/shows_Off.gif);
}

ul#mainNav li a:hover{
color: #990000;
text-decoration : underline;
}

ul#mainNav li .aboutUs a:hover{
background-image: url(../images/aboutUs_Hov.gif);
}

ul#mainNav li .contactUs a:hover{
background-image: url(../images/contactUs_Hov.gif);
}

ul#mainNav li .home a:hover{
background-image: url(../images/home_Hov.gif);
}

ul#mainNav li .photos a:hover{
background-image: url(../images/photo_Hov.gif);
}

ul#mainNav li .shows a:hover{
background-image: url(../images/shows_Hov.gif);
}

<!--html seg -->

<ul id="mainNav">
<li class="home"><a href="#">Home</a></li>
<li class="shows"><a href="#">Shows</a></li>
<li class="photos"><a href="#">Photos</a></li>
<li class="aboutUs"><a href="#">About Us</a></li>
<li class="contactUs"><a href="#">Contact Us</a></li>
</ul>
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
RugbyTravis wrote:
I want to have a list that is horizontal and each <li> has different
images. I also want them to change on hover.
You'd have to use either javascript, or make the images background. I'd
recommend javascript for swapping images.

http://www.quirksmode.org/js/mouseov.html
I want the words to be below the images as well.
Make the images block level. Float each <li> left. This will fail in
MSIE/Mac unless you declare a width. But assigning a width for text can
be dicey.

Here is what I have so far.

ul#mainNav{ font: bold 80% Verdana;
Have you read the group before posting?
<li class="home"><a href="#">Home</a></li>


What is the point of this link? It does nothing useful, and may confuse
the visitor.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.