Div Boxen untereinander

**Palorux** · 14.07.2005 21:21

hallo leute,

so ich habe da ein problem.
ich möchte gerne im folgenden design das die boxen " content und menu " genau so breit zusammen sind wir die die " header " box.
sie solten auch genau unter der " header " box sein und den selben abstand links und rechts wie die " header " box haben.

hier mal der code, was muss ich da noch ändern daran ?

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Design Test</title>

<style type="text/css">
body {
	margin:20px;
	padding:0px;
	background-color:#787878;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-top: 5px;
}
#header {
	height: 100px;
	margin: 10px;
	background-color: #E5DDC8;
	padding: 10px;
}

#menu {
  float:right;
  width:165px;
  height:300px;
  padding:0px;
  margin-left:5px;
  background-color:#E5DDC8;
}
#content {
  float:right;
  width:78%;
  margin:0px;
  padding:0px;
  background-color:#E5DDC8;
}
p {
  font-family:Verdana,Arial,Helvetica,sans-serif; color:#000000;
  font-size:75%;
  padding:15px;
}
p.back {
  clear:right;
  text-align:center;
}
a {
  color:white;
  font-weight:600;
}
pre {
  font-size:12px;
  padding:15px;
}
body,td,th {
	color: #000000;
}
</style><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<div id="header">Header Logo</div>
<div id="menu"><p>Das Menü</p></div>

<div id="content">
<pre>content DIV
</pre>
</div>

</body></html>

wen ihr fehler findet bitte sagt sie mir ....

danke auch schon mal für eure hilfe im vorraus mal .... danke dafür...

**steffenk** · 14.07.2005 21:33

wenn Du das willst, dann musst Du alle in einen Container packen, die divs machen sich dann so breit wie der Container breit ist.

Code:

<div id="container">
   <div id="header"></div>
   <div id="nenu"></div>
   <div id="content"></div>
</div>

**Palorux** · 14.07.2005 21:59

irgend wie will das nett klappen ?

HTML-Code:

<style type="text/css">
body {
	margin:20px;
	padding:0px;
	background-color:#787878;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-top: 5px;
}
#wrapper {
	margin: 0px;
	padding: 0px;
	width: 100%;
}

#header {
	height: 100px;
	margin: 10px;
	background-color: #E5DDC8;
	padding: 10px;
}

#menu {
  float:right;
  width:165px;
  height:300px;
  padding:0px;
  margin-left:5px;
  background-color:#E5DDC8;
}
#content {
  float:right;
  width:78%;
  margin:0px;
  padding:10px;
  background-color:#E5DDC8;
}
p {
  font-family:Verdana,Arial,Helvetica,sans-serif; color:#000000;
  font-size:75%;
  padding:15px;
}
p.back {
  clear:right;
  text-align:center;
}
a {
  color:white;
  font-weight:600;
}
pre {
  font-size:12px;
  padding:15px;
}
body,td,th {
	color: #000000;
}
</style><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<div id="wrapper">

<div id="header">Header Logo</div>

<div id="menu"><p>Das Menü</p></div>

<div id="content">Conten Div Box</div>
</div>
</body></html>

**steffenk** · 14.07.2005 22:25

also auf die Schnelle

Code:

<style type="text/css">
body {
	margin:5px;
	padding:0px;
	background-color:#787878;
	
}
#wrapper {
	margin: 0;
	padding: 0;
	width: 100%;
}

#header {
	height: 100px;
	background-color: #E5DDC8;
	padding: 10px;
}

#menu {
  float:right;
  width:165px;
  height:300px;
  padding:0px;
  margin-left:5px;
  background-color:#E5DDC8;
}
#content {
  margin:0px;
  padding:10px;
  background-color:#E5DDC8;
}
p {
  font-family:Verdana,Arial,Helvetica,sans-serif; color:#000000;
  font-size:75%;
  padding:15px;
}
p.back {
  clear:right;
  text-align:center;
}
a {
  color:white;
  font-weight:600;
}
pre {
  font-size:12px;
  padding:15px;
}
body,td,th {
	color: #000000;
}
</style><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<div id="wrapper">

<div id="header">Header Logo</div>

<div id="menu"><p>Das Menü</p></div>

