Horiz. Menü zentrieren, elastisches Design -ahhhhrrrg.

[erikas]

Hallo Leute
ich versuche mich heute an einem 100% elastischen Design inkl Hintergrund und drehe kurz vor dem Ende gleich durch.

Alles wunderbar (bitte im FF testen) bis auf die Zentrierung der Navigation

CSS

html {height:100%;}/* volle Breite */
body {height:100%; margin:0; padding:0; text-align: center; font:100.01%;} /* Volle Anzeigenbreite und der Container wird in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
#bg {position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; }  /*Breite und höhe 100% damit der Hintergrund vollflächig skaliert wird*/
#distanz { 
        width:1px;
        height:50%;
        background-color:#fc6;
        margin-bottom:-8em; /* halbe höhe inhalt  */
        float:left;    
}
        
#inhalt {
border:0;
    position:relative;
    z-index::1;/* Inhalt über den BG setzen. */
    margin:0 auto;
    text-align:center; /* Inhalt zentrieren */
    height:16em;
    width:100%;
    clear:left;     
}  
    
#nav {
z-index:2; /* Navigation über den container setzen. */
position:absolute;   /*  sonst Scrollbars und keine Navi */
margin-top:2em;/* wieso funktioniert hier nicht margin: 2 auto 0 auto um navi zu zentrieren ?*/

border:2px solid white;
  }
         
 
#nav ul { 
list-style:none;

 border:2px solid yellow; 
}


#nav li {
float: left;   /*buttons horizontal anordnen*/ 
margin:0 ; /*abstand buttons untereinander*/
}

#nav li a {
display:block;  /*gleiche größe der buttons*/
padding: 1em; /*umlaufender abstand  buttonschrift zum buttonrand*/
width: 6em;  /*  buttonbreite*/
line-height:1em; /*zentriert den test auf den buttons vertikal*/
margin:auto; /*zentriert den test auf den buttons horizontal*/
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1.2em;
color:#777;
text-decoration: none;
 }

<div id="bg" ><img src="bgr_bl.png" height="100%" width="100%" /></div>
<div id="distanz"></div>

<div id="nav">
  <ul>
  <li><a id="aktuell" href="#">Produkt</a></li>
  <li><a href="#">Details</a></li>
  <li><a href="#">Probieren</a></li>
  <li><a href="#">Kaufen</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>
</div>

<div id="inhalt" ><img src="tux.png" height="330px"   /></div>

Das bgr.png wird vollflächig verzerrt, der Inhalt bleibt immer genau in der Mitte, keinerlei Scrollbars - wie ich es gedacht habe aber:

Um das Problem zu verdeutlichen habe ich das Menu mal mit farbigen Rahmen versehen, ich kapiere es nicht.

Erste Frage Warum hat die Navbar hat einen Linksabstand ?

Zweite Frage: Wie bekomme ich die Navbar (Inhalt gelbe border) zentriert? --> margin: 0 auto funzt nicht, ich denke mal das hat mit der Positionierung und dem float zu tun aber was? - ich bin blind.
please help.

schnief.
E.

[sejuma]

Gib #nav ul noch ein

 margin: 0;

Um ein Element mit

margin: 0 auto;

zu zentrieren bedarf es einem width-Wert.

[erikas]

Danke das mit der Breite hatte ich schon versucht - ohne Ergebnis. wie auch das margin 0 für die ul, da ist irgendwo der Hengst auf der Strasse. Bild nach Deinem Vorschlag identisch zu vorher. Screen anbei... Noch eine Idee ? Wie gesagt, das Menu im gelben Rahmen hor zentrieren und den gelben Rahmen hor zentrieren.
E.

[erikas]

aktuelles CSS

html {height:100%;}/* volle Breite */
body {height:100%; margin:0; padding:0; text-align: center; font:100.01%;} /* Volle Anzeigenbreite und der Container wird in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
#bg {position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; }  /*Breite und höhe 100% damit der Hintergrund vollflächig skaliert wird*/
#distanz { 
        width:1px;
        height:50%;
        background-color:#fc6;
        margin-bottom:-8em; /* halbe höhe inhalt  */
        float:left;    
}
        
        
#inhalt {
border:0;
    position:relative;
    z-index::1;/* Inhalt über den BG setzen. */
    margin:0 auto;
    text-align:center; /* Inhalt zentrieren */
    height:16em;
    width:100%;
    clear:left;     
}  
    
        
#nav {

z-index:2; /* Navigation über den container setzen. */
position:absolute;   /*  sonst Scrollbars und keine Navi */
margin-top:2em;/* wieso funktioniert hier nicht margin: 2 auto 0 auto um navi zu zentrieren ?*/

border:2px solid white;
  }
         
         
#nav ul { 
list-style:none;
margin: 0;
border:2px solid yellow; height:5em;
}



#nav li {
float: left;   /*buttons horizontal anordnen*/ 
margin:0 ; /*abstand buttons untereinander*/
}


