M
Maik
Wie oft soll ich noch darauf hinweisen, daß für die Links eine ID nicht erforderlich ist?
Außerdem werden die Selektoren und CSS-Formatierungen innerhalb eines einzigen style-Elements notiert.
Wenn du jedem Link eine ID zuweisen willst, dann lautet der CSS-Code folgendermaßen:
Außerdem werden die Selektoren und CSS-Formatierungen innerhalb eines einzigen style-Elements notiert.
HTML:
<style type="text/css">
<!--
a:link, a:visited {
display: block;
float: left;
margin: .5em;
width: 100px;
height: 80px;
border: solid 1px blue;
}
a:hover {
background-position: -100px 0;
}
.bild1 { background: url(http://www.maexxdesign.de/Bilder/Actors/Paquin/1a.jpg) 0 0 no-repeat; }
.bild2 { background: url(http://www.maexxdesign.de/Bilder/Actors/Paquin/2a.jpg) 0 0 no-repeat; }
/* Hier folgen alle weiteren Klassen .bild3, .bild4, .bild5, .bild6, usw. */
-->
</style>
HTML:
<body>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/1.jpg" class="bild1" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/2.jpg" class="bild2" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/3.jpg" class="bild3" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/4.jpg" class="bild4" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/5.jpg" class="bild5" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/6.jpg" class="bild6" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/7.jpg" class="bild7" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/8.jpg" class="bild8" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/9.jpg" class="bild9" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/10.jpg" class="bild10" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/11.jpg" class="bild11" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/12.jpg" class="bild12" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/13.jpg" class="bild13" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/14.jpg" class="bild14" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/15.jpg" class="bild15" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/16.jpg" class="bild16" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/17.jpg" class="bild17" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/18.jpg" class="bild18" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/19.jpg" class="bild19" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/20.jpg" class="bild20" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/21.jpg" class="bild21" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/22.jpg" class="bild22" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/23.jpg" class="bild23" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/24.jpg" class="bild24" align="center"></a>
</body>
HTML:
<style type="text/css">
<!--
a#thumb1:link, a#thumb1:visited, a#thumb2:link, a#thumb2:visited, a#thumb3:link, a#thumb3:visited {
display: block;
float: left;
margin: .5em;
width: 100px;
height: 80px;
border: solid 1px blue;
}
a#thumb1:hover, a#thumb2:hover, a#thumb3:hover {
background-position: -100px 0;
}
.bild1 { background: url(http://www.maexxdesign.de/Bilder/Actors/Paquin/1a.jpg) 0 0 no-repeat; }
.bild2 { background: url(http://www.maexxdesign.de/Bilder/Actors/Paquin/2a.jpg) 0 0 no-repeat; }
/* Hier folgen alle weiteren Klassen .bild3, .bild4, .bild5, .bild6, usw. */
-->
</style>
HTML:
<body>
<a id="thumb1" href="http://www.maexxdesign.de/Bilder/Actors/Paquin/1.jpg" class="bild1" align="center"></a>
<a id="thumb2" href="http://www.maexxdesign.de/Bilder/Actors/Paquin/2.jpg" class="bild2" align="center"></a>
<a id="thumb3" href="http://www.maexxdesign.de/Bilder/Actors/Paquin/3.jpg" class="bild3" align="center"></a>
<!-- usw. -->
</body>
