Umstellung von table auf div - div-höhe?

[MichaelRadke]

Hallo,

ich möchte gerne mal durchgehend mit DIVs coden, aber stoße immer wieder auf dieses Problem …

Bei einer Tabelle mit drei Spalten (es geht um eine grafische Umrandung) funktioniert dies:

<td style="width:27px; background-image:url(/images/200504/left.gif); background-repeat:repeat-y;">&nbsp;</td>

Wenn ich das in DIV umsetze …:

<div style="clear:left; width:27px; background-image:url(/images/200504/left.gif); background-repeat:repeat-y; float:left;">&nbsp;</div>

… dann funktioniert das nicht. Das background-repeat funktioniert nicht, wahrscheinlich weil die Höhenangabe fehlt (?).


Kompletter alter Code:

print <<<ENDE
<table style="margin:0px; padding:0px;" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr valign="top">
<td style="width:27px; background-image:url(/images/200504/left.gif); background-repeat:repeat-y;">&nbsp;</td>
<td style="width:724px; padding-right:15px;">
ENDE;
        if (file_exists("{$_SERVER["DOCUMENT_ROOT"]}/{$_SESSION["bereich"]}/{$_SESSION["content"]}.php"))
                include ("{$_SERVER["DOCUMENT_ROOT"]}/{$_SESSION["bereich"]}/{$_SESSION["content"]}.php");

print <<<ENDE
</td>
<td style="width:10px; background-image:url(/images/200504/right.gif); background-repeat:repeat-y;">&nbsp;</td>
</tr>
</table>

Kompletter neuer Code:

<div style="width:27px; height:21px; float:left;"><img src="/images/200504/lo.gif" width="27" height="21"></div>
<div style="width:346px; height:21px; margin:0px; float:left; background-image:url(/images/200504/top.gif); background-repeat:repeat-x;">Eintr&auml;ge f&uuml;r {$_SESSION["t
<div style="width:17px; height:21px; float:left;"><img src="/images/200504/ro2.gif" width="17" height="21"></div>
<div style="width:10px; height:21px; float:left;"><img src="/images/200504/ro1.gif" width="10" height="21"></div>

<div style="clear:left; width:27px; background-image:url(/images/200504/left.gif); background-repeat:repeat-y; float:left;">&nbsp;</div>
<div style="width:363px; float:left;">aaa<br>&nbsp;bbb</div>
<div style="width:10px; background-image:url(/images/200504/right.gif); background-repeat:repeat-y; float:left;">&nbsp;</div>

<div style="clear:left; width:27px; height:11px; float:left;"><img src="/images/200504/lu.gif" width="27" height="11"></div>
<div style="width:363px; height:11px; margin:0px; float:left;"><img src="/images/200504/bottom.gif" height="11" width="363"></div>
<div style="width:10px; height:11px; margin:0px; float:left;"><img src="/images/200504/ru.gif" width="10" height="11"></div>

Danke für die Mithilfe …!
Gruß aus Hamburg,

Michael Radke

 

[Maik]

Zur besseren Übersicht solltest du deine Code-Angaben mit den Codetags formatieren.

Wenn du keine Höhe für das DIV definierst, wird das Hintergrundbild durch den DIV-Inhalt wiederholt - und wenn der Inhalt nur ein erzwungenes Leerzeichen   ist, dann gibt es auch nichts zu wiederholen ;-]

 

[Gumbo]

Wenn das Layout eine fixe Breite hat, könntest du auch mit so genannten Faux Columns arbeiten.