mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 16:42 Benutzername: Passwort: Auto-Login

Thema: Navigationsleiste zentrieren vom 07.09.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Navigationsleiste zentrieren
Autor Nachricht
Benutzer 115688
Account gelöscht Threadersteller


Ort: -

Verfasst Mi 07.09.2011 21:20
Titel

Navigationsleiste zentrieren

Antworten mit Zitat Zum Seitenanfang

Ich versuche vergeblich eine Navigationsleiste zu zentrieren.
Hier mein CSS-Code:
Code:


#head {
margin-right:15px;
margin-top:15px;
margin-left:15px;
}
#nav   { 
   position:absolute;
   float: left;
   padding: 0;
   margin:0 auto;
   
   /* Box Shadow */
   box-shadow: 0 1px 0 #000;
   -moz-box-shadow: 0 1px 0 #000;
   -webkit-box-shadow: 0 1px 0 #000;
   
   /* Rounded Corners */
   -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
   -webkit-border-top-left-radius: 10px;
   -webkit-border-bottom-left-radius: 10px;
   
   /* Rounded Corners */
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
   -webkit-border-top-right-radius: 10px;
   -webkit-border-bottom-right-radius: 10px;
}
#nav ul   {
   border-top: #f3f3f3 1px solid;
   padding: 0;
   margin: 0;
   float: left;
   
   /* Background Gradient */
    background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
}
#nav li   {
   float: left;
   list-style: none;
   background: none;
   margin-right: 1px;
}
#nav a { outline: none; }
#nav li a:link, #nav li a:visited {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   display: block;
   color: #262626;
   text-decoration: none;
   text-transform: capitalize;
   text-shadow: 0px 1px 1px #fff;
   padding: 12px 28px;
   
   /* Background Gradient */
    background-image: -moz-linear-gradient(top, #cacaca, #848484);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
}
#nav li a:hover   {
   cursor: pointer;
   color: #fff;
   text-shadow: 0px -1px 1px #000;
   
   /* Background Gradient */
    background-image: -moz-linear-gradient(top, #929292, #545454);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454));
}
#nav li:first-child a, #nav ul {   
   /* Rounded Corners */
   -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
   -webkit-border-top-left-radius: 10px;
   -webkit-border-bottom-left-radius: 10px;
}
#nav li:last-child a, #nav ul {
   /* Rounded Corners */
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
   -webkit-border-top-right-radius: 10px;
   -webkit-border-bottom-right-radius: 10px;
}
a.active:link, a.active:active, a.active:visited   {   
   color: #fff !important;
   text-shadow: 0px -1px 1px #000!important;
    background-image: -moz-linear-gradient(top, #444, #666)!important;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important;
   
   /* Box Shadow */
   box-shadow: inset 0 0 10px #000;
   -moz-box-shadow: inset 0 0 10px #000;
   -webkit-box-shadow: inset 0 0 10px #000;
}


Und jetzt das HTML-Markup:

Code:


      <div id="head">
      <div id="nav">
         <ul>
            <li><a href="index.html" class="active">Home</a></li>
            <li><a href="2.html">2</a></li>
            <li><a href="3.html">3</a></li>
            <li><a href="4.html">4</a></li>
            <li><a href="5.html">5t</a></li>   
         </ul>
      </div>
      </div>


Kann mir bitte jemand helfen, diese Nav-leiste zentriert auszurichten?
Danke im Voraus!
 
Zim

Dabei seit: 05.12.2006
Ort: Earth Rocks
Alter: -
Geschlecht: Männlich
Verfasst Do 08.09.2011 03:29
Titel

Antworten mit Zitat Zum Seitenanfang

zentrieren kann man in 2 Richtungen *zwinker* horizontal oder vertikal?


Als erstes fang mal damit an Einheiten immer mit anzugeben und nicht wenn du da gerade Lust zu hast.

Code:
#nav ul   {
   border-top: #f3f3f3 1px solid;
   padding: 0;
   margin: 0;
   float: left;


da fehlt schon mal 2x px

Falls dir keiner auf Anhieb sagen kann woran es liegt mach mal ne Skizze wie es sein soll.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Martys

Dabei seit: 07.04.2005
Ort: Bochum
Alter: 45
Geschlecht: Männlich
Verfasst Do 08.09.2011 07:32
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
Code:
#nav   {
   position:absolute;
   float: left;
   padding: 0;
   margin:0 auto;


Absolut positioniert und gefloatet?
Entscheidener ist, dass es sich um Blockelemente handelt, die erstmal immer 100% der Breite des Elternelemets einnehmen. Wenn diese jetzt keine eigene Breitenangabe < 100% erhalten, können sie nicht zentriert werden.

@Zim:
Bei 0 kann die Angabe px entfallen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Benutzer 115688
Account gelöscht Threadersteller


Ort: -

Verfasst Do 08.09.2011 14:00
Titel

Antworten mit Zitat Zum Seitenanfang

der #nav-Bereich soll horizontal ausgerichtet werden.
 
Martys

Dabei seit: 07.04.2005
Ort: Bochum
Alter: 45
Geschlecht: Männlich
Verfasst Do 08.09.2011 14:21
Titel

Antworten mit Zitat Zum Seitenanfang

hileutz hat geschrieben:
der #nav-Bereich soll horizontal ausgerichtet werden.


Siehe oben oder Punkt 13) Ohne width gefloatet und dennoch horizontal zentriert
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Benutzer 115688
Account gelöscht Threadersteller


Ort: -

Verfasst Do 08.09.2011 14:37
Titel

Antworten mit Zitat Zum Seitenanfang

Martys hat geschrieben:
hileutz hat geschrieben:
der #nav-Bereich soll horizontal ausgerichtet werden.


Siehe oben oder Punkt 13) Ohne width gefloatet und dennoch horizontal zentriert


Vielen Dank, Problem gelöst!!
 
 
Ähnliche Themen Navigationsleiste
navigationsleiste php
Navigationsleiste-Ausrichtung
html Navigationsleiste
[CSS] Navigationsleiste Schwierigkeiten
Navigationsleiste ausblenden
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.