<ul>-Aufzählung als Menü soll zentriert erscheinen

[Colin Finck]

Hallo!
Ich verwende eine Aufzählung (<ul>) als Menü. Diese habe ich mit folgenden CSS-Angaben gestylt, damit die Menüpunkte nacheinander von links nach rechts erscheinen:

#menu ul {margin: 0; padding: 0; list-style: none;}
#menu li {float: left;}
#menu li a {display: block; float: left;}

Auf der HTML-Seite verwende ich dann zum Einbinden ein <div>-Element:

<div id="menu">
  <ul>
    <li><a href="test.htm">Test</a></li>
    <li><a href="test2.htm">Noch ein Test</a></li>
  </ul>
</div>

Allerdings erscheinen die Menüpunkte jetzt immer ganz links. Ich hätte sie jedoch gerne in der Mitte zentriert.
Ich habe es bereits mit "text-align: center" ausprobiert, das hat aber nicht funktioniert.

Habt ihr eine Idee?

Vielen Dank im Voraus,

Colin Finck

[nag (unreg)]

Hallo

Habt ihr eine Idee?

wenn du mit einer festen Breite arbeiten kannst, dann:
#menu ul {width:300px; margin:0 auto;}
#menu {text-align:center;} /* für IE */

wenn nicht, dann:

• würde ich Verzicht üben:
  a) auf die Liste
     --> <p><a href="#">link1</a> &#124; <a href="#">link2</a></p>
  b) auf die Zentrierung

gruß
nag

[Gunnar Bittersmann]

Hello out there!

wenn du mit einer festen Breite arbeiten kannst,

Keine gute Idee.

wenn nicht, dann:

• würde ich Verzicht üben:
  a) auf die Liste
     --> <p><a href="#">link1</a> &#124; <a href="#">link2</a></p>

Warum? Dasselbe Verhalten kann eine Liste auch zeigen:
ul statt p, li mit der Eigenschaft display: inline.

b) auf die Zentrierung

Warum? Es geht doch a) und b) ;-)

See ya up the road,
Gunnar

PS: Warum verwendest du für '|' eine numerische Zeichenreferenz?

[Gunnar Bittersmann]

Hello out there!

<div id="menu">
  <ul>
    <li><a href="test.htm">Test</a></li>
    <li><a href="test2.htm">Noch ein Test</a></li>
  </ul>
</div>

Wozu soll das umschließende div gut sein? Weg damit und gib dem ul-Element eine ID.

Ich habe es bereits mit "text-align: center" ausprobiert, das hat aber nicht funktioniert.

Das wirkt ja auch nur auf Inline-Inhalt. Warum sollten die li nicht solcher sein?

See ya up the road,
Gunnar

[Colin Finck]

Ich hab das ganze jetzt folgendermaßen geändert:

#menu ul {margin: 0; padding: 0; list-style: none; text-align: center;}
#menu li {float: left;}
#menu li a {display: inline; float: left;}

<ul id="menu">
  <li><a href="test.htm">Test</a></li>
  <li><a href="test2.htm">Noch ein Test</a></li>
</ul>

Trotzdem funktioniert es noch nicht. Habt ihr noch eine Idee?

Beste Grüße,

Colin Finck

[Gunnar Bittersmann]

Hello out there!

<ul id="menu">
  <li><a href="test.htm">Test</a></li>
  <li><a href="test2.htm">Noch ein Test</a></li>
</ul>

Sieht schonmal besser aus. ;-)

Trotzdem funktioniert es noch nicht. Habt ihr noch eine Idee?

Immer noch dieselbe:

Warum sollten die li nicht solcher [Inline-Inhalt] sein?

So sind sie das nicht:

#menu li {float: left;}
#menu li a {display: inline; float: left;}

Für welchen Selektor musst du die display-Eigenschaft angeben?

See ya up the road,
Gunnar

[Colin Finck]

Für welchen Selektor musst du die display-Eigenschaft angeben?

Ich habe "display: inline" bei allen Selektoren ausprobiert, es funktioniert aber trotzdem nicht.
Was soll ich jetzt machen?

Beste Grüße,

Colin Finck

[Gunnar Bittersmann]

Hello out there!

Für welchen Selektor musst du die display-Eigenschaft angeben?

Ich habe "display: inline" bei allen Selektoren ausprobiert, es funktioniert aber trotzdem nicht.
Was soll ich jetzt machen?

Es nicht bei _allen_ setzen, sondern nur bei dem richtigen.

See ya up the road,
Gunnar

[Colin Finck]

Es nicht bei _allen_ setzen, sondern nur bei dem richtigen.

Was ist denn in diesem Fall der richtige Selektor???
Ich hab jetzt nun bei mir den CSS-Angaben alle Möglichkeiten durchprobiert und es funktioniert trotzdem noch nicht.

Beste Grüße,

Colin Finck

[Gunnar Bittersmann]

Hello out there!

Es nicht bei _allen_ setzen, sondern nur bei dem richtigen.
Was ist denn in diesem Fall der richtige Selektor???

ul hat per Default die Eigenschaft display: block. Und das soll auch so bleiben.

a hat per Default schon die Eigenschaft display: inline.

Bleibt ja nur noch li: hat per Default die Eigenschaft display: block, und gerade das möchtest du ändern.

Wie ich schon in meiner ersten Antwort auf dein OP schrieb: „Das wirkt ja auch nur auf Inline-Inhalt. Warum sollten die li nicht solcher sein?“

See ya up the road,
Gunnar

[Colin Finck]

Bleibt ja nur noch li: hat per Default die Eigenschaft display: block, und gerade das möchtest du ändern.

Wie ich schon in meiner ersten Antwort auf dein OP schrieb: „Das wirkt ja auch nur auf Inline-Inhalt. Warum sollten die li nicht solcher sein?“

Wie ich bereits zweimal geschrieben habe, funktioniert es auch so nicht.

Beste Grüße,

Colin Finck

[Gunnar Bittersmann]

Hello out there!

Wie ich bereits zweimal geschrieben habe, funktioniert es auch so nicht.

Was funktioniert da nicht?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <title>TEST</title>  
    <style type="text/css">  
[code lang=css]      ul {margin: 0; padding: 0; list-style: none; text-align: center;}  
      li {display: inline;}

</style>
  </head>
  <body>
    <ul>
      <li>foo</li>
      <li>bar<li>
    </ul>
  </body>
</html>[/code]

See ya up the road,
Gunnar

[Colin Finck]

ul {margin: 0; padding: 0; list-style: none; text-align: center;}

li {display: inline;}

  
Da haben wir es ja: Ich hatte noch zwei mal "float: left" in den vorherigen Postings stehen. So funktioniert es jetzt, danke.  
  
Beste Grüße,  
  
Colin Finck  

-- 
Homepage: <http://www.ColinFinck.de>  
Programme, PE Builder-Stuff (Plugins und Linkliste), Add-Ins und Sonstiges

[at]

Hallo.

#menu li a {display: inline; float: left;}

Hübsche Kombination.
MfG, at