[thelist] Easier code for 9 CSS background image rollovers?
Rick den Haan
rick at countryexpress.nl
Tue Oct 5 15:54:58 CDT 2004
<quote from="Mike">
o Do you think that the 9 tiny images below the text might be
misunderstood in any way by the search engines and lead to
penalties? They aren't links, just static 1px images.
</quote>
I don't think the engines will make a big fuss about it. AFAIK, if you leave
the ALT-tags blank, the engines won't see any content there (most don't read
images anyway).
<quote from="Mike">
o Can you see a way to shorten the CSS code for the 9
rollovers, maybe by using some inheritance?
</quote>
Here ya go:
#headerChoice {
float:left;
width:174px;
height:174px;
}
#headerChoice a {
float:left;
display:block;
width:58px;
height:58px;
}
#chords {
background:#fff url( ../i/sounds-chords.jpg );
}
#chords:hover {
background:#fff url( ../i/sounds-chords-over.jpg );
}
#clicks {
background:#fff url( ../i/sounds-clicks.jpg );
}
#clicks:hover {
background:#fff url( ../i/sounds-clicks-over.jpg );
}
Et cetera...
<quote from="Mike">
I think a list would be uneffective because of the line breaks - ?
</quote>
I think you might get a list to work, if you add a class to every third
item... Something along these lines:
<ul id="headerChoice">
<li><a id="chords" href="library.php?choice=Chords"> </a></li>
<li><a id="clicks" href="library.php?choice=Clicks"> </a></li>
<li class="break"><a id="nature"
href="library.php?choice=Nature"> </a></li>
<li><a id="voices" href="library.php?choice=Voices"> </a></li>
<li><a id="sounds" href="library.php?choice=Sounds"> </a></li>
<li class="break"><a id="noise"
href="library.php?choice=Noise"> </a></li>
<li><a id="drumloops"
href="library.php?choice=DrumLoops"> </a></li>
<li><a id="noiseloops"
href="library.php?choice=NoiseLoops"> </a></li>
<li class="break"><a id="soundloops"
href="library.php?choice=SoundLoops"> </a></li>
</ul>
#headerChoice {
list-style-type:none;
list-style-position:outside;
margin:0;
margin-left:-40px;
}
/* trick for stubborn list margins: */
* html body #headerchoice {
margin-left:0px;
}
/* end trick /*
#headerChoice li {
display:inline;
margin:0;
padding:0;
}
#headerChoice li a {
display:block;
width:58px;
height:58px;
}
#headerChoice li.break {
display:block;
}
Play around with the values a bit if you're seriously considering using a
list.
Enjoy :)
Rick.
More information about the thelist
mailing list