[xpla]

Zitat von nbauer

Hi,

danke für deine Version. Sollte mal bringen, was ich möchte.

Ich möchte einen Textrahmen haben, mit einem (dunkel)grauen Hintergrund. In diesem soll ein Text mit etwas Abstand beginnen und rechtzeitig vor dem Bildrahmen (Abstand!) eine neue Zeile beginnen. Die Rahmen selber habe ich nur zur Veranschaulichung gewählt, einzig ein Rahmen um das Bild soll vorhanden sein. Der Rahmen um das eigentliche Bild soll auf weißem Hintergrund eine schwarzen Bildtext unterhalb des Bildes ermöglichen. Das Bild samt Rahmen soll natürlich auch vom rechten Bildschirmrand den gleichen Abstand haben.

<div style="width:100%; background-color:grey; color:white;"><!--umgebendes DIV-->
    <div style="border: thin solid yellow;"><!--Rahmen DIV-->
        <div style="background-color: white; color: black; border:10px solid red; float:right; height:320px; width:440px;vertical-align: bottom;">Bildunterschrift<!--umgebendes Bild-Div-->
            <div style="border:thin solid blue; float: right; height:300px; width:440px; color: black !important;" id="Bild"><!--Bild DIV--></div>
        <!--umgebendes Bild-DIV--></div>
fsdfsdfsdf dffsdfsdfsdsdf fsddf fd fdfd fddfs dfdf df df sdffsd fd fsd fsd fd f fd fd f f ff dfd fd fd fsd fsd fsd fsd dffsd fd fd fd fd fsd df fd dff df sdfsd fsd fsd dfs 
fddf f fsd fsd fd df sdf fsd fsdf sdf sddf fsd fd fd fsd fsd df    er tret t te t  tz t zzui ui ui ui io oi o o p p poo ppo 
<!--Jetzt sollten wir mal die Floats aufheben-->
<div style="clear: both;"></div>

Hier
- geht der äußerste Rahmen nicht bis zum jeweiligen Bildschirmrand
- der Text lässt weder einen Abstand links noch rechts zum Bild
- Die Bildunterschrift befindet sich nicht unterhalb des Bildes.

Jetzt ist gelöst,
- dass der gesamte Bereich innerhalb des Bildschirmes ist
- der Textblock ganz den äußersten Bildrahmen umfasst

Leider bin ich nicht so tief in CSS drinnen.

lg

Nicht so tief drinnen ist gut gesagt. Du hast keine Ahnung und möchtest, dass jemand die Arbeit für dich macht.

- geht der äußerste Rahmen nicht bis zum jeweiligen Bildschirmrand
Verwende ein Reset-Stylesheet, dies behebt von vornherein gleich mal einige Differenzen zwischen den Browser-Stylesheets. Ansonsten kannst ja mal das margin vom Body entfernen.

- der Text lässt weder einen Abstand links noch rechts zum Bild
Du hast auch keinen definiert. Der Linke Abstand ist Sache des umgebenden DIVs und der Abstand vom Text zum Div, welcher als Bildrahmen fungiert, wird von letzterem gesteuert, sprich vom gefloatetem Div. Dein Stichwort: padding

- Die Bildunterschrift befindet sich nicht unterhalb des Bildes.
Wie soll sie sich auch unterhalb befinden, wenn du sie oberhalb des Bildes im Quelltext setzt?


http://css-tricks.com/the-css-box-model/