TYPO3.net - horizontales Listenmenü zentriert darstellen.

horizontales Listenmenü zentriert darstellen.

Autor

Nachricht

Verfasst am: 31.08.2007 [18:14]

dfluess

[Themenersteller]
dabei seit: 05.09.2003
Beiträge: 991

Hi,

ich lasse Listmenü mit float:left horizontal darstellen. Die Einträge werden also linksbündig nebeneinander dargestellt.
Ich möchte nun aber alle diese Einträge zentrieren, sodass das Menü zum linken und rechten Browserrand immer den gleichen Abstand haben.

Gibt es einen Trick oder warum funktioniert folgendes Beispiel nicht?

Html4strict:

Zeilennummerierung: An / Aus

<div id="nav">
<div id="nav_main">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</div>

Das zugehörige css

Html4strict:

Zeilennummerierung: An / Aus

#nav {
background-image: url(../../template/img/index_02.png);
background-repeat: no-repeat;
background-position: 0% 0%;
width:100%;
height: 47px;
}
#nav_main {
font: 10px/10px Arial, Helvetica, sans-serif;
padding:0; margin:0;
text-align:center;
}
#nav_main ul {text-align:center;}
#nav_main ul li {float:left; margin:0; padding:0; list-style-type: none;}

.:: Mein Tipp für alle, die gern Musik hören ::. -> ClipInc 4 ...
Wer ClipInc nicht kennt, der verpasst was!
» hier lesen, installieren, hören, sehen und staunen! :o)

Verfasst am: 01.09.2007 [17:25]

karinchristina

dabei seit: 26.01.2007
Beiträge: 18

Hallo dfluess!

Ich bin mir nicht ganz sicher, ob ich Dich richtig verstanden hab, aber versuchs mal mit diesen css-Angaben:

Html4strict:

Zeilennummerierung: An / Aus

#nav {
background-image: url(../../template/img/index_02.png);
background-repeat: no-repeat;
background-position: 0% 0%;
width:100%;
height: 47px;
}
#nav_main {
font: 10px/10px Arial, Helvetica, sans-serif;
padding:0 30%;
margin:0;
}
#nav_main ul {
width:70%;
}
#nav_main ul li {
float:left;
margin:0;
padding:0;
list-style-type: none;
}

Ich selber würde mit festen Angaben für width und padding in px oder em an Stelle vom % arbeiten wollen, Liquid Designs sind halt Ansichtssache, besonders der ie7 mit seiner Zoom-Funktion kann Dir ein liquid Design ganz schön durcheinanderwürfeln

liebe Grüße
Karin

horizontales Listenmenü zentriert darstellen.

TYPO3 Ver. 4.2.0 testen

Testen Sie die neue TYPO3 Version 4.2.0 kostenlos für einen Monat

TYPO3 Bücher