Plazierung geht nicht -- Ausweg Tabelle?

[Steve01]

hallo zusammen,

ich möchte ja css einsetzen , aber es klappt nicht.

Brauche dies

---------------------------------------------------------
  | Headline mit eigener Farbe/Hintergrund und padding     |
  ---------------------------------------------------------
  |                     |                                  |
  | Bild nahtlos links  | Text mit neuer Hintergrundfarbe  |
  | oben                | links neben Bild                 |
  |                     | ist Text länger/ höher als       |
  |                     | Bild soll Text nicht unter       |
  |                     | Bild umbrechen                   |
  |                     | Hintergrundfarbe von Text und Bild
  |                     | soll gleich sein                 |
  |--------------------------------------------------------

Soweit bin ich:

<!-- Grundfarbe und Groesse festlegen -->
 <div style="padding:0; margin:0; width:500px; color:#FFFFFF; background:#FF0000;">
  <div style="padding:10px; margin:0; color:#FFFFFF; background:#4D5E74;">Headline</div>
  <img src="overview/Triband_phones.jpg" width="144" height="144" alt="" style="float:left;">
  Text Text Text<br>
  Text Text Text<br>
  Text Text Text<br>
    Text Text Text<br>
  Text Text Text<br>
  Text Text Text<br>
    Text Text Text<br>
  Text Text Text<br>
  Text Text Text<br>

Text Text Text
  </div>
 </div>

Aber das Bild erscheint nicht ganz links oben und hat bei kurzem rechten Text immer unten noch die Hintergrundfarbe vom rechten Textfeld

Weiss jemand meine(n) Fehler?

THX

Steve01

[Steve01]

Ein </DIV> zu viel,

aber Bild ist immer noch nicht ganz links und langer Text wird umgebrochen. Jetzt probiere ich mal einen DIV um den Text zu legen

<!-- Grundfarbe und Groesse festlegen -->
 <div style="padding:0; margin:0; width:500px; color:#FFFFFF; background:#FF0000;">
  <div style="padding:10px; margin:0; color:#FFFFFF; background:#4D5E74;">Headline</div>
  <img src="overview/Triband_phones.jpg" width="144" height="144" alt="" style="float:left;">
  Text Text Text<br>

»

Text Text Text
  </div>
 </div>

Bye,

Steve01

[Ingo Turski]

Hi,

aber Bild ist immer noch nicht ganz links und langer Text wird umgebrochen. Jetzt probiere ich mal einen DIV um den Text zu legen

eine sehr gute idee... wenn du noch etwas länger experimentierst, kommst du auch darauf, diesem div einen entsprechenden margin-left zu geben.
und was die abstände zum body betreffen: die solltest du natürlich noch auf 0 setzen, wenn du sie nicht willst.

freundliche Grüße
Ingo

[steve01]

hi ingo,

das ist mein aktueller stand:

<div style="padding:0; margin:0; width:500px; color:#FFFFFF; background:#FF0000;">
  <div style="padding:10px; margin:0; color:#FFFFFF; background:#4D5E74;">Headline</div>

<div  style="float:left;padding:0">
  <img src="overview/Triband_phones.jpg" width="144" height="144" alt="">
  </div>

<div style="margin-left:15px;">
  test<br>
  test<br>
  test</div>
 </div>

Aber unter dem Bild ist immern noch der hintergrund bei kurzem rechten Text zu sehen, und der rechte Text ist immer zu nah am Bild :

<div style="margin-left:15px;"> oder  <div style="padding-left:15px;">

geht nicht?

Need your help !

thx,

steve01

[Steve01]

Hi Ingo,

soweit bin ich nun:

aber langer Text wird unter dem Bild umgebrochen ?

Hast du kein Mitleid mit mir ?

<div style="padding:0; margin:0; width:500px; color:#FFFFFF; background:#FF0000;">
  <div style="padding:10px; margin:0; color:#FFFFFF; background:#4D5E74;">Headline</div>

<div style="float:left; padding:0; padding-right:5px;">
  <img src="overview/Triband_phones.jpg" width="144" height="144" alt="">
  </div>

<div style="padding-top:5px;  padding-right:5px;">
  test<br>
  test<br>
  test<br>
    test<br>
  test<br>
  test</div>
  </div>
 </div>

[nag]

Hallo,

Hast du kein Mitleid mit mir ?

In Ingos Antwort steht bereits die Lösung deines "Problems".

<div style="padding-top:5px;  padding-right:5px;">

damit der Text nicht unter dem Bild umbricht, mußt du lediglich ein "margin-left" festlegen

Also:

<div style="padding:5px 5px 0 0; margin-left:160px;">

mfg NAG

[steve01]

Hi NAG,

danke für den Tip !

Bye,

steve01