zentriertes Layout mit Hintergrundgrafik in den Randbereichen

[Suidu]

Hallo,

ich hab folgende Frage:
ich habe ein div-Element mit fester Breite zentriert mittels margin-left / margin-right=auto. Nun sollen die Flächen rechts und links davon mit einer Hintergrundgrafik versehen werden, die ich leider nicht ins body-Tag nehmen kann, da sie eine Ausrichtung haben (einen Schatten am Rand des div-Elements).

Mein Versuch bisher: ich habe zwei weitere div-Elemente mit festen Breiten innerhalb des zentrierten div's definiert und absolut positioniert.

Mein Problem: da die Gesamt-Breite der drei div-Elemente nun größer ist als die Bildschirmgröße, bekomme ich einen horizontalen Scrollbalken im Browser. Die Größe des linken div's ist nicht tragisch, da es einfach im unsichtbaren Bereich des Bildschirms verschwindet, aber für das rechte div-Element habe ich keine Lösung.

Wahrscheinlich muss man da einen grundsätzlich anderen Ansatz wählen als absolut positionierte div's.

Hat jemand eine elegante Lösung?

Vielen Dank im Voraus!

Grüße
Suidu

Hier der relevante Ausschnitt aus dem Quelltext:

<style>

#center {
position: relative;
margin-left:auto;
margin-right:auto;
width: 825px;
height:100%;
min-height:700px;
}

#left_margin {
position: absolute;
left:-650px;
width:650px;
height:100%;
background-image: url(../images/background_schadow_1px-left.gif);
}

#right_margin {
position:absolute;
left:825px;
width: 100px;
height:100%;
background-image: url(../images/background_schadow_1px-right.gif);
}
</style>

<div id="center">

<div id="left_margin">
</div>

<div id="right_margin">
</div>

<p>Hier kommt der weitere Inhalt des mittleren div's </p>

</div>

[schwarze Piste]

Tachchen!

Wahrscheinlich muss man da einen grundsätzlich anderen Ansatz wählen als absolut positionierte div's.

Nichts müssen aber alles können:

• Hintergrundbild in den zentrierten DIV
• weitere Elemente per margin passend vom Rand entfernen

Vielleicht erkennt man dann beim nächsten Problem auch besser,
was du dir bei manchen CSS-Definitionen gedacht hast. ;-)

Gruß

Die schwarze Piste

[Detlef G.]

Hallo Suidu

ich habe ein div-Element mit fester Breite zentriert mittels margin-left / margin-right=auto. Nun sollen die Flächen rechts und links davon mit einer Hintergrundgrafik versehen werden, die ich leider nicht ins body-Tag nehmen kann, da sie eine Ausrichtung haben (einen Schatten am Rand des div-Elements).

Warum verwendest du nicht einfach _eine_ Hintergrundgrafik, die den linken _und_ den rechten Schatten enthält. Diese zentrierst du dann.

Auf Wiederlesen
Detlef

[Suidu]

Hallo Detlef

Warum verwendest du nicht einfach _eine_ Hintergrundgrafik, die den linken _und_ den rechten Schatten enthält. Diese zentrierst du dann.

Auf Wiederlesen
Detlef

danke, dieser Tipp hat funktioniert!
Dass man Hintergrundbilder zentrieren kann hatte ich nicht bedacht!

Der Tipp von schwarze Piste hat nicht direkt weitergeholfen, da meine Hintergrundbilder bewusst so breit ist, dass sie zusammen (fast) jede Monitorgröße übersteigen. Trotzdem danke!

Grüße
Suidu