Hendrik: Fixe Tabellengrößen mit CSS in ALLEN Browsern

Beitrag lesen

SELF-Forum

Fixe Tabellengrößen mit CSS in ALLEN Browsern

Hendrik
– Informationen zu den Bewertungsregeln

Hallo zusammen!

Ich habe da ein kleines Problem.
Ich bastel gerade an einem Layout für ne Page und komme nicht weiter.
Das Ganze basiert auf einer Tabelle und beinhaltet für den Content ein "div".

Bis hier ist ja auch alles in Ordnung. Allerdings weigern sich alle Browser die mittleren Tabellenzellen in der definierten Breiten zu zeigen. Wahrscheinlich Liegt die Lösung direkt vor mir und ich finde sie einfach nicht. Der mittlere Bereich ist noch mit einem "colspan" und einem "rowspan" versehen. Die beiden mittleren Bereiche sind die Navigation und der Content.
Die Navigation soll eine Breite von 140px haben und der Content soll 660px breit sein.

Ich poste euch einfach mal den Code und nen Link, unter dem ihr euch das Ganze mal angucken könnt. Ich denke es wird schnell klar worum es geht. Vielen Dank schon mal im Voraus.

CSS:

  
body  
{  
	background-color: #000000;  
	background-image: url("grafik/background.png");  
	background-position: center;  
	background-repeat: repeat;  
	padding: 0;  
	margin: 0;  
	font-family: Arial;  
	font-size: 12px;  
	color: #CCCCCC;  
}  
#container_table  
{  
	top: 1px;  
	bottom: 1px;  
	width: 100%;  
	height: 99%;  
	position: absolute;  
	table-layout: fixed;  
}  
#container  
{  
	width: 800px;  
	height:  650px;  
	border-color: #666666;  
	border-style: solid;  
	border-width: 1px;  
	border-spacing: 0px;  
	position: relative;  
	table-layout: fixed;  
}  
#header  
{  
	width: 800px;  
	height: 150px;  
	background-color: #000000;  
	background-image: url("grafik/cx40_logo_neu_webhead.png");  
	background-position: left;  
	background-repeat:  no-repeat;  
}  
#navi  
{  
	width: 140px;  
	height: 400px;  
	background-color: #000000;  
	color: #BB0000;  
	font-weight: bold;  
	text-decoration: underline;  
}  
#sep_up  
{  
	width: 660px;  
	height: 25px;  
	background-color: #000000;  
	background-image: url("grafik/seperator_up.png");  
	background-position: left;  
	background-repeat:  no-repeat;  
}  
#sep_dwn  
{  
	width: 660px;  
	height: 25px;  
	background-color: #000000;  
	background-image: url("grafik/seperator_dwn.png");  
	background-position: left;  
	background-repeat:  no-repeat;  
}  
  
#cont  
{  
	width: 660px;  
	height: 400px;  
	max-height: 400px;  
	min-height: 400px;  
	background-color: #000000;  
	font-family: Arial;  
	font-size: 8pt;  
	color: #CCCCCC;  
}  
td#cont div  
{  
	width: 100%;  
	height: 100%;  
	overflow: scroll;  
	overflow-x: hidden;  
	overflow-y: auto;  
}  
#foot  
{  
	width: 800px;  
	height: 50px;  
	background-color: #000000;  
	text-align: center;  
	font-family: Arial;  
	font-size: 10px;  
	color: #CCCCCC;  
}

Die index.html:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
	<title>.:CX40 - Official Home:.</title>  
	<link rel="stylesheet" type="text/css" href="styles.css">  
</head>  
  
<body>  
	<table id="container_table">  
		<tr>  
			<td>  
				  
				<table id="container" align="center">  
					<tr>  
						<td colspan="2" id="header">&nbsp;</td>  
					</tr>  
					<tr>  
						<td rowspan="3" id="navi" valign="top">  
							|[NAVIGATION]|  
						</td>  
						<td id="sep_up">  
							&nbsp;  
						</td>  
					</tr>  
					<tr>  
						<td id="cont">  
							<div>  
							Hier kommt der Content rein...  
							</div>  
						</td>  
					</tr>  
					<tr>  
						<td id="sep_dwn">&nbsp;</td>  
					<tr>  
					<tr>  
						<td colspan="2" id="foot">(c) 2009<br>by CX40</td>  
					</tr>  
				</table>  
				  
			</td>  
		</tr>  
	</table>  
					  
</body>  
  
</html>

Eine kleine Voransicht bekommt ihr hier: KLICK!

Beitrag melden
–
Informationen zu den Bewertungsregeln