|
|||
Horizontale Liste zentrieren
Hallo,
Ein Problem, das ich jetzt nach Stunden immer noch nicht lösen kann: Ich will eine Navigation machen, die in der Mitte der Seite zentriert dargestellt werden soll. Die einzelnen Elemente stehen nebeneinander. Da ich die Seite auch übersetzen will auf eine andere Sprache, kann ich keine fixen Angaben zur Breite der Elemente machen. Mein erster Ansatz war: Code:
li { display: inline; margin: 0px; padding: 0px; } Mein zweiter Ansatz: Code:
li { display: block; margin: 0px; padding: 0px; float:left; } Vielen Dank! Hier noch der "ganze" Code: Code:
<?xml version="1.0" encoding="utf-8"?> <!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> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> /* <![CDATA[ */ #nav_top { background-color:#FFFFFF; text-align: center; padding-top: 70px; } #nav_top ul { list-style-type: none; margin: 0px; padding: 0px; } #nav_top ul li { display: block; background-color: #74A81C; margin: 0px; padding: 0px; float:left; } /* ]]> */ </style> </head> <body> <div id="nav_top"> <ul>[*]Element 1[*]Element 2[*]Element 3[*]Element 4[/list] </div> </body> </html> |
Sponsored Links |
|
|||
wenn ein Blockelement keine definierte width hat, wird es bei margin: 0 auto; nicht zentriert, da es bereits den vollen Platz einnimmt und der margin überall 0 ist. Gib der <ul> eine Breite kleiner als das Elternelement und dann margin: 0 auto;
Dafür kannst Du das bei den[*]s wieder rausnehemen. |
|
|||
Ok danke, alles klar; Würde auch funktionieren. Es wäre aber nicht der Idealfall, weil ich nicht weiß, wie breit ein einzelnes Element wirklich sein darf.
Vielleicht wäre der "inline" Ansatz doch nicht so schlecht. Aber da ist halt ein Abstand zwischen den Menüpunkten (li hat einen Farbwert). Wieso ist das eigentlich der Fall? Auf die schnelle würde mir nur einfallen, einen span mit der gleichen Farbe einfach darüber zu legen, dann fällt es nicht auf. Aber ist das die perfekte Lösung? |
|
|||
Zitat:
|
|
|||
Zitat:
|
|
|||
entfern mal die XML - Deklaration im Kopf deiner Seite. Diese verhindert bei mir (im IE6) ebenfalls das Zentrieren eines DIV - Blocks per CSS.
__________________
kostenlose Referate! |
|
|||
Guten Abend zusammen,
habe da leider das gleiche Problem. Und zwar gibt es bei meinem Layout am Anfang gleich ein Listen-Menü, welches die wichtigsten Seiten enthalten soll. Den Aufbau habe ich so vorgenommen: HTML-Code:
#menue { display:block; padding:0.25em; margin:0em; text-align:center; font-size:1em; border-top:none; border-left:none; border-right:none; border-bottom:solid #000 0.05em; } /* Listen Menue */ #menue ul { list-style-type:none; padding:0em; margin:0 auto; width:95%; text-align:center; } #menue li { float:left; padding:0.25em; margin:0em 0.5em 0em 0.5em; font-size:0.8em; font-weight:bold; border-top:solid #000 0.05em; border-left:solid #000 0.05em; border-right:solid #000 0.05em; border-bottom:none; } #menue li a {color:#000000;} #menue li a:hover {color:#CCCCCC;} Hoffe ihr könnt mir helfen. Vielen Dank Muckel |
Sponsored Links |
|
||||
Hier solltest Du etwas finden: http://xhtmlforum.de/296439-post2.html
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
horizontale Liste mit Block-Elementen | Hustler | CSS | 4 | 29.09.2011 22:34 |
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren | Alien | CSS | 17 | 20.03.2011 11:23 |
Horizontale Liste mit Dropdown zentrieren | Amnesys | (X)HTML | 4 | 13.10.2010 09:53 |
horizontale liste - zeilenumbruch geht nicht | outofrulez | CSS | 10 | 01.04.2010 15:13 |
Horizontale Liste mit breiteren Unterpunkten | Korasu | CSS | 3 | 12.05.2009 10:00 |