Zum Inhalt springen

Frage zu DIV und Float

Erstellt am 9. Mai 2005 · 3 Antworten · letzte Antwort am 9. Mai 2005

Tags: Frage

Torsten.​E ·

Hat zwar nichts direkt mit TYPO3 zu tun, aber da es ja alle benutzen kann mir sich er jemand helfen.

Code-Schnippsel:

<div style="float: left; text-align:center;"><img scr="bild1.jpg" alt="" /><br>1. Text</div>
<div style="float: left; text-align:center"><img src="bild2.jpg" alt="" /><br>2. Text</div>

Das bewirkt ja, dass die Bilder nebeneinander angezeigt werden und der Text unter den Bilder zum Bild zentriert wird.

Laut Beschreibung soll aber für jedes DIV die Breite angegeben werden. Diese wies ich aber nicht genau, da sie ja abhängig von der Bildgröße und Textlänge sind. Gibt es dazu eine andere Lösung ?

Torsten.E

jweiland ·

Laut Beschreibung soll aber für jedes DIV die Breite angegeben werden.

Wo steht das? Bei floats muss nur für das umgebende DIV unbedingt eine Breite angegeben werden.

Jochen Weiland

Torsten.​E ·

Umgebende DIV

Du meinst also, praktisch einen "Rahmen" um die ganze Sache mit einem DIV legen, der aber mit einer Breite angegeben sein muß ?

Torsten.

<STYLE TYPE="text/css">
<!--
.bildlinks  { float:left; padding-right:20px; text-align:center;}
.bildmitte { float:left; padding-right:20px; text-align:center;}
.bildrechts { float:left; text-align:center;}
-->
</STYLE>

<div style="position: absolute; top: 120px; left: 177px;" class="header_layout1">###UEBERSCHRIFT###</div>

<div style="position: absolute; top: 170px; left: 177px;"><img src="###BILD_START###" height="300" name="anzeige"></div>

<div style="position: absolute; top: 170px; left: 680px;" class="text">###TEXT###</div>

<div style="position: absolute; top: 520px; left: 177px;  float: left;">
<div class="bildlinks"><a href="#" onClick="document.anzeige.src='###BILD1_GR###'"><img src="###BILD1_KL###" height="70" border=1></a>&nbsp;<br><font class="text">###BILD1_TXT###</font></div>
<div class="bildmitte"><a href="#" onClick="document.anzeige.src='###BILD2_GR###'"><img src="###BILD2_KL###" height="70" border=1></a>&nbsp;<br><font class="text">###BILD2_TXT###</font></div>
<div class="bildmitte"><a href="#" onClick="document.anzeige.src='###BILD3_GR###'"><img src="###BILD3_KL###" height="70" border=1></a>&nbsp;<br><font class="text">###BILD3_TXT###</font></div>
<div class="bildmitte"><a href="#" onClick="document.anzeige.src='###BILD4_GR###'"><img src="###BILD4_KL###" height="70" border=1></a>&nbsp;<br><font class="text">###BILD4_TXT###</font></div>
<div class="bildmitte"><a href="#" onClick="document.anzeige.src='###BILD5_GR###'"><img src="###BILD5_KL###" height="70" border=1></a>&nbsp;<br><font class="text">###BILD5_TXT###</font></div>
<div class="bildmitte"><a href="#" onClick="document.anzeige.src='###BILD6_GR###'"><img src="###BILD6_KL###" height="70" border=1></a>&nbsp;<br><font class="text">###BILD6_TXT###</font></div>
<div class="bildrechts"><a href="#" onClick="document.anzeige.src='###BILD7_GR###'"><img src="###BILD7_KL###" height="70" border=1></a>&nbsp;<br><font class="text">###BILD7_TXT###</font></div>
</div>