Image rollover, multiple images, hor nav bar [Archive]

Slugger

07-14-2010, 05:46 AM

Howdy, all. I'm a total newbie, both to this site (though I've been scouring the archives for awhile) and to CSS/XHTML. I've come across a problem that I have spent HOURS trying to figure out, and I *think* I may have only just figured out why it isn't working, but I have no clue as to an elegant solution.

Here's what I'm trying to do:
I want a horizontal nav bar. I want to style it as a list because, well, you are supposed to, right? I want image rollovers. So far, so good. I can find about eleventy bajillion helpful sites (though NONE as thorough as this one!) to help me do that. However, whenever I tried it on my site, no dice.

As I said, I think I've figured out why what I'm doing isn't working. I want to use different images for every link.

Here's my HTML:

<div id="tabs">
<ul>
<li><a id="home" href="home.html" title="Home"><span>Home</span></a></li>
<li id="current"><a id="about" href="about.html" title="About"><span>About</span></a></li>
<li><a id="musings" href="musings.html" title="Musings"><span>Musings</span></a></li>
<li><a id="excerpts" href="excerpts.html" title="Excerpts"><span>Excerpts</span></a></li>
<li><a id="gallery" href="gallery.html" title="Gallery"><span>Gallery</span></a></li>
<li><a id="contact" href="contact.html" title="Contact"><span>Contact</span></a></li>
</ul>
</div>

I don't have CSS code because I've ripped it all apart so thoroughly and I'm too frustrated to try to recreate even a semblance of what it should be. But, going on what you see up there, this is what I want to do:
I have six image files. Each one is 100px wide by 300px high. Within each of those files, I have three images, each one taking up 100px by 100px of space. The top one is the <a> state, the second at -100px is the hover state, the third at -200px is the active state. An example:
http://dl.dropbox.com/u/3718483/home_icon.png
As I said, I have six of these, one each for every tab on the nav bar.

It seems like I can either use the sliding doors to change images or I can have a hor nav bar. Note that there will be no visible text (the text is part of the image), and no CSS changes to the images except for changing position. Right now, I see my only available solutions as:
1) use one 100px by 100px image for each link's background image, then use CSS to make it large and perhaps have text appear over it (as shown in the 2nd and 3rd parts of the home_icon image). Not ideal, but I think can do it.

2) make this a vertical nav bar. I *think* I can make that work. Again, not ideal, won't make me very happy, but I'm early enough in the design that I'll live.

3) Stop trying to do cool stuff with web design and get myself back to the 90s where I obviously belong. Perhaps I should just put it all in a table? ;)

As far as I can see, the problem lies in the conflicting display settings. To make a list horizontal, you have to display:inline. To make individual <a> tags rollover images using sliding doors, you have to display:block. What I've been trying to do is make the <a> tag a block within an inline <li>.

Please help. I'm beyond the point of being able to make any sense out of this anymore. Thank you!!

Slugger

07-14-2010, 10:27 AM

Well, turns out that venting here and completely giving up was exactly what I needed. For some reason, it hadn't occurred to me to, oh, say, USE the ids I set up. :rolleyes: (is there a *smacks head* smilie here? ;))

If anyone cares, here's my code. Hope it helps someone else out!

HTML:

<body>

<div id="tabs">

<ul>
<li><a href="index.html" class="home"></a></li>
<li><a href="about.html" class="about"></a></li>
<li><a href="musings.html" class="musings"></a></li>
<li><a href="excerpts.html" class="excerpts"></a></li>
<li><a href="gallery" class="gallery"></a></li>
<li><a href="contacts.html" class="contacts"></a></li>
</ul>

</div>
</body>

CSS:

#tabs {
background-color: none;
border-bottom: none /* Sets the bottom border properties for an element using shorthand notation */
height: 101px;
padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}

#tabs {
width: 520px;
height: 101px;
}

#tabs ul {
padding: 0px;
position:absolute;
}

#tabs li {
float:left;
}

#tabs li a.home {
background: url(tabs/home_icon.png) no-repeat 0 0 transparent;
height: 101px;
width: 100px;
padding: 0px;
border: 0px;
margin: 0px;
position:absolute;
left: 0px;
top: auto;
tag: div;

}

#tabs li a.about {
background: url(tabs/about_icon.png) no-repeat 0 0 transparent;
height: 101px;
width: 100px;
padding: 0px;
border: 0px;
margin: 0px;
left: 102px;
position:absolute;
top: auto;
tag: div;
}

#tabs li a.musings {
background: url(tabs/musings_icon.png) no-repeat 0 0 transparent;
height: 101px;
width: 122px;
padding: 0px;
border: 0px;
margin: 0px;
left: 204px;
position:absolute;
top: auto;
tag: div;
}

#tabs li a.excerpts {
background: url(tabs/excerpts_icon.png) no-repeat 0 0 transparent;
height: 101px;
width: 129px;
padding: 0px;
border: 0px;
margin: 0px;
left: 306px;
position:absolute;
top: auto;
tag: div;
}

#tabs li a.gallery {
background: url(tabs/gallery_icon.png) no-repeat 0 0 transparent;
height: 101px;
width: 165px;
padding: 0px;
border: 0px;
margin: 0px;
left: 408px;
position:absolute;
top: auto;
tag: div;
}

#tabs li a.contacts {
background: url(tabs/contacts_icon.png) no-repeat 0 0 transparent;
height: 101px;
width: 136px;
padding: 0px;
border: 0px;
margin: 0px;
left: 510px;
position:absolute;
top: auto;
tag: div;
}

#tabs a.home:hover {
background-position: 0 -100px;
}

#tabs a.about:hover {
background-position: 0 -100px;
}

#tabs a.musings:hover {
background-position: 0 -100px;
}

#tabs a.excerpts:hover {
background-position: 0 -100px;
}

#tabs a.gallery:hover {
background-position: 0 -100px;
}

#tabs a.contacts:hover {
background-position: 0 -100px;
}

#tabs a.home:active {
background-position: 0 -200px;
}

#tabs a.about:active {
background-position: 0 -200px;
}

#tabs a.musings:active {
background-position: 0 -200px;
}

#tabs a.excerpts:active {
background-position: 0 -200px;
}

#tabs a.gallery:active {
background-position: 0 -200px;
}

#tabs a.contacts:active {
background-position: 0 -200px;
}

Now, I have all my fingers crossed that it plays nicely with the rest of my site!