Listenproblem

[Chrischaaan]

hallo

ich hab mir nun ein mouseover menü gebastelt mit css.
jetzt hab ich überall, für alle ehem. buttons diese unordered lists genommen.
sie bekommen alle ihre "ausseh-informationen" vom gleichen stylesheet und haben alle den gleichen quellcode.
nur die anzahl der "buttons" unterscheidet sich manchmal.

obwohl alle buttons gleich sind, sind sie trotzdem unterschiedlich breit.

guckst du da: chrischaaan.de.vu
da seht ihr das menü.
alles gleich breit. ist ja auch nicht verkehrt. solange bis das wort nicht mehr reinpasst.
wie mach ich die dinger breiter damit alle buttons gleich breit sind und auch längere wörter reinpassen?

der quellcode für das aussehen der listings:

ul#Navigation
{
 width:             125px;
 margin:            0;
 padding:           0.8em;
}

* html ul#Navigation
{  /* Korrekturen fuer IE 5.x */
 width:             11.6em;
 w\idth:            10em;
 padding-left:      0;
 padd\ing-left:     0.8em;
}

ul#Navigation li
{
 list-style:        none;
 margin:            0.4em;
 padding:           0;
}

ul#Navigation a
{
 display:           block;
 padding:           0.2em;
 text-align:        center;
 text-decoration:   none;
 border:            1px solid #808080;
 background-color:  #2F2F2F;
 color:             #808080;
}

* html ul#Navigation a
{  /* Breitenangaben nur fuer IE */
 width:              100%;
 w\idth:             8.8em;
}

ul#Navigation a:hover
{
 border-color:       #2F2F2F;
 color:              #2F2F2F;
 background-color:   #808080;
}

der quellcode für die listings:

<ul id="Navigation">
  <li><a href="datei.html">Name</a></li>
</ul>

wie mach ich die dinger also breiter?

bye,Christian.

[Orlando]

Hallo Chrischaaan,

wie mach ich die dinger breiter damit alle buttons gleich breit sind und auch längere wörter reinpassen?

Indem du einen größeren Wert für width notierst.

ul#Navigation
{
width:             125px;
}

* html ul#Navigation
{  /* Korrekturen fuer IE 5.x */
width:             11.6em;
w\idth:            10em;
}

* html ul#Navigation a
{  /* Breitenangaben nur fuer IE */
width:              100%;
w\idth:             8.8em;
}

wie mach ich die dinger also breiter?

width, auch Breite genannt.

Grüße
 Roland

[Christian Helbig]

danke...den wert unten wo 8.8 drin steht hatte ich wohl irgendwie übersehen...was hat es mit den "em" auf sich?

[Orlando]

Hallo Christian,

was hat es mit den "em" auf sich?

Siehe SELFHTML/CSS: Numerische Angaben

Grüße
 Roland

[Ingo Turski]

Hi,

guckst du da: chrischaaan.de.vu

Du meinst [bekannt](http://chrischaaan.trekkie.org/menue.html}!

der quellcode für das aussehen der listings:
[...}

Ohje. Das kommt mir aber sehr [link:http://de.selfhtml.org/css/layouts/anzeige/nav_rollover.htm) vor. ;-)

Leider hast Du hier nur den Quelltext kopiert ohne zu wissen, was dieser bewirkt.
Insbesondere hast Du nicht verstanden, daß hier Korrekturen fpr die fehlerhafte Umsetzung des CSS durch den IE6 vorhanden sind. Und weil Deine Seite keinen vorgeschriebenen Doctype enthält, stimmen die Breitenangaben im IE natürlich nicht mehr bzw. in standardkonformen Browsern ist die Breite wesentlich geringer als im IE6.

Bitte bedenke auch, daß in diesem Beispiel CSS-Hacks verwendet werden und daher eine Eigenschaft mehrmals (verschieden) definiert wird. Beispiel:
ul#Navigation
{
 width:             125px;
}
Das ist für alle Browser.

* html ul#Navigation
{  /* Korrekturen fuer IE 5.x */
 width:             11.6em;
wie der Kommentar schon sagt ist das für 5er-IEs.

w\idth:            10em;
und dies sollte dann (ursprünglich) für den IE6 die Angabe wieder auf den Ursrungswert zurück setzen. Du hast jedoch als "Standard"-Wert 125px angegeben und Dich um diese zusätzlichen Angaben überhaupt nicht gekümmert.
125px sind nun ziemlich unpassend, weil Benutzer moderner Browser die Schriftgröße ändern können. Eine Angabe der Breite in em berücksichtigt jedoch den Schriftgrad, weshalb das auch so im SELFHTML-Beispiel notiert ist.

Fazit:

• moderne Browser bekommen die u.U. unpassende Breite von 125px
• IE 5.x bekommt eine andere Breite von 11.6em
• IE 6 bekommt eine (für das SELFHTML-Beispiel und den standardkompatiblen Modis passende) andere Breite von 11.6em.
  Aber bestimmt nicht das, was Du Dir vorgestellt hast.

freundliche Grüße
Ingo

[Ashura]

Hallo Ingo.

Du meinst [The End of an Era...](http://chrischaaan.trekkie.org/menue.html}!

[...}

Hm... Falsches Tastaturlayout erwischt?

Einen schönen Freitag noch.

Gruß, Ashura