DIV´s bleiben oben nicht an Position

whiterussian · 7. September 2006

Ich hab ein Layout mit drei DIV gemacht. Das erste als Container und die beiden anderen für den Inhalt.
Dabei hab ich das Problem, dass die beiden Inhalte oben nicht fix stehen bleiben, sondern bei kleinem Browserfenster oder bei verkleinern dessen der text oben nicht mehr zu lesen ist.
Wie kann ich machen, das oben fix ist und nach unten zum srollen trotzdem funktioniert?

Hier der Code:

PHP:

<!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=iso-8859-1" />
<title>bleib oben nicht stehen ...</title>
<style type="text/css">

body, html{ height: 100%;}

body{ margin: 0;
      padding: 0;
	  font-family: "Georgia", Times New Roman, Times, serif;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	color: #000;
	text-decoration: none;
	background-color: #b3b3b3;
}
	
	.contDiv{
	position: absolut;
	width: 100%;
	height: 100%;
	border: 0px;
	z-index: 1;
}

.abskonzeptDiv{
	position: absolute;
	width: 840px;
	left: 50%;
	margin-left: -420px;
	height: 950px;
	top: 50%;
	margin-top: -420px;
	background-color: #999;
	text-align: center;
	z-index: 2;
}

#konzeptcontent{
	position: absolute;
	width: 780px;
	left: 30px;
	margin-left: 0px;
	height: 800px;
	top: 120px;
	margin-top: 0px;
	background-color: #fff;
	text-align: center;
	z-index: 7;
}

</style>
</head>

<body>

<div class="contDiv">
  <div class="abskonzeptDiv">blablabla

		<div id="konzeptcontent">oleoleole 0:13</div>
		
		</div>
		</div>

</body>
</html>

Maik · 7. September 2006

Der Text verschwindet beim Verkleinern des Browserfensters in den nicht-sichtbaren Bereich, da Du das DIV .abskonzeptDiv mit den folgenden Angaben in der Vertikalen "außermittig" positioniert hast:

Code:

.abskonzeptDiv{
    position: absolute;
    width: 840px;
    left: 50%;
    margin-left: -420px;
    height: 950px;
    top: 50%;
    margin-top: -420px;
    background-color: #999;
    text-align: center;
    z-index: 2;
}

Und da das DIV #konzeptcontent in diesem DIV eingebettet ist, wird es beim Verkleinern des Viewports ebenfalls in den nicht-sichtbaren Bereich verschoben.

Von daher wirst du die Positionierung bzw. den Wert für die obere Position nochmal überdenken müssen.

Die modernen Browser unterstützen den Wert fixed für die CSS-Eigenschaft position, sodaß ein Element beim Seitenscrollen nicht mitläuft. Für den IE benötigst Du dann aber einen Workaround, da er position:fixed nicht unterstützt.

DIV´s bleiben oben nicht an Position

whiterussian

Erfahrenes Mitglied

Maik

Neue Beiträge