Listenausrichtung (Liste als Navigation)
Wullschi
- css
0 MudGuard
Hallo
Ich möchte eine Liste als Navigation verwenden. Sie ist aber zu kurz um die ganze Zelle auszufüllen (rechts ist noch Platz frei). Wisst ihr wie ich die Liste "dehnen" kann damit sie sich über die gesamte Zelle erstreckt? Wenn nicht, lässt sie sich zumindest zentrieren, damit links und rechts der gleiche Platz frei ist?
Link zur Page:
http://mypage.bluewin.ch/wolke-sieben/homepage/index32.html
hier der HTML-Code:
<td id="seite" height="33" width="600" colspan="3"><div align="center">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current"><font class="text5" id="text5">Aquarell-Art</font>
</a></li>
<li><a href="#"><font class="text5" id ="text5">News</font></a></li>
<li><a href="#"><font class="text5" id ="text5">Bilder</font></a></li>
<li><a href="#"><font class="text5" id ="text5">Grusskarten</font></a></li>
<li><a href="#"><font class="text5" id ="text5">Die Künstlerin</font></a></li>
<li><a href="#"><font class="text5" id ="text5">Kontak</font></a></li>
<li><a href="#"><font class="text5" id ="text5">Impressum</font></a></li>
<li><a href="#"><font class="text5" id ="text5">Partner</font></a></li>
</ul>
</div>
</td>
und hier der CSS-Code:
#navcontainer { /* none needed */ }
ul#navlist
{
margin: 0;
padding: 0;
list-style-type: none;
white-space: nowrap
}
ul#navlist li
{
float: left;
font-family: verdana, arial, sans-serif;
font-size: 9px;
font-weight: bold;
margin: 0;
padding: 5px 0 4px 0;
background-color:#FAC4C2;
border-top: 1px solid #FBB1B0;
border-bottom: 1px solid #FBB1B0;
display: block;
}
#navlist a, #navlist a:link
{
margin: 0;
padding: 5px 9px 4px 9px;
color: #000000;
border-right: 1px dashed #FBB1B0;
text-decoration: none;
}
ul#navlist li#active
{
color: #000000;
background-color: #FC4A46;
}
#navlist a:hover
{
color: #000000;
background-color: #FC4A46;
}
Hi,
hier der HTML-Code:
<td id="seite" height="33" width="600" colspan="3"><div align="center">
Wozu das div? Was bringt das? td kennt align="center" auch schon.
Und wie kommt es, daß Du die Navigation in einer Tabellenzelle unterbringst?
<div id="navcontainer">
Welchem Zweck dient das div? Was treibst Du mit dem div, das Du nicht direkt mit der ul machen kannst?
<ul id="navlist">
<li id="active"><a href="#" id="current"><font class="text5" id="text5">Aquarell-Art</font>
</a></li>
font? Warum formatierst Du nicht direkt a?
<li><a href="#"><font class="text5" id ="text5">News</font></a></li>
Die id text5 kannst Du hier nicht verwenden, denn die hast Du vorher schon verwendet für das font-Element. ID-Werte MÜSSEN eindeutig sein.
Bei den anderen Links gilt das gleiche.
Dein ul#navlist li hat zwar float gesetzt, aber keine Breite - unzulässig.
cu,
Andreas
Hi,
<div id="navcontainer">
Welchem Zweck dient das div? Was treibst Du mit dem div, das Du nicht direkt mit der ul machen kannst?
in diesem Falle gar keinem, wie aus #navcontainer { /* none needed */ } hervorgeht. Es handelt sich einfach um das Standardgerüst für die Listamatic-Navigationslisten, wovon hier ein Layout leider ohne es zu verstehen kopiert und (äußerst unpassend) erweitert wurde.
freundliche Grüße
Ingo