Hallo _sj_,
Du gibst dem #wrapper eine Breite von 100%, weist den Inhaltsementen/Modulen die gewünschte Kachelfarbe zu.
Die Inhalte bekommen ihrerseit eine Hintergrundfarbe und werden zentriert.
Zur Verschaulichung folgender Code:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#wrapper{width:100%;}
#header{background-color:#009900}
#footer{background-color:#FF99FF}
#topnav{height:100px;width:480px;margin:0 auto;background-color:#0099CC}
.slider{background-color:#0066CC}
.imgslider{width:480px;height:150px;margin:0 auto;background-color:#00FF66}
.article{background-color:#66CC99}
.text{width:480px;height:200px;margin:0 auto;background-color:#00CCCC}
.footerelement{width:480px;height:50px;margin:0 auto;background-color:#FFCC00}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="inside">
<div id="topnav">NAVIGATION </div>
</div>
</div>
<div id="container">
<div id="main">
<div class="inside">
<div class="slider">
<div class="imgslider">SLIDER</div>
</div>
<div class="article">
<div class="text">CONTENT</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="inside">
<div class="footerelement">FOOTERELEMENT</div>
</div>
</div>
</div>
</body>
</html>
Lesezeichen