#nav li a {
display:block;  /*gleiche größe der buttons*/
padding: 1em; /*umlaufender abstand  buttonschrift zum buttonrand*/
width: 6em;  /*  buttonbreite*/
line-height:1em; /*zentriert den test auf den buttons vertikal*/
margin:auto; /*zentriert den test auf den buttons horizontal*/
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1.2em;
color:#777;

 text-decoration: none;

[erikas]

und aktuelles Bild dazu

E.

[sejuma]

Hilft dir das weiter?

Alternativ:
Den li's ein "display: inline;" zuweisen und mit "text-align: center" zentrieren.

[erikas]

Hilft dir das weiter?

ik glob et nich. jau das geht, wenn gleich ich noch nicht verstehe geschweige denn erklären kann warum.
dufte. super. danke. schmatz. ! Ich hoffe das fällt mir nun nicht woanders auf die Knie.

Alternativ:
Den li's ein "display: inline;" zuweisen und mit "text-align: center" zentrieren.

Nee wieso soll das gehen? Ich brauche auf den li doch display:block, weil die Buttons zwar gleich groß, deren Inhalt aber verschieden ist...


Nett hier !
Grüße
E.

[sejuma]

Wenn du wirklich geholfen haben willst, dann poste bitte einen Link zur Problemseite, damit man alles im Zusammenhang sieht.

[erikas]

Haben wir da ein Missverständnis? - Ich schreibe doch im oberen Teil: alles super ! Danke ! Toll ! Gelöst !

Hier der Code für ein sehr nettes, elastisch zentriertes Design:

html {height:100%;}/* volle Breite */
body {height:100%; margin:0; padding:0; text-align: center; font:100.01%;} /* Volle Anzeigenbreite und der Container wird in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
#bg {position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; }  /*Breite und höhe 100% damit der Hintergrund vollflächig skaliert wird*/
#distanz { 
        width:1px;
        height:50%;
        background-color:#fc6;
        margin-bottom:-8em; /* halbe höhe inhalt  */
        float:left;    
}
        
        
#inhalt {
border:0;
    position:relative;
    z-index::1;/* Inhalt über den BG setzen. */
    margin:0 auto;
    text-align:center; /* Inhalt zentrieren */
    height:16em;
    width:100%;
    clear:left;     
}  
    
        
#nav {
float: left;
z-index:2; /* Navigation über den container setzen. */
position:absolute;   /*  sonst Scrollbars und keine Navi */
margin-top:2em;/* Abstand Navi von oben*/
width: 100%;
  }
         
         
#nav ul { 
float: left;
position: relative;
left: 50%; /*den ganzen Kram um 50% nach rechts schieben*/
margin: 0 auto;
list-style:none;
}


#nav li {
float: left;   /*buttons horizontal anordnen*/ 
margin:0.2em ; /*abstand buttons untereinander*/
position: relative;
right: 50%; /*den ganzen Kram um 50% zurück nach links schieben*/
}


#nav li a {
display:block;  /*gleiche größe der buttons*/
padding: 1em; /*umlaufender abstand  buttonschrift zum buttonrand*/
width: 6em;  /*  buttonbreite*/
line-height:1em; /* eine line-heigt zentriert den text auf den buttons vertikal*/
margin:auto; /*zentriert den test auf den buttons horizontal*/
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1.2em;
color:#777;
 text-decoration: none;
   border: 1px solid #FFFFFF;
 border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px;
 box-shadow: 10px 10px 22px #999; -webkit-box-shadow: 10px 10px 22px #999; -moz-box-shadow: 10px 10px 22px #999;
 background:#ffffff;
  }


li a#aktuell {
  background:#ccc;
  }
  

 #nav ul a:visited { 
   text-decoration:none; color:#777;
  }

#nav  ul a:focus{color:#FF5500; outline: none;
}

#nav  ul a:hover { 
        color:#FF5500; border:1px solid red;
  }

#nav  ul a:active { 
  color:#FF5500; border:1px solid red;
   box-shadow: 10px 10px 22px #ffA073; -webkit-box-shadow: 10px 10px 22px #ffA073; -moz-box-shadow: 10px 10px 22px #ffA073;
}

<div id="bg" ><img src="bgr.png" height="100%" width="100%" /></div>
<div id="distanz"></div>


<div id="nav">
  <ul>
  <li><a id="aktuell" href="#">Produkt</a></li>
  <li><a href="#">Details</a></li>
  <li><a href="#">Probieren</a></li>
  <li><a href="#">Kaufen</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>
</div>

<div id="inhalt" ><img src="hello.png" height="330px"   /></div>

Die Lösung besteht darin die UL nach rechts zu schieben left:50% und dann die LI mit right:50% zurückzuholen. Alles float:left und alles position.relative. Danke nochmal, guter Link, schnelle Hilfe, super Forum!
beste Grüße
E.