Positionierung [3]

Hast du die Angabe width:100%; in den drei Content-Divs wieder herausgenommen? Wie gesagt, hatte ich vergessen, dass das padding noch hinzugezählt wird, so dass der Content bei width:100% + padding 2 * 150px den body sprengt

Noch drei Korrekturen:

- wegen der border im mittleren Teil ist es wohl besser, den Abstand mit margin statt mit padding zu erzeugen

- der mittlere Teil sollte auch noch ein clear:both erhalten

- die Angaben zu position:relative sind unnötig

<div style="background-image:url(images/content_header_puffer.gif);margin-top:125px;margin-left:150px;margin-right:150px;"><img src="images/content_header_left.gif" style="float:left" /><img src="images/content_header_right.gif" style="float:right" /></div>

<div style="border-left:solid 1px #888888; border-right:solid 1px #888888;padding:0;margin-top:125px;margin-left:150px;margin-right:150px; clear:both">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed interdum felis quis ante. Aliquam adipiscing risus quis sapien. Sed elit elit, lobortis sit amet, iaculis faucibus, faucibus in, sapien. Sed eleifend nulla. Aliquam erat volutpat. Mauris luctus sem et lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam dolor. Ut magna felis, bibendum et, ornare at, consectetuer at, purus. Sed ut risus. Fusce vel elit eu justo interdum vestibulum. Donec vehicula tortor nec dui. Phasellus sagittis.</div>

<div style="background-image:url(images/content_bottom_puffer.gif);margin-top:125px;margin-left:150px;margin-right:150px;"><img src="images/content_bottom_left.gif" style="float:left" /><img src="images/content_bottom_right.gif" style="float:right" /></div>

Wie schaut das Ergebnis dann aus?

PS: ein bischen taper ich immer etwas im dunkeln, da mir zum Testen die passenden Grafiken fehlen

Wenn für die oberen und unteren divs die entsprechende Höhe definiert ist, werden auch die Hintergrundbilder in ihrer Höhe angezeigt

Dann sollte aus dem mittleren und unteren div das margin-top:125px herausgenommen werden (oder gegebenenfalls durch ein padding-top ersetzt werden) damit die border des mittleren divs direkt an die Grafiken anschließen:

<!--Content -->
<div style="background-image:url(images/content_header_puffer.gif);margin-top:125px;margin-left:150px;margin-right:150px; height:27px"><img src="images/content_header_left.gif" style="float:left" /><img src="images/content_header_right.gif" style="float:right" /></div>

<div style="border-left:solid 1px #888888; border-right:solid 1px #888888;padding:0;margin-left:150px;margin-right:150px; clear:both">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed interdum felis quis ante. Aliquam adipiscing risus quis sapien. Sed elit elit, lobortis sit amet, iaculis faucibus, faucibus in, sapien. Sed eleifend nulla. Aliquam erat volutpat. Mauris luctus sem et lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam dolor. Ut magna felis, bibendum et, ornare at, consectetuer at, purus. Sed ut risus. Fusce vel elit eu justo interdum vestibulum. Donec vehicula tortor nec dui. Phasellus sagittis.</div>

<div style="background-image:url(images/content_bottom_puffer.gif);margin-left:150px;margin-right:150px;height:29px;"><img src="images/content_bottom_left.gif" style="float:left" /><img src="images/content_bottom_right.gif" style="float:right" /></div>

Noch eine Korrektur für das style Element: wenn du dessen Inhalt für ältere Browser in einen Kommentar einbettest, musst du diesen auch wieder schließen, ansonsten zeigen einige Browser, wie z.B. Opera, den nachfolgenden Inhalt nur unvollständig an:

<style type="text/css">
<!--

-->
</style>

Ja, der IE muss mal wieder aus der Reihe tanzen ;) Wenn man die Angabe margin-top:125px; aus dem Header-Div herausnimmt und stattdessen dem Gesamtcontainer .all überträgt ...:

.all {
width:100%;
margin-top:125px;
}

... zeigt auch der IE den Inhalt an passender Stelle

Nochmal eine Frage *rotanlauf*
Der Text hängt ziemlich am Rand... Wie kann ich es am besten Lösen, dass dieser ungefähr 5 Pixel vom Rand entfernt ist?

Gruß,
tommik.