Moin zusammen - habe leider beim umgang mit float noch ein paar schwierigkeiten.
Hier mein Code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
{tmpl_var name='title'}
</title>
<link rel="stylesheet" type="text/css" href="skin/1/css.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style=" width: 778px; margin: 0px; padding: 0px; ">
<div style=" clear: both; float: left; width: 150px; height: 14px; font-size: 10px; ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 10px; height: 14px; background-color: #ECF0F4; ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 14px; height: 14px; background-image: url(skin/1/images/textbereich_ol.gif); ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; height: 14px; width: 590px; background-image: url(skin/1/images/textbereich_oben.gif); ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: right; width: 14px; height: 14px; background-image: url(skin/1/images/textbereich_or.gif); ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" clear: both; float: left; width: 150px; height: 14px; font-size: 10px; ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 10px; height: auto; min-height: 14px; background-color: #ECF0F4; ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 14px; height: auto; min-height: 14px; background-image: url(skin/1/images/textbereich_links.gif); ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 590px; height: auto; min-height: 14px; background-color: #FFFFFF; ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: right; width: 14px; height: auto; min-height: 14px; background-image: url(skin/1/images/textbereich_rechts.gif); ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" clear: both; float: left; width: 150px; height: 14px; font-size: 10px; ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 10px; height: 14px; background-color: #ECF0F4; ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 14px; height: 14px; background-image: url(skin/1/images/textbereich_ul.gif); ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: left; width: 590px; height: 14px; background-image: url(skin/1/images/textbereich_unten.gif); ">[img]skin/1/images/1px.gif[/img]</div>
<div style=" float: right; width: 14px; height: 14px; background-image: url(skin/1/images/textbereich_ur.gif); ">[img]skin/1/images/1px.gif[/img]</div>
</div>
</body>
</html>
Alles anzeigen
und wie es im IE (oben) und FF (unten) ausschaut:
[Blockierte Grafik: http://tests.daoc-ds.de/bilder/ibplanet/screenshot3.jpg]
Vorschläge, wie ich das hinbekommen könnte?
wichtig wär es mir, dass sich die höhe der divs die den Rahmen darstellen automatisch an die höhe des inneren divs anpasst, geht das irgendwie?
Ich weiß, das ganze würde sich bequem über tabellen lösen lassen, diese möchte ich an dieser Stelle aber nicht verwenden.
Grüße,
Modula