Chumper
Erfahrenes Mitglied
Hallo,
Ich habe ein Problem mit dem Layout einer Htmlseite:
Ich habe drei Spalten, die mit height:100% und width:100% ausgestattet sind, diese sollen alle über den ganzen Bildschirm gehen, machen sie auch.
Damit das auch funkltioniert wenn der Content Länger ist, habe ich die Hintergrundfarbe
des Bodys und html auf die Farben der Menüs links und rechts gesetzt.
Klappt auch alles.
Problem: Wenn das Menü links, oder das Menü rechts länger sind als 100% und man dann die seite runterscrollt, hört der Content nach 100% auf und dann folgt die Hintergrundfarbe der Menüs... Das ist unschön:
Doctype und sowas alles ist natürlich drin, dient nur zur Veranschauung.
So... wie lasse ich die Divs mitwachsen und die Höhe es höchsten Div-tags annehmen.
Bzw. Wie löse ich das Problem von oben ohne Nachteile zu erhalten?
Keine Tabellen, keine Frames.
Bitte nur Css und wenn möglich nur valide sachen.
Das Design soll so variabel wie möglich sein.
Bitte um Anregungen oder Lösungen
Mfg Nils
Ich habe ein Problem mit dem Layout einer Htmlseite:
Ich habe drei Spalten, die mit height:100% und width:100% ausgestattet sind, diese sollen alle über den ganzen Bildschirm gehen, machen sie auch.
Damit das auch funkltioniert wenn der Content Länger ist, habe ich die Hintergrundfarbe
des Bodys und html auf die Farben der Menüs links und rechts gesetzt.
Klappt auch alles.
Problem: Wenn das Menü links, oder das Menü rechts länger sind als 100% und man dann die seite runterscrollt, hört der Content nach 100% auf und dann folgt die Hintergrundfarbe der Menüs... Das ist unschön:
HTML:
<html>
<head>
<title>Jaja Titel</title>
</head>
<body>
<div id="Topc">
<div class="Logo">###LOGO###</div>
<div class="Header">###HEADER###</div>
</div>
<div class="Menu">###NAV_OBEN###</div>
<div class="Navi_links">###NAV_LINKS###</div>
<div class="Navi_rechts">###NAV_RECHTS###</div>
<div class="Content">###CONTENT###</div>
</body>
</html>
Code:
html {
padding: 0 0 0 0;
background-color:#ff8066;
}
body {
margin: 0 0 0 0;
height:100%;
background-color:#ff8066;
}
div#Topc {
width:100%;
height:89px;
background-color:#ff8066;
}
div.Logo {
width:227px;
height:89px;
background-color:#fff;
float:left;
}
div.Header {
height:89px;
width:700px;
background-color:#ff8066;
float:left;
}
div.Menu {
clear:left;
width:100%;
height:24px;
background-color:#ca0602;
text-align: center;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
color:#fff;
}
div.Navi_links {
float:left;
height:100%;
width:227px;
background-color:#ff8066;
}
div.Content {
height:100%;
background-color:#fff;
}
div.Navi_rechts {
float:right;
height:100%;
width:200px;
background-color:#ff8066;
}Bzw. Wie löse ich das Problem von oben ohne Nachteile zu erhalten?
Keine Tabellen, keine Frames.
Bitte nur Css und wenn möglich nur valide sachen.
Das Design soll so variabel wie möglich sein.
Bitte um Anregungen oder Lösungen
Mfg Nils
