CSS-basierte Navigationsleisten

[Enzo]

Hallo Leute,

ich habe aus SELFHTML die "CSS-basierte Navigationsleisten" und hierbei die "Horizontale Navigationsleiste zentriert" genommen und diese angepasst. Jedoch scheitere ich an einem Punkt: Ich möchte, dass die Menüpunkte bündig aneinander anschließen ohne den Freiraum zwischen den einzelnen Menüpunkten. Wäre toll, wenn mir irgend jemand weiterhelfen könnte. Hier der CSS-Code:

/* ################################################ */

ul#Navigation {
    font: normal 14px Helvetica, Arial, sans-serif;
    margin: 0; padding: 0.3em;
    text-align: center;
    background-color: #B3D8C6;
  }
  ul#Navigation li {
    list-style: none;
    display: inline;
  }

ul#Navigation a, ul#Navigation span {
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    color: #000000; background-color:  #B3D8C6;
 }

* html ul#Navigation a, * html ul#Navigation span {
    width: 1em;    /* nur fuer IE 5.0x erforderlich */
    width: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
  }
  ul#Navigation a:hover {
    color:  #E5F3EC; background-color: #58B687;
  }

ul#Navigation span {
    color:  #E5F3EC; background-color: #1A8A52;
  }

/* ################################################ */

Viele Grüße

Enzo

[Felix Riesterer]

Lieber Enzo,

Dein Code-Ausschnitt ist unvollständig, wenn wir den HTML-Teil dazu nicht haben. Auf den ersten Blick könnte das in SELFHTML genannte Beispiel durchaus passen, jedoch frage ich mich welches, der mehrfach aufgeführten Code-Beispiele man Deinem CSS jetzt zugrunde legen muss.

Davon einmal abgesehen rate ich:

ul#Navigation { [...]
    margin: 0; padding: 0.3em;

Könnte das Padding für den Abstand verantwortlich sein?
Wenn nicht - dann eine fehlende Margin-/Padding-Angabe hier?

ul#Navigation li {
    list-style: none;

Oder ist dieses Padding für die Abstände verantwortlich?

ul#Navigation a, ul#Navigation span {
    padding: 0.2em 1em;

Probiere einmal aus mit diesen Werten "herumzuspielen"!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Enzo]

Hey Felix,

Danke, ich werde es einmal heute Abend testen.

Viele Grüße

Enzo

[Cheatah]

Hi,

ich habe aus SELFHTML die "CSS-basierte Navigationsleisten" und hierbei die "Horizontale Navigationsleiste zentriert" genommen und diese angepasst. Jedoch scheitere ich an einem Punkt: Ich möchte, dass die Menüpunkte bündig aneinander anschließen ohne den Freiraum zwischen den einzelnen Menüpunkten.

und das passiert in welchen Browsern?

Lass mich raten: Nur im IE. Da Du diesen Einzelfall verallgemeinerst, unterstelle ich, dass Du den schwerwiegendst denkbaren Fehler in der Webentwicklung begehst, nämlich primär mit dem IE zu testen. Verwende dafür Firefox oder Mozilla.

Wäre toll, wenn mir irgend jemand weiterhelfen könnte. Hier der CSS-Code:

... tut dann leider nichts zur Sache, weil die Ursache für den IE im HTML-Code liegt: Der IE ist nicht in der Lage, die Whitespaces zwischen den Listenpunkten richtig zu behandeln. Entferne sie.

font: normal 14px Helvetica, Arial, sans-serif;

px ist als Einheit für schriftabhängige Größen ungeeignet. Verwende em oder %.

* html ul#Navigation a, * html ul#Navigation span {
    width: 1em;    /* nur fuer IE 5.0x erforderlich */
    width: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
  }

Dass Du den Wert damit auch für den IE 5.0x zurück gesetzt hast, ist Dir aber sicher bewusst.

Cheatah

[Enzo]

Hey Cheatah,

das passiert auch mit dem Firefox.

Viele Grüße

Enzo