Xaven
Threadersteller
Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht:
|
Verfasst Mo 11.02.2008 10:38
Titel [CSS] Textnavigation horizontal zentrieren |
|
|
Guten Morgen MGI,
ich würde gerne eine Textnavigation, die ich mit Hilfe einer Liste angelegt habe, mittig zentrieren. Leider geling es mir weder mit margin: 0 auto;, noch mit anderen Methoden.
Wahrscheinlich mal wieder ein Denkfehler. Kann jemand helfen?
HTML
Code: |
<div id="navigation">
<ul id="navigationsleiste">
<li><a class="active" href="#">News</a></li>
<li><a href="#">Lineup</a></li>
<li><a href="#">Spielplan</a></li>
<li><a href="#">Tickets</a></li>
<li><a href="#">Fotos</a></li>
<li><a href="#">Gästebuch</a></li>
</ul>
</div>
|
CSS
Code: |
#navigation {
padding: 0;
margin: -35px 0 0 0;
float:left;
}
#navigationsleiste li {
float: left;
margin-right: 5px;
list-style: none;
display: inline;
border:0;
}
#navigationsleiste a {
font-family: Trebuchet MS, Times, Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.8em;
float: left;
padding: 6px 13px;
color: #ffffff;
text-transform:uppercase;
}
#navigationsleiste a:hover {
font-family: Trebuchet MS, Times, Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.8em;
float: left;
padding: 6px 13px;
color: #ffffff;
text-transform:uppercase;
}
#navigationsleiste a.active {
font-family: Trebuchet MS, Times, Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.8em;
float: left;
padding: 6px 13px;
color: #ffffff;
text-transform:uppercase;
}
|
Beispiel:
http://s230539016.online.de/
(Die Hauptnavigation)
Gruß
Mario
Zuletzt bearbeitet von Xaven am Mo 11.02.2008 10:39, insgesamt 1-mal bearbeitet
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mo 11.02.2008 13:54
Titel
|
|
|
margin: 0 auto; kann nicht gehen, da alles floatet.
Da Du eh ohne width floatest und die Links in Deinem Design keine Blockelemente sein müssen, würde ich jegliches float rauswerfen und li ausschließlich per display: inline; nebeneinander stellen, und sie dann per text-align: center; für ul zentrieren. Übrigens solltest Du das überflüssige div rauswerfen (nie einzelne Elemente mit einem div umgeben).
Man kann zwar auch Floats mit unbekannter Breite zentrieren, aber das ist relativ mühsam (dem IE sei dank) und wäre in Deinem Falle absolut nicht nötig.
P.S.: Du hast massive Fehler im Markup und solltest daher unbedingt validieren.
Zuletzt bearbeitet von heiko_rs am Mo 11.02.2008 13:57, insgesamt 2-mal bearbeitet
|
|