CSS Problem: Seitenaufteilung mit DIVs

Zephyro · 11. Mai 2012

Hallo,

ich habe schwierigkeiten bei der Seiteneinteilung mit den Div-Bereichen.
Ich möchte links und rechts neben meiner eigentlichen Seite, zwei größere Bilder anordnen.

Bisher hab ichs so versucht:

HTML:

<body>
    <div id="body-wrap">
        <div id="body-left"></div>
        <div id="body-right"></div>
        <div id="wrapper"></div>
    </div>
</body>

Code:

*
{
    margin: 0;
    padding: 0;
}

body
{
    background-color: black;

}

#body-wrap
{
    width: 2150px;
}

#body-left
{
    background-image: url(../images/bild1.png);
    float: left;
    width: 585px;
    height: 1046px;
}

#body-right
{
    background-image: url(../images/bild2.png);
    float: right;
    width: 585px;
    height: 1046px;
}

#wrapper
{
    background-image: url(../images/bild3.jpg);
    width: 980px;
    height: 920px;
    background-repeat: repeat-y;
    margin: 0 auto;
}

Die Anordnung funktioniert, alle 3 Bilder sind zu sehen, aber der wrapper ist nicht in der mitte und ich weiß nicht genau warum, bzw. was fehlt. Der "wrapper" soll die eigentliche Seite darstellen und soll deshalb immer zentriert sein.

Kann mir jemand sagen warum es den wrapper nicht zentriert?
Danke schonmal!

Gruß
Zephyro

_daniel_999 · 11. Mai 2012

Hallo, probier mal:

Code:

#body-wrap
{
width: 2150px;
margin:0px auto;
}

Nocman · 11. Mai 2012

HTML:

<body>
    <div id="body-wrap">
        <div id="body-left"></div>
        <div id="wrapper"></div>
        <div id="body-right"></div>
    </div>
</body>

Code:

#body-left
{
    background-image: url(../images/bild1.png);
    float: left;
    width: 585px;
    height: 1046px;
}
 
#body-right
{
    background-image: url(../images/bild2.png);
    float: right;
    width: 585px;
    height: 1046px;
}
 
#wrapper
{
    float: left;
    background-image: url(../images/bild3.jpg);
    width: 980px;
    height: 920px;
    background-repeat: repeat-y;
    margin: 0 auto;
}

Ich glaube so sollte es funktionieren, hab es jetzt aber nicht getestet.
Im Html Code sollte das div Element, welches in die Mitte angezeigt werden soll, auch in der "Mitte" stehen.

Zephyro · 11. Mai 2012

Danke für die Antworten!

Ich hab mal wieder zu voreilig hier gepostet. Habe das Problem inzwischen schon selber gelöst. Ein Div war unnötig...
Für die die es interessiert:

HTML:

<div id="wrapper">
            <div id="body-left"></div>
            <div id="body-right"></div>
</div>

Code:

#body-left
{
    background-image: url(../images/bild1.png);
    float: left;
    width: 585px;
    height: 1046px;
    margin-left: -566px;
    position: fixed;
}

#body-right
{
    background-image: url(../images/bild2.png);
    float: right;
    width: 585px;
    height: 1046px;
    margin-left: 961px;
    position: fixed;
}

#wrapper
{
    background-image: url(../images/bild3.jpg);
    width: 980px;
    height: 920px;
    background-repeat: repeat-y;
    margin: 0 auto;
}

Sorry fürs voreilige Posten

Grüße
Zephyro

Suche

CSS Problem: Seitenaufteilung mit DIVs

Zephyro

Ensign

_daniel_999

Cadet 2nd Year

Nocman

Cadet 2nd Year

Zephyro

Ensign

Ähnliche Themen