• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Zentrieren mehrerer divs in der Browsermitte

T

Tronjer

Senior HTML'ler
Hallo zusammen,

ich würde gerne drei übereinanderliegende Elemente in der Browsermitte zentrieren.



Im <body> habe ich ein Hintergrundbild mit background-position: center zentriert. Darüber befindet sich ein halbtransparenter Layer mit position:relative, margin:auto. Die beiden Elemente stehen ordnungsgemäß auf Mitte im Browser.

Das oberste Element, die Navigationsleiste, bekomme ich aber nicht vom linken Rand des darüberliegenden divs weg - egal, in welches tag ich nun position:relative / margin:auto schreibe. Woran mag das liegen?

Hier das HTML:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Menubar</title>
        <link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>
    </head>
    <body>
      <div id="layer">
        <div id="navbar">
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Reiseziele</a>
                </li>
                <li>
                    <a href="#">Angebote</a>
                </li>
                <li>
                    <a href="#">Service</a>
                </li>
                <li>
                    <a href="#">Kontakt</a>
                </li>
                <li>
                    <a href="#">Suche</a>
                </li>
            </ul>
        </div>
      </div>
    </body>
</html>
Und hier mein CSS:
Code: 
 @charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    font-size: 9px;
    background-image: url(media/himalaya2.jpg);
    background-repeat: no-repeat;
    background-position:center;
    color: rgb(51, 51, 51);
}

#layer {
    position: relative;
    margin:auto;
    width: 900px;
    height: 768px;
    background-color: rgba(255,255,255,0.7);
    border: 1px solid white;
    -moz-border-radius: 7px;
}

#navbar {
    position: relative;
    top: 50px;
}

#navbar ul, #navbar ul li {
    height: 25px;    
    float: left;
}

#navbar ul {
    -moz-border-radius: 7px;
    list-style-type: none;
}

#navbar ul li {
    width: 110px;
    text-align: center;
    background-image: url(media/bg_button.png);
    background-position: bottom;
    background-repeat: repeat-x;
    background-color: white;
    border-top: 1px solid rgb(220,220,220);
    -moz-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.4);
    line-height: 28px;
}

#navbar ul li:first-child {
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-bottomleft: 7px;
}

#navbar ul li:last-child {
    border-bottom-style: none;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-bottomright: 7px;
}

#navbar ul li a {
    font-size: 11px;
    color: rgb(80,80,80);
    font-weight: bold;
    text-decoration: none;
    display: block;
}

#navbar ul li a:hover {
    background-color: #87a8b9;
    color: #fff;
}
 
Das funktioniert zwar, aber nur, wenn das Browserfenster nicht schmaler wird, als die Navigationsleiste. Ansonsten schiebt sich die Menubar nach rechts raus. Lässt sich das nicht auch über ein margin:auto bewerkstelligen?
 
dann musst du der navbar eine feste breite geben , deine css sieht auch etwas komisch aus finde ich , ich hätte das alles anderst gemacht...
 
NE4Y schrieb:
dann musst du der navbar eine feste breite geben , deine css sieht auch etwas komisch aus finde ich , ich hätte das alles anderst gemacht...
Zum Vergrößern anklicken....

Wie denn? Ich habe mittlerweile den Tunnelblick hier. Die CSS 3 Angaben sind soweit erstmal auf den FF abgestimmt, Safari und IE kommen noch.

Die Navbar mit den Buttons soll von der Größe her flexibel bleiben, weil wahrscheinlich noch welche mit hinzukommen. Deshalb habe ich sie display:block erstellt und das Hintergrundbild der List-Elemente sind auch nur 1 pixel breit.
 
ich würde nen wrapper drum legen der alles zentriert und nicht jedes einzelne teil ein margin auto geben ... und dann eben mit margin bzw. padding positionieren
 
Habe ich doch. Der div mit der id="layer" ist auf position: relative und margin:auto gesetzt. Deswegen verstehe ich ja nicht, weshalb die darin liegende Navbar nun am linken Rand steht.
 
ah nicht gesehen ... dann liegt es daran, dass du navbar keine weite gegeben hast .. gibtr doch einfach ein min-width ... dann kann es sich immer nch ausdehenn , falls was neues dazu kommt
 
Die Navbar besteht aus 6 einzelnen, in CSS definierten buttons, mit einer width von jeweils 110pix, die mit float:left angeordnet sind.

Ich nehme mal an, es liegt entweder am float:left oder am display:block, dass margin:auto nicht funktioniert.
 
Die relative Positionierung brauchst Du nicht an der Stelle.

Und wer floatet muss auch clearen - dann klappts auch mit der Zentrierung.
 
Dann ergänze ein Element dafür. Oder ergänze das clearing bei #navbar, wo du übrigens auch auf die relative Position verzichten könntest.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben