Horizontales Menü links- u. rechtsbündig?

[Goran]

Hallo Leute,

kann mir einer helfen ein CSS basiertes Menü zu erstellen welches links und rechts keine Abstände aufweist?

In etwa soll es so aussehen:
+------+------------+------------+---------------+
|Home  |  Eintrag1  |  Eintrag2  |  LetzerEintrag|
+------+------------+------------+---------------+

Ich habe es bisher mit

<ul id="navigation">
  <li></li>
  <li></li>
  ...
</ul>

#navigation ul {

display: table-row;
}

#navigation li {

display: table-cell;
}

und 'zig Einstellungen wal align und margin bzw. padding angeht probiert aber ich bekomme es nicht hin.

Im Netz gibt es beliebig viele Beispiele für horizontale Menüs. Nur kein einziges ohne Anfangs- und Endabstand.

Für jeden Tipp dankbar.

Goran

[Christian Wansart]

Du setzt einfach mit text-align in den jeweiligen li-Tags die Ausrichtung. Ich habe dafür den li-Tags Klassen zugewiesen.

[latex]\textbf{HTML-Code:}[/latex]

<ul id="navigation">  
  <li class="left">  
    Home  
  </li>  
  <li class="center">  
    Eintrag1  
  </li>  
  <li class="center">  
    Eintrag2  
  </li>  
  <li class="right">  
    LetzterEintrag  
  </li>  
</ul>

[latex]\textbf{CSS-Code:}[/latex]

#navigation ul  
{  
  display: table-row;  
}  
  
#navigation li  
{  
  display: table-cell;  
}  
  
.left  
{  
  text-align:center;  
}  
  
.center  
{  
  text-align:center;  
}  
  
.right  
{  
  text-align:right;  
}

[Cheatah]

Hi,

<li class="left">
  <li class="center">
  <li class="right">

das ist ziemlich genau das Schlechteste, was man machen kann - besonders die Bezeichner betreffend.

Cheatah

[Christian Wansart]

das ist ziemlich genau das Schlechteste, was man machen kann - besonders die Bezeichner betreffend.

Stimmt an sich auch wieder. Man kann ja aber auch andere verwenden.
Deine Methode mit first-child und last-child finde ich aber noch besser.

Chris

[Cheatah]

Hi,

kann mir einer helfen ein CSS basiertes Menü zu erstellen welches links und rechts keine Abstände aufweist?

formatiere einfach :first-child und :last-child so, dass sie nicht die Abstände besitzen, die für alle anderen Items gelten.

Cheatah

[Goran]

Hallo Leute,

--snip--

formatiere einfach :first-child und :last-child so, dass sie nicht die Abstände besitzen, die für alle anderen Items gelten.

Cheatah

»»

Ich ahnte schon das dieser Vorschlag kommt! :)

Wenn ich das tue entsteht leider folgendes:

|Home    |  Eintrag1  |  Eintrag2  |    Ende|

Du siehst das die Abstände nicht gleich sind. Zwischen Home und Eintrag1 ensteht ein 1.5 facher Abstand währen zwischen Eintrag1 und Eintrag2 ein 1 facher Abstand ex.

Aber ich hab's gelöst!

#navigation {

width: 750px;
    margin: auto;
    padding: 0;

font-family: sans-serif;
    font-size: 8pt;
    font-style: bold;
}

#navigation a {

color: #555555;
    text-decoration: none;
}

#navigation a:hover {

text-decoration: underline;
}

#navigation a.clicked {

color: #8e13ce;
}

#navigation ul {

display: table;

width: 100%;
    margin: 5px 0 5px 0;
    padding: 0;
}

#navigation ul li {

display: table-cell;

padding: 0;

text-align: center;
}

#navigation ul li.first {

text-align: left;
}

#navigation ul li.last {

text-align: right;
}

Verbesserungen sind natürlich willkommen!

Goran