Zentrieren von DIVs

    Hallo

    ich versuche gerade eine Homapage zu erstellen allerdings funktioniert das nicht so wie ich mir das vorgestellt habe. Da ich vor allem im CSS-Bereich Anfänger bin hoffe ich dass ihr mir weiter helfen könnt :)

    und zwar hab ich einen Container <div id="all"> in dem alle weiteren divs zentriert sein sollten.
    Ich hab das so probiert:

    div#all
    {
    margin-left: auto;
    margin-right: auto;
    }

    aber iwi funktionierts nicht!

    Hi,
    du musst die DIV's, die zentriert sein sollen, mit margin-left: 0 und margin-right: 0; positionieren, nicht div#all.

    Beispiel:

    HTML
    <div id="all">
    <div id="header">INHALT</div>
    <div id="main">INHALT</div>
</div>
    Code
    div#header {
    margin-left: auto;
    margin-right: auto;
}


div#main {
    margin-left: auto;
    margin-right: auto;
}


    Theoretisch reicht auch margin: auto; solange du nach oben und unten kein margin brauchst. Bzw. kannst auch margin: 0 auto 0 auto; angeben.

    Gruß

    Danke für die schnelle Antwort!

    Iwi schaff ich es aber immer noch nicht!

    Hier meine HTML-Datei:
    <body>
    <div id="all">
    <div id="header">HEADER</div>

    <div id="website">
    website

    </div><!-- Ende website -->

    </div> <!-- Ende all -->
    </body>

    Der Header soll über die ganze Breite des Bildschirmes gehen, website ist der Rest der Seite da sollen nachher mal ein menü inhallt usw. drinnen sein dieser DIV soll nur 970 breit sein und zentriert sein. Website wird allerdings nicht zentriert!

    Und meine CSS-Datei:

    body {
    background-color: yellow;
    margin: 0;
    }

    #header
    {
    background-color: black;
    color: white;

    }

    #website
    {
    background-color: orange;
    width: 970px;
    margin-left: auto;
    margin-right: auto;

    }

    Ich hoffe ich nerv euch mit meinen Anfänger fragen nicht ^^

    Damit man es besser lesen kann solltest du deinen code in code-tags reinschreiben. das ist das RAUTE Symbol überm eingabefeld.

    Soweit ich das hier sehe sollte das doch normalerweise funktionieren. Habe es bei mir direkt so nachgebaut und funktioniert.

    Hast du die CSS datei auch richtig eingebunden? Die Farben etc. werden ja angezeigt oder?

    - - - Aktualisiert - - -

    Ok das Problem wird der QUIRKS Modus vom Internet Explorer sein, du nutzt IE oder?

    Dann musst du im CSS noch reinschreiben:

    Code
    #all {
    text-align: center;
}

    du musst dann bei allen nachfolgenden objekten angeben, dass der text aber wieder linksbündig sein muss.

    Zitat von Diluvian

    Hi,
    du musst die DIV's, die zentriert sein sollen, mit margin-left: 0 und margin-right: 0; positionieren, nicht div#all.

    Nicht den Wert "0" sondern "auto" wäre hier richtig. Zudem brauchen die Elemente auch noch eine feste Breite. Also in dem Fall hier reicht folgendes:

    Code
    div#website {
    margin: 0 auto;
    width: 970px;
}

    Dein HTML-Code soll in jedem Fall valide sein und auch einen gültigen Doctype enthalten. Mit Frickeleien für den IE, wenn Du keinen oder keinen richtigen Doctype angegeben hast, machst Du dir nur das Leben schwerer als es sein müsste.

    Zitat von threadi

    Nicht den Wert "0" sondern "auto" wäre hier richtig. Zudem brauchen die Elemente auch noch eine feste Breite. Also in dem Fall hier reicht folgendes:

    Sorry, hab mich wohl vertippt. Im CODE-Tag hab ich es korrekt geschrieben. Lässt es sich mit validem Doctype auch ohne text-align zentrieren?

    Sorry aber ich weiß nicht wie die spezielle Code-Schreibweise geht...

    HTML:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="template3.css">
    </head>
    <body>
    <div id="all">
    <div id="header">HEADER</div>

    <div id="website">

    <div id="banner">

    <div id="banner_logo">

    </div>
    </div>
    </div><!-- Ende website -->

    </div> <!-- Ende all -->
    </body>
    </html>

    CSS:
    body {
    background-color: yellow;
    margin: 0;
    }

    #header
    {
    background-color: black;
    color: white;

    }

    #website
    {
    background-color: orange;
    width: 970px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;

    }

    #banner
    {
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    background-color: red;

    width: 950px;
    }

    Ich vermute du siehst die Hintergrundfarben nicht? Hat einen einfachen Grund: Du hast ja auch keinerlei Inhalte in der Webseite. Füge z.B. in

    HTML
    <div id="banner_logo">

                    </div>

    noch ein geschütztes Leerzeichen ein:

    HTML
    <div id="banner_logo">
                        &nbsp;
                    </div>

    oder an anderer Stelle irgendeinen Text. Dann siehst Du auch etwas und das deine CSS-Angaben auch tatsächlich wirken.