Balken-Breite

[htmlvisitor]

Hallo

Untenstehender Code ergibt ein horizonales Menu.
Ich möchte wissen, wie ich das Element HorMenu1Empty in seiner Breite festlegen kann: Problem bei dieser fixen Breite (181px) ist auf dem Apple, dass leider der bold-font mehr Platz in der Breite einnimmt als auf dem PC, so dass die a-Tag Elemente breiter werden. Also ist dann die fixe Breite des HorMenu1Empty zu breit. Mit % geht das auch nicht wirklich.

Besten Dank für einen Tipp.

Patrick

Code:

<div id="HorMenu1">
 <ul>
  <li id="aktuell"><a href="/1/Default.aspx">1</a></li>
  <li><a href="/2/Default.aspx">2</a></li>
  <li><a href="/3/Default.aspx">3</a></li>
  <li><a href="/4/Default.aspx">4</a></li>
  <li><a href="/5/Default.aspx">5</a></li>
  <li class="HorMenu1Empty"></li>
 </ul>
</div>

CSS:

#HorMenu1
{
width: 100%;
font-family: Verdana;
font-size: 11px;
font-weight:bold;
}
#HorMenu1 ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#HorMenu1 li
{
float: left;
margin-right: 4px;
}
#HorMenu1 a
{
display: block;
float:left;
height: 17px;
font-size:11px;
background-color: #ffffff;
padding-left: 12px;
padding-right: 12px;
padding-top: 4px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: 0px;
text-decoration: none;
border: 1px solid #EBEBEB;
}
.HorMenu1Empty
{
display: inline;
float:left;
height: 17px;
width:181px;
font-size:11px;
background-color: #ffffff;
padding-left: 12px;
padding-right: 12px;
padding-top: 4px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
text-decoration: none;
border: 1px solid #EBEBEB;
}

 

[_Thor_]

Als erstes, das <div> um die Liste brauchst du nich. Die Eigenschaften kannst du auch gleich der Liste geben.

Dann fehlen bei deinen Werten für den border die Leerzeichen zwischen den Werten

border: 1px solid #ebebeb;

Und ich hab noch nicht ganz verstanden, wo das Problem ist, wenn die Schrift in den Listenelementen etwas weniger Platz einnimmt.

 

[prm]

Ich weiß nicht, wie du auf die 181px kommst. Die hängen wohl von der Gesamtbreite eines übergeordneten Elements ab. Wenn dir diese bekannt ist,
dann kannst du unter Berücksichtigung von margin- und padding-werten für a eine Breite bestimmen und hinterlegen. Aus der Summe ergibt sich dann der Restwert fü deine Klasse.
Wenn du die padding-Werte bei a weg lässt und dafür "text-align: center;" verwendest, ist das ganze unabhängig von der Schrift, so dass du für deine li-Klasse auch eine fixe Breite verwenden kannst.

Hier nur mal als Beispiel, wobei du den Breitenwert noch anpassen/berechnen musst:

#HorMenu1 a
{
float:left; 
height: 17px;
line-height: 17px;
width: 30px;
text-align: center;
font-size:11px;
background-color: #ffffff;
text-decoration: none;
border: 1px solid #EBEBEB; 
}

Im Übrigen: Da fehlen auch sonst noch eine Menge Leerzeichen, auch bei den ID's.

 

[htmlvisitor]

Ergänzung

Hallo und danke für die Inputs

In meinem Beispiel ergeben sich die Breiten der einzelnen Menu-Elemente durch die Breite des bold-Textes plus den padding-Werten.
Das übergeordnete div hat jedoch eine fixe Breite. Wenn nun der Apple-Computer die bold-Schrift breiter anzeigt als der Win-PC, so werden Menuelemente mit dieser variablen Breite "breiter" angezeigt. In meinem Fall ist dann die Breite des "Füllbalkens" am Schluss von 181px zu breit und er springt auf die nächste Zeile, so dass das Layout zerstört ist.

Die Frage ist schlussendlich unabhängig vom Menu:
Beispiel: div ohne Breitenangabe mit einer Zeile bold-Text darin. Wie erreiche ich es, dass das textumfassende div auf dem PC und auf dem Apple gleich breit ist?
Geht das überhaupt ohne fixe Breitenangabe, denn ich müsste ja quasi die Breite der bold-Schrift auf dem Apple kontrollieren können.

Danke für einen Tipp.

Patrick

 

[nichtsgeht]

Das wirst du wohl nicht immer ausschließen können. Da nicht alle die Schriftart Verdana auf den Rechner haben, werden diese auch nicht auf den Genuß eines unzerstörsten Layouts kommen.

font-family: Verdana;

Mein Tip, rechne immer mit einem Sicherheitsabstand, so das es zur Layout-Zerstörung gar nicht erst kommt.