✔ Brauche Hilfe beim erstellen eines css Layouts

Status
Nicht offen für weitere Antworten.
J

janosch

Erfahrenes Mitglied
HI!

Ich bin grad dabei mir ein wenig CSS beizubringen. Dazu möchte ich mir eine Homepage Programmieren deren Layout wie folgt aussieht:

1. Header ( FIX )
2. Navigation ( FIX )
3. Content ( Variabel )
4. Footer ( FIX )

Diese 4 Bereiche habe ich als DIV Elemente in der HTML Datei hinterlegt. Wobei diese 4 DIV Element wiederum in einem DIV Container sind welches die Breite der Seite angeben soll. Den Contaner DIV habe ich mit einem schwarzen Rahmen versehen damit man schnell sieht was ich meine.

Jedoch habe ich jetzt ein Problem und zwar „springen“ die Bereiche
Content und Footer aus dem unterem Bereich des Container DIVs heraus.

Hmmm .... das ist ein wenig schlecht zu erklären am besten ihr schaut es euch mal selbst an (Siehe Anhang).

Wie stelle ich es jetzt an, dass eben dies nicht passiert? Was muss ich ändern?


mfg
Janosch

Anhang
 
Das wurde hier im Forum schon einige male besprochen, einfach mal im CSS Forum nach footer suchen.

Aber hier einfach mal die Methode wie ich sie meistens nutze wenn ich ein ähnliches Layout mache. Mußt du eigentlich nur noch die breiten anpassen.


HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Layout</title>
<style type="text/css">
* {
    margin:0;
    padding:;
}
html, body {
    height:100%;
}
#wrapper {
    position:relative;
    margin:auto auto;
    width:600px;
    min-height:100%;
    _height:100%;    /* das ist jetzt ein dreckiger Hack für den IE, solltest du ändern (Conditional Comments */
    background:#eee;
}
#header {
    height:100px;
    background:#999;
}
#nav {
    height:30px;
    background:#ddd;
}
#content {
    margin:0 0 50px 0;
    overflow:hidden;
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    background:#999;
}
</style>
</head>

<body>
<div id="wrapper">
    <div id="header">header</div>
    <div id="nav">nav</div>
    <div id="content">
        content content content content content content content
    </div>
    <br> <!-- das break brauchst du damit das margin-bottom von #content greift -->
    <div id="footer">footer</div>
</div>
</body>
</html>



Gruß
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück