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

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

  1. Fixe Tabellengrößen mit CSS in ALLEN Browsern

    henman
    – Informationen zu den Bewertungsregeln

    hallo,

    Das Ganze basiert auf einer Tabelle und beinhaltet für den Content ein "div".

    ich geb dir nen Tip, schmeiß die Tabelle(n) weg und verbrenn sie.
    Warum nicht so (quick'n'dirty):

    <img src="bild.gif" alt="Header">

    <div style="float:left;">Navigation</div>

    <div>Inhalt</div>

    <div>Footer</div>

    Welche Elemente du nimmst und ob du sie brauchst, sei mal dahingestellt. Fakt ist aber, dass du dir viel Code sparst und der Quelltext leichter verstehbar, auch wenn du ihn monatelang mal nicht angeschaut hast, ist.

    grüße,
    Hendrik

    --
    "Sir! We are surrounded!" - "Excellent! We can attack in any direction!"
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Fixe Tabellengrößen mit CSS in ALLEN Browsern

      Hendrik
      – Informationen zu den Bewertungsregeln

      ich geb dir nen Tip, schmeiß die Tabelle(n) weg und verbrenn sie.
      Warum nicht so (quick'n'dirty):

      <img src="bild.gif" alt="Header">

      <div style="float:left;">Navigation</div>

      <div>Inhalt</div>

      <div>Footer</div>

      Klingt ja gar nicht mal so blöd ;)

      Scheint so, als ob die einfachste Lösung mal wieder die beste ist.
      Ich werde das mal probieren und dann gucken wir mal weiter.

      Auf jeden Fall schon mal vielen Dank!!!

      Gruß
      Hendrik

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln