Frage zum Box-Modell

R

Razer3k

Mitglied
Hallo zusammen,
ich versuche gerade mittels HTML und CSS eine Webseite zu erstellen.

Für das Layout wollte ich gerne das Box-Modell nutzen.

Mein bisheriger Code sieht wie folgt aus, das Problem ist das die graue Box unter der roten Box ist obwohl sie daneben sein soll.

CSS:
Code: 
@charset "UTF-8";
/* CSS Document */


#center{	
			margin:1em auto;
			width:601px;
			height:480px;
	}

#header {
			position:relative;
			left:0x;
			top:0px;
			width:600px;
			height:40px;
			background-color: #ff0;
		}
		
#menu {
			position:relative;
			left:0px;
			top:0px;
			width:225px;
			height:200px;
			background-color: #f00;
		}
		
#content {
			position:inherit;
			left:0px;
			top:0px;
			width:375px;
			height:200px;
			background-color: #999;
		}
		
#footer {
			position:relative;
			left:0px;
			top:0px;
			width:600px;
			height:40px;
			background-color: #ffff00;
		}


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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>08.06.2011</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div id="center">
			<div id="header">header</div>
			<div id="menu">menu</div>
			<div id="content">content</div>
			<div id="footer">footer</div>
		</div>
	</body>
</html>
 
Razer3k hat gesagt.:
... , das Problem ist das die graue Box unter der roten Box ist obwohl sie daneben sein soll.
Zum Vergrößern anklicken....
Hallo,

das ist das normale Verhalten der Blockelemente entsprechend ihrer Anordnung im HTML. Diese Anordnung wird durch die relative Positionierung in deinem CSS nicht gestört.

Wenn du "menu"- und "content"-Block nebeneinander anordnen willst, dann könntest du beispielsweise den "content"-Block im "center"-Block rechts unterhalb des "header" absolut positionieren. Damit das funktioniert, müsste der "center"-Block relativ positioniert werden, alle anderen Elemente könnten im normalen Fluss bleiben:
CSS: 
#center {
  position: relative;
  margin: 1em auto;
  width: 601px;
  height: 480px;
}
#header {
  width: 600px;
  height: 40px;
  background-color: #ff0;
}
#menu {
  width: 225px;
  height: 200px;
  background-color: #f00;
}
#content {
  position: absolute;
  right: 0;
  top: 40px;
  width: 375px;
  height: 200px;
  background-color: #999;
}
#footer {
  width: 600px;
  height: 40px;
  background-color: #ff0;
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück