preachie: Positionierung mehrerer DIVs mit automatischer Größenanpassung

Beitrag lesen

SELF-Forum

Positionierung mehrerer DIVs mit automatischer Größenanpassung

preachie
– Informationen zu den Bewertungsregeln

Nur nochmal als Beispiel wie es aussehen soll, so würde ich das ganze mittels Tabellen lösen, aber Tabellen sind ja angeblich "böse" :)

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>  
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
		<link rel="stylesheet" type="text/css" href="l-o-s3.css" />  
	</head>  
	<body>  
		<table class="mainTable">  
			<tr>  
				<td class="tl">TL</td>  
				<td class="tc">TC</td>  
				<td class="tr">TR</td>  
			</tr>  
			<tr>  
				<td class="ml">ML</td>  
				<td class="mc">MC</td>  
				<td class="mr">MR</td>  
			</tr>  
			<tr>  
				<td class="bl">BL</td>  
				<td class="bc">BC</td>  
				<td class="br">BR</td>  
			</tr>  
		</table>  
	</body>  
</html>

CSS:

html {  
	height: 100%;  
}  
  
body {  
	margin: 0px;  
	padding: 0px;  
	background-color: black;  
	width: 100%;  
	height: 100%;  
}  
  
table.mainTable {  
	width: 100%;  
	height: 100%;  
	padding: 0px;  
	margin: 0px;  
	border-spacing: 0px;  
}  
  
td.tl {  
	background-color: red;  
}  
  
td.tc {  
	background-color: green;  
	width: 1000px;  
}  
  
td.tr {  
	background-color: blue;	  
}  
  
td.ml {  
	background-color: yellow;  
	height: 600px;  
}  
  
td.mc {  
	background-color: white;  
	width: 1000px;  
	height: 600px;  
}  
  
td.mr {  
	background-color: aqua;	  
	height: 600px;  
}  
  
td.bl {  
	background-color: maroon;  
}  
  
td.bc {  
	background-color: purple;	  
	width: 1000px;  
}  
  
td.br {  
	background-color: silver;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln