DIV-Box ausrichten

[DirkHo]

Hi,

folgendes: Ich will einen Bericht, den ich zuvor in einer DB auslese in eine PHP-Seite einbinden. In den Text soll an den rechten Rand dann dazugehörige Bilder angezeigt werden.

Nun bekomm ich die DIV-Box, in der die Bilder sein sollen, aber nicht so angeordnet, daß sie zum einen oben auf der Seite und rechts ist.

Kann mir da vielleicht jemand helfen?

Hier mal der Quelltextausschnitt:

...
<tr><td class="td_main font" valign="top">
HIER IST DER FAHRTENBERICHT
<div class="font" style="border-left: 1px solid #000070; width: 150px; text-align: right;">
'<img src="../fotos/fotos/bild1.gif" style="width: 140px; border: 1px solid #000000;" />
<br />&nbsp;<br />
<img src="../fotos/fotos/bild2.gif" style="width: 140px; border: 1px solid #000000;" />
<br />&nbsp;<br />
<img src="../fotos/fotos/bild3.gif" style="width: 140px; border: 1px solid #000000;" />
</div>
</td></tr>'
...

Hier mal eine Grafik, wie's aussehen soll:

Danke und Gruß,

Dirk

 

[SilentWarrior]

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float

 

[Voadi]

Hi,

hab das mal kurz gebastelt mit 3 divs und float. Ist zwar noch net Optimal und die Style Anweisungen sollteste du auch in eine externe Css Datei auslagern aber so zum Denkanstoss bestimmt zu gebrauchen

<div id="wrapper" style="width:551px;">
<div class="font" style="width: 400px; text-align: left; padding-top: 5px; float:left;">
<p>HIER IST DER FAHRTENBERICHT<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
In commodo laoreet mauris. Integer sollicitudin libero vel velit. 
Phasellus eget urna. Nulla varius risus quis leo. Maecenas sit amet ante. 
Maecenas pede magna, tincidunt quis, mattis eu, cursus eu, ipsum. 
</p>
</div>
<div class="font" style="border-left: 1px solid #000070; width: 150px; float: right; padding-top: 5px;">
<img src="../fotos/fotos/bild1.gif" style="width: 140px; border: 1px solid #000000;" />
<br />&nbsp;<br />
<img src="../fotos/fotos/bild2.gif" style="width: 140px; border: 1px solid #000000;" />
<br />&nbsp;<br />
<img src="../fotos/fotos/bild3.gif" style="width: 140px; border: 1px solid #000000;" />
</div>
</div>

 

[DirkHo]

Hi,

super, danke! Ich hab's selbst mal gebastelt mit dem Float-Befehl. Nun will ich jedoch, daß der Fahrtenbericht nach rechts noch 2px frei läßt, damit der nicht direkt an die Border angrenzt und hab das so gemacht: <span style="padding-right: 2px;">FAHRTENBERICHT</span>, allerdings wird das nicht gemacht. Kann ich das noch anders hinbekommen?

Danke und Gruß,

Dirk

 

[Voadi]

Hi,

Also um da ein wenig Abstand reinzubringen kann man da wie du schon sagtest mit padding-right arbeiten oder halt margin-right. Du solltest das Ganze nur dann demenstsprechen in die Passenden Divs eingeben. Damit du auch den ganzen Text Formatierst und nicht nur die Überschrift .

Wenn du das Machst musst du aber logischer weise auch den Wrapper Div vergrössern da der ja die Beiden Floatenden Divs umspannt und zusammenhält. Könnte dann im Extrem Beispiel so aussehen ...

<div id="wrapper" style="width:576px;"> 
<div class="font" style="width: 400px; text-align: left; padding-top: 5px; float:left;  margin-right: 25px;">

Hoffe du kannst damit was anfangen.

mfg Voadi

 

[DirkHo]

Hi Voadi,

danke! Mit margin-left hab ich's hinbekommen...

Danke und Gruß,

Dirk