mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 17:59 Benutzername: Passwort: Auto-Login

Thema: [CSS] Textnavigation horizontal zentrieren vom 11.02.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Textnavigation horizontal zentrieren
Autor Nachricht
Xaven
Threadersteller

Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht: Männlich
Verfasst Mo 11.02.2008 10:38
Titel

[CSS] Textnavigation horizontal zentrieren

Antworten mit Zitat Zum Seitenanfang

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&auml;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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mo 11.02.2008 13:54
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
 
Ähnliche Themen [CSS] Seite horizontal zentrieren
[CSS] Zentrieren vertikal und horizontal
[CSS] Bildergalerie horizontal zentrieren (responsive)
[CSS] Fixen Container horizontal und vertical zentrieren
css display bei horizontal
Div horizontal nebeneinander ?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.