✔ Volle Hoehe ausnutzen, im IE ok, im FF nicht ok

Shinzo · 16. Dezember 2006

Hallo Community,

vielleicht kann mir einer einen Tipp geben, ich habe folgendes Problem, beim IE habe ich erreeicht, dass der vertikale Balken 100% der Höhe einnimmt, beim FireFox wird er jedoch nicht verlängert trotz "min-height:100%" Angabe.

Hier der CSS-Teil:

Code:

html, body {
	background-color: #0000FE;
	color: #cecece;
	font-size: 14px;
	font-family: Verdana;
	height: 100%;
}
body {
	margin: 0; 
	padding: 0;
}
#main {
	margin:auto;
	width: 835px;
	font-size: 12px;
	border: 0px;
	position: relative;
	min-height:100%;
}
* html #main {
	height: 100%;
	}

#vertikal {
	min-height:100%;
	top: 0px;
	left:625px;
	width:65px;
	background-color: #FE0000;
	position:absolute;
	
}
* html #vertikal {
	height: 100%;
	}
#horizontal {
	width:100%;
	top: 165px;
	height:65px;
	background-color: #FE0000;
	position:absolute;
}

#header {
	width: 630px;
	height: 120px;
	position: absolute;
	left: 0px;
	top: 50px;
	background-color: #000000;
	padding:10px;
	text-align:left;
}
#content {
	width: 630px;
	position: absolute;
	left: 0px;
	top: 205px;
	background-color: #000000;
	padding:10px;
	text-align:left;
}
#navi {
	width: 150px;
	position: absolute;
	left: 665px;
	top: 50px;
	background-color: #000000;
	padding:10px;
	text-align:left;
}

Und hier der HTML-Code:

Code:

<!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>
<link rel="STYLESHEET" type="text/css" href="style.css" />
<title>Seitename</title>
</head>
<body>
<div id="horizontal"></div>
<center>
<div id="main">
<div id="vertikal">ss</div>
<div id="header">Header Fixed!</div>
<div id="content">Content!</div>
<div id="navi">Navigation</div>
</div>
</center>
</body>
</html>

Hoffe jemand kann mir verraten wieso der vertikale Balken im FireFox nicht verlängert wird.

Danke im Voraus,
MfG Shinzo

Maik · 16. Dezember 2006

Nimm mal das proprietäre <center>-Tag aus dem HTML-Code, denn daran stört sich anscheinend der Firefox-Browser:

Code:

<body>
<div id="horizontal">horizontal</div>
<center>
<div id="main">
<div id="vertikal">ss</div>
<div id="header">Header Fixed!</div>
<div id="content">Content!</div>
<div id="navi">Navigation</div>
</div>
</center>
</body>

und erweiter den Selektor #horizontal mit der left-Eigenschaft, damit der IE das Element am linken Fensterrand positioniert:

Code:

#horizontal {
        width:100%;
        top: 165px;
        left: 0;
        height:65px;
        background-color: #FE0000;
        position:absolute;
}

Shinzo · 16. Dezember 2006

Ich danke Dir vielmals. Hab schon alles ausprobiert, woran es manchmal doch liegt.

Maik · 16. Dezember 2006

Der Teufel steckt manchmal im Detail, gell?

Shinzo · 2. Januar 2007

Hmm, hab mal wieder ein kleines Problemchen, und zwar sieht man unter

http://vcheats.de/htmlcss/ das momentane Ergebnis.

Der vertikale rote Balken geht nur bis zu einer bestimmten Höhe. Und zwar der Browser-Contenthöhe. Wenn ich unter #main height und min-height durch overflow:hidden; ersetze, dann funktioniert nichts mehr.

Mein Ziel ist es, dass der rote vertikale Balken bis ganz nach unten geht.

Geht das überhaupt?

CSS:

Code:

html, body {
	background-color: #0000FE;
	color: #cecece;
	font-size: 14px;
	font-family: Verdana;
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
}
#main {
	margin:auto;
	width: 835px;
	font-size: 12px;
	border: 0px;
	position: relative;
	min-height:100%;
}
* html #main {
	height: 100%;
	}

#vertikal {
	min-height:100%;
	top: 0px;
	left:625px;
	width:65px;
	background-color: #FE0000;
	position:absolute;

}
* html #vertikal {
	height: 100%;
	}

#horizontal {
	width:100%;
	top: 165px;
	left:0px;
	height:65px;
	background-color: #FE0000;
	position:absolute;
}

#header {
	width: 630px;
	height: 120px;
	position: absolute;
	left: 0px;
	top: 50px;
	background-color: #000000;
	padding:10px;
	text-align:left;
}
#content {
	width: 630px;
	position: absolute;
	left: 0px;
	top: 205px;
	background-color: #000000;
	padding:10px;
	text-align:left;
}
#navi {
	width: 150px;
	position: absolute;
	left: 665px;
	top: 50px;
	background-color: #000000;
	padding:10px;
	text-align:left;
}

HTML:

Code:

<!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" xml:lang="de" lang="de"><head>


<link rel="STYLESHEET" type="text/css" href="style.css"><title>Seitename</title></head><body>
<div id="horizontal"></div>
<div id="main">
<div id="vertikal"></div>
<div id="header">Header Fixed!</div>
<div id="content">Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br></div>

<div id="navi">Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br>Content!<br></div>  </div>  


</body></html>

Danke im Voraus

Maik · 2. Januar 2007

Ich hänge meinen Lösungsvorschlag als ZIP-Datei an, in dem ich mit eine Hintergrundgrafik einsetze, die die Hintergrundfarben der beiden Spalten (roter Balken / Navi) enthält, durch eine vertikale Bildwiederholung die Spalten erzeugt, und sie unabhängig von ihrem Inhalt immer gleich hoch sind.

Shinzo · 3. Januar 2007

Danke für deine Mühe, das mit dem Hintergrundbild kann man auch besser lösen, denn so fehlt wieder ein Teil, wenn der Content-Bereich länger ist.

Außerdem soll man auf Bilder vollkommen verzichten, was anscheinend bei diesem Fall garnicht möglich ist.

Danke trotzdem.

Maik · 3. Januar 2007

Ohne eine entsprechende Hintergrundgrafik lässt sich das Vorhaben aber nicht umsetzen, und wenn noch ein Teil im Gesamtkonzept fehlt, dann weißt du jetzt anhand meiner Vorlage, was zu tun ist

✔ Volle Hoehe ausnutzen, im IE ok, im FF nicht ok

Shinzo

Mitglied

Maik

Shinzo

Mitglied

Maik

Shinzo

Mitglied

Maik

Anhänge

Shinzo

Mitglied

Maik

Neue Beiträge