Padding

[alex]

Ich hab eine (hoffentlich) einfache Frage.

Ich habe ein Bild, dass die Eigenschaft float:left hat, da ich rechts daneben Text schreiben will. Der Text soll mehrzeilig sein und einen farbigen Hintergrund haben, deshalb schreibe ich ihn in einen div Container.

Das Problem ist jetzt, dass ich einen 10 Pixel Abstand zwischen dem Bild und dem farbigen div Container haben will. Die einfachste Variante wäre gewesen, den Abstand mit padding-right:10px zu erzeugen, aber dadurch verschiebt sich nur der Text und nicht der ganze div Container. Mit padding-left:10px beim div Container tut sich mal gar nichts...

Hat jemand Lösungen?
Danke

[ChrisB]

Hi,

Ich habe ein Bild, dass die Eigenschaft float:left hat, da ich rechts daneben Text schreiben will. Der Text soll mehrzeilig sein und einen farbigen Hintergrund haben, deshalb schreibe ich ihn in einen div Container.

Das Problem ist jetzt, dass ich einen 10 Pixel Abstand zwischen dem Bild und dem farbigen div Container haben will. Die einfachste Variante wäre gewesen, den Abstand mit padding-right:10px zu erzeugen,

padding ist Innenabstand. Klingt aber eher so, also ob du einen Aussenabstand haben willst - das wäre margin.

aber dadurch verschiebt sich nur der Text und nicht der ganze div Container. Mit padding-left:10px beim div Container tut sich mal gar nichts...

margin-left von Bildbreite plus 10px.

MfG ChrisB

[Hopsel]

Hi alex!

Der Text soll mehrzeilig sein und einen farbigen Hintergrund haben, deshalb schreibe ich ihn in einen div Container.

Brauchst du nicht.

Hat jemand Lösungen?

<p>  
  <img src="SRC" alt="ALT" />  
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  
</p>

p {  
background:#cfc;  
margin-left:150px;  
}  
  
img {  
float:left;  
position:relative;  
width:140px;  
margin-left:-150px;  
}

Das klappt in allen Browsern, die hier zur Verfügung habe: FF 3.0.11, IE6,7&8, Opera 9.64.

MfG H☼psel

[Hopsel]

Hi Ingrid!

Und natürlich hat sich mal wieder ein Fehler eingeschlichen:
Das position:relative ist in diesem Zusammenhang absolut überflüssig.

MfG H☼psel

[Der Martin]

Hallo,

Ich hab eine (hoffentlich) einfache Frage.

vielleicht - leider hast du sie entweder sehr kompliziert oder nicht hinreichend genau formuliert.

Ich habe ein Bild, dass die Eigenschaft float:left hat, da ich rechts daneben Text schreiben will. Der Text soll mehrzeilig sein und einen farbigen Hintergrund haben, deshalb schreibe ich ihn in einen div Container.

Text hätte ich eher in einem Absatz, also einem p-Element erwartet, anstatt in einem div. Davon abgesehen - okay.

Das Problem ist jetzt, dass ich einen 10 Pixel Abstand zwischen dem Bild und dem farbigen div Container haben will. Die einfachste Variante wäre gewesen, den Abstand mit padding-right:10px zu erzeugen, aber dadurch verschiebt sich nur der Text und nicht der ganze div Container. Mit padding-left:10px beim div Container tut sich mal gar nichts...

Mit padding (Innenabstand) bestimmst du den Abstand zwischen der Außenkante (Rahmen) und dem *Inhalt* des Elements, mit margin (Außenabstand) dagegen den Abstand eines Elements zu seiner Umgebung. Ich verstehe deshalb nicht, warum du bei dem beschriebenen Szenario mit padding zum Ziel kommen willst.

Ciao,
 Martin