Hi!
Ich hab n Problem. Ich will mir ein Layout erstellen, dass von oben nach unten wie folgt aufgebaut sein soll: Header, Menü, Inhalt.
In ein div "body" werden die anderen drei (Header, Menü, Inhalt) per include-Befehl nacheinander eingefügt.
Der Header ist eingefügt und es funktioniert auch, das div "body" passt sich dem Header an, alles wunderbar. Wenn ich jetzt allerdings die anderen zwei divs (Menü, Inhalt) einfüge, passt sich das div "body" nicht mehr an.
Wenn ich die float in den CSS-Dateien entferne, dann funktioniert des wieder. Des muss doch aber auch anders gehen, ich will dieses Layout nämlich später mit mehrspaltigen Inhalt benutzten, dann brauch ich den float Befehl in der CSS-Datei.
dass ist mein HTML-Code (nur der body):
und der CSS-Code des Headers:
vom Menü:
und vom Inhalt:
Ihr könnt euch die Seite auch direkt anschauen, dann seht ihr selbst was passiert:
Wäre super, wenn mir jemand helfen kann!
Ich hab n Problem. Ich will mir ein Layout erstellen, dass von oben nach unten wie folgt aufgebaut sein soll: Header, Menü, Inhalt.
In ein div "body" werden die anderen drei (Header, Menü, Inhalt) per include-Befehl nacheinander eingefügt.
Der Header ist eingefügt und es funktioniert auch, das div "body" passt sich dem Header an, alles wunderbar. Wenn ich jetzt allerdings die anderen zwei divs (Menü, Inhalt) einfüge, passt sich das div "body" nicht mehr an.
Wenn ich die float in den CSS-Dateien entferne, dann funktioniert des wieder. Des muss doch aber auch anders gehen, ich will dieses Layout nämlich später mit mehrspaltigen Inhalt benutzten, dann brauch ich den float Befehl in der CSS-Datei.
dass ist mein HTML-Code (nur der body):
Code:
<body>
<div id="body">
<div class="ro_body">
<div class="lo_body">
<div class="ru_body">
<div class="lu_body">
<div class="inhalt_body">
<?php include ("../HTML/inh_header.html"); ?>
<?php include ("../HTML/inh_menu.html"); ?>
<?php include ("../HTML/inh_main.html"); ?>
</div>
</div>
</div>
</div>
</div>
</div>
</body>und der CSS-Code des Headers:
Code:
#header {
width: 100%;
margin: auto;
position: relative;
}
.ro_header {
background: url(../images/grafik/header_ro.png) top right no-repeat;
}
.lo_header {
background: url(../images/grafik/header_lo.png) top left no-repeat;
}
.ru_header {
background: url(../images/grafik/header_ru.png) bottom right no-repeat;
}
.lu_header {
background: url(../images/grafik/header_lu.png) bottom left no-repeat;
}
.inhalt_header {
margin: auto;
padding: 0px 0px 0px 0px;
text-align: center;
height: 200px;
background-position: center 30px;
color: #FFCC00;
}vom Menü:
Code:
#menu {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
heigth: 30px;
background-color: #333399;
position: relative;
}und vom Inhalt:
Code:
#main {
width: 100%;
height: 600px;
margin: 0px auto 0px auto;
padding: 0px;
background-color: #aa9900;
float: left;
clear: both;
}
.mainbox_ro {
background: url(../images/grafik/box_ro.png) top right no-repeat;
}
.mainbox_lo {
background: url(../images/grafik/box_lo.png) top left no-repeat;
}
.mainbox_ru {
background: url(../images/grafik/box_ru.png) bottom right no-repeat;
}
.mainbox_lu {
background: url(../images/grafik/box_lu.png) bottom left no-repeat;
}
.mainbox_inhalt {
margin: 0;
padding: 0px 20px 20px 25px;
min-height: 500px;
text-align: justify;
color: #333300;
}
.mainbox_header {
margin: 10px auto 10px auto;
padding: 0px 10px 0px 10px;
text-align: center;
top: 10px;
}Ihr könnt euch die Seite auch direkt anschauen, dann seht ihr selbst was passiert:
Wäre super, wenn mir jemand helfen kann!
