<div> Elemente pixelgenau in einer Seite ausrichten

rookiestripes · 12. August 2004

Hallo an alle,

möchte gerne bei meinem neuen Seitenlayout eine <div> Box mit dem Inhalt haben und darüber einen Banner, welchen ich auch in eine <div> Box plaziert habe .

Für die Inhalts Box habe ich folgendes Style vergeben:

#Content {
position:absolute;
left:40%;
width:740px;
margin-top:10%;
margin-left:-266px;
text-align:left;
padding:15px;
border:1px dotted #333;
background-color:#fff;
}

Für den Banner habe ich folgenden Style festgelegt:

#banner {
position:absolute;
left:40%;
width:763px;
margin-top:20px;
margin-left:-265px;
text-align:left;
border:1px solid #fff;
background-color:#fff;
}

Ich hätte nun gerne das der Banner 20px Abstand zum oberen Rand hat und das die Inhaltsbox einen Abstand von 5 px zum Banner hat und sich zwar deren Höhe verändert, wenn mehr Inhalt hingeschrieben wird, aber nicht die Positionierung. Außerdem habe ich festgestellt, daß die border: dotted Eigenschaft im IE manchmal total komisch ausschaut. Im Mozilla Firefox bleibt sie gleich.

Wäre für Hilfe dankbar

Liebe Grüße
rookie

Gumbo · 12. August 2004

Hm, etwa soetwas:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
	body {
		margin: 0 auto;
		text-align: center;
	}
	#wrap {
		width: 772px;
		text-align: left;
	}
	#banner {
		margin: 20px 0 0 0;
		background: #f80;
	}
	#content {
		margin: 5px 0 0 0;
		background: #08f;
	}
  </style>
</head>



<body>
<div id="wrap">
  <div id="banner">banner</div>
  <div id="content">content</div>
</div>
</body>
</html>

<div> Elemente pixelgenau in einer Seite ausrichten

rookiestripes

Grünschnabel

Gumbo

Erfahrenes Mitglied

Neue Beiträge