XHTMLforum - Einzelnen Beitrag anzeigen

mantiz · #7 (**permalink**) 07.02.2010, 13:20

Nochmal Hi

Danke für Deine Mühe, aber ich glaube Du missverstehst mich etwas.

Hier mal ein Testcase, wie meine aktuelle Lösung aussieht.
Scheint bisher in sämtlichen Browsern zu funktionieren, zumindest bei denen, wo ich getestet habe (IE6, IE7, IE8, Opera 7.54, Opera 10, Netscape 7.1, FF3).
Klar, die Spalteninhalte müssen noch besser positioniert werden.

Leider funktionieren nur jeweils 1-3 Zoomstufen in beide Richtungen, je nach Browser, da sich irgendwann die Grafiken überlappen, aber ich denke, ich lasse es erstmal so.

Ein Test bei Browsershots.org hat mich allerdings überrascht, ziemlich viele Browser kommen mit "display:table" klar.
Probleme gibt's anscheinend nur bei IE, Dillo und Avant.
Dillo ist mir egal, IE könnte man notfalls mit nicht gleichhohen Boxen versorgen, Avant kenne ich gar nicht, muss ich erstmal nach suchen.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		<title>[ untitled ]</title>
		<style type="text/css">
body {
	background: #333;
	margin:     2em auto;
	width:      45em;
}

.three-boxes {
	clear: both;
}

.three-boxes .upper-left {
	background: url('3boxen_links_oben.gif') 33% 0 no-repeat;
	border-left: 1px solid #65686B;
	zoom: 1;
}

.three-boxes .upper-right {
	background: url('3boxen_rechts_oben.gif') 66% 0 no-repeat;
	border-right: 1px solid #65686B;
	padding-top: 1px;
	zoom: 1;
}

.three-boxes .lower-left {
	background: url('3boxen_links_unten.gif') 33% 100% no-repeat;
	zoom: 1;
}

.three-boxes .lower-right {
	background: url('3boxen_rechts_unten.gif') 66% 100% no-repeat;
	overflow: hidden;
	padding:    1%;
	zoom: 1;
}

.three-boxes .box1 {
	float: left;
	padding-left: 1%;
	width: 30%;
	background: #FFF;
}

.three-boxes .box2 {
	margin-left: 35%;
	width: 30%;
	background: #FFF;
}

.three-boxes .box3 {
	float: right;
	width: 30%;
	background: #FFF;
}

		</style>
	</head>
	<body>
		
<div class="three-boxes">
	<div class="upper-left">
		<div class="upper-right">
			<div class="lower-left">
				<div class="lower-right">
					<div class="box1">
						blub
					</div>
					
					<div class="box2">
						blub<br />
						blub<br />
					</div>
					
					<div class="box3">
						blub
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

	</body>
</html>