Das ist keine gute Idee, weil es semantisch unsinnig ist.
Hallo Matthias,
das ist einzusehen :-) Ich habe mir an an der Liste aber in folgender Form die Zähne an den Button-Breiten ausgebissen (und hatte es deshalb mit den DIVs probiert):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
.......
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a id="link1" href="#"> </a></li>
<li><a id="link2" href="#"> </a></li>
<li><a id="link3" href="#"> </a></li>
<li><a id="link4" href="#"> </a></li>
<li><a id="link5" href="#"> </a></li>
</ul>
</div>
</body>
</html>
#navlist{
list-style: none;
padding: 0;
margin: 0 auto;
width: 80%;
}
#navlist li{
display: block;
float: left;
width:10%;
margin: 0;
padding: 0;
}
#navlist li a{
display: block;
width: 100%;
padding: 0px;
text-decoration: none;
}
#link1{
width:80px;
height:15px;
background:url(../img/buttons/bild1.png) no-repeat;
}
#link1:hover, #link1:active{
background:url(../img/buttons/bild2.png) no-repeat;
}
#link2{
width:35px;
height:15px;
background:url(../img/buttons/bild3.png) no-repeat;
}
#link2:hover, #link2:active{
background:url(../img/buttons/bild4.png) no-repeat;
}
etc.
Die Buttons werden schön nebeneinander angezeigt horizontal. Aber: Ich möchte so gern, dass sich die Breite der Links automatisch an die Hintergrund-Bildbreite anpasst^^. Ich gebe ja den Links jeweils ihr zugehöriges Bild, auch bei hover per Hintergrundbild (und es ist klar, dass das Hintergrundbild die Breite nicht beeinflusst, weil es nicht als Inhalt gilt. Aber ich gebe ja den #links jeweils eine feste Breite, nämlich die des jeweiligen Bildes! ) So wie es da steht, gibt es unregelmäßige Abstände zwischen den Buttons, weil sie unterschiedlich Breit sind, WEIL die Listenelemente alle width:10% haben. Nehme ich das aber raus, sind alle Buttons nur noch kleine Striche :-( Warum nur?