<div id="content">Content Div Box</div>
<br style="clear:all;"
</div>
</body></html>

Di inneren Comtainer kriegen kein margin. Ausserdem hattest Du ein paar widersprüchliche Angaben gemacht

**LANtastic** · 15.07.2005 00:23

Eine andere Alternative wäre das es, dem Body ein Padding zu geben (10px), damit alle Elemente entsprechend 10px vom Rand haben.
Ausserdem gibts du dem header noch ein margin-bottom:10px, damit die unteren beiden Elemente 10px vom Header entfernt sind.
Danach floatest du einfach die entsprechenden Elemente nach Links oder nach rechts.
Ansonsten definierst du weder für den content, noch für das Menü ein margin.

Da du nun aktiver Nutzer des Boxmodels bist solltest du dir direkt angewöhnen mit dem richtigen Doctype zu arbeiten. Ob Strict oder nicht, bleibt dir überlassen, hauptsache eines mit URI.

Sieh dir einfach den Quellcode an:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Design Test</title>
<style type="text/css"> 
body { margin:0px; padding:10px; background-color:#787878;} 
p { font-family:Verdana,Arial,Helvetica,sans-serif; color:#000000; font-size:75%; padding:15px; } 
p.back { clear:right; text-align:center; } a { color:white; font-weight:600; } 
pre { font-size:12px; padding:15px; } 
body,td,th { color: #000000; } 


#header { 
	height: 100px;  
	background-color: #E5DDC8; 
	padding: 10px; 
	margin-bottom:10px;
	} 
#menu { 
	float:right; 
	width:165px; 
	height:300px; 
	padding:0px; 
	background-color:#E5DDC8; 
	} 
#content { 
	float:left; 
	width:78%; 
	padding:0px; 
	background-color:#E5DDC8; 
	} 
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="header">Header Logo</div>
<div id="menu">
  <p>Das Menü</p>
</div>
<div id="content">
  <pre>content DIV </pre>
</div>
</body>
</html>

**321** · 15.07.2005 01:00

@LANtastic: Das verhauts aber gründlich, wenn das Fenster schmaler gemacht wird.

**LANtastic** · 16.07.2005 20:02

Gerade gesehen, sry.

Dann mach mal aus der der Klasse "content" mal dieses hier :

Code:

#content { margin-right: 22%; padding:0px; background-color:#E5DDC8; }

Wobei mir der Sinn der % Angabe immer noch nicht ganz in den Kopf will.
Je nachdem wie weit man das Fenster macht, überlappen sich die beiden Spalten dann nämlich. Spätestens wenn (100-7

22% kleiner als 165px sind.
Aber nun ja, darum gings ja nicht.

**LANtastic** · 16.07.2005 20:05

Ich glaube ich habe nun was an den Augen.
Bei mir scheint der Abstand des Contents im FF ca. 13 Pixel zu sein, wobei ich keine Ahnung habe, woher die 3 Pixel kommen
Im IE sind sicherlich sogar 20 Pixel, wobei ich auch da keine Ahnung habe woher die kommen.

Kann das einer bestätigen ?

**LANtastic** · 18.07.2005 00:49

Neuer Versuch, nun klappt es auch.
Muss irgendwas mit dem float zu tun haben .... komisches Verhalten ?!?!?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Design Test</title>
<style type="text/css">
body { margin:0px; padding:10px; background-color:#787878;} p { font-family:Verdana,Arial,Helvetica,sans-serif; color:#000000; font-size:75%; padding:15px; } p.back { clear:right; text-align:center; } a { color:white; font-weight:600; } re { font-size:12px; padding:15px; } body,td,th { color: #000000; } 

#header { position:relative;height: 100px; background-color: #E5DDC8; padding: 10px;} 
#menu { float:right; width:165px; height:300px; padding:0px; background-color:#E5DDC8;margin-top:10px;}
#content { float:left;width:78%;padding:0px; background-color:#E5DDC8;margin-top:10px;} 

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="header">Header Logo</div>
<div id="menu"><p>Das Menü</p></div>
<div id="content"><p>content DIV </p></div>
</body>
</html>

zur Startseite vom TP

Thema: Div Boxen untereinander

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Div Boxen untereinander

Aktive Benutzer

Aktive Benutzer