Problem bei CSS Layout
- Ersteller Mike1410
- Erstellt am
T
toney
Guest
Dreispaltiges Layout mit Kopf- und Fußzeile <- schau dir den Quelltext an und packe die 3 Spalten-divs in ein Wrapper-div mit max-/min-width und margin: 0 auto; für die Zentrierung
NetAktiv
Senior HTML'ler
Noch besser gefällt mir meine Seite Mühlespiel - Startseite, die ich mit guter Hilfe von hier formatiert habe. Da ist zusätzlich die Fußzeile immer unten, egal wie wenig oder viel Seiteninhalt es gibt.
T
toney
Guest
Da sind aber Header und Footer nicht auf 100% des Fensters ;)
Ja aber bei diesem Beispiel ist leider der rechte DIV Container auch fix, soll aber fluid sein. Weil das hatte ich schon.
Aber trotzdem Danke
NetAktiv
Senior HTML'ler
Nein, das wollte ich auch nicht. Ich wollte dich nur darauf hinweisen, dass es nett sein kann, den Footer wirklich am Window-Ende zu platzieren und nicht am Textende. Beim Footer müsste ich nur das derzeitige width:940px durch width:100% ersetzen. Den Header dann noch an den Anfang verschieben, aber wie gesagt, das war nicht die Planung.
achtelpetit
Neues Mitglied
Little Boxes kennst Du? Die beste Seite über CSS, die ich kenne.
Das neue »Little Boxes« - als Buch und Videotraining - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)
Das neue »Little Boxes« - als Buch und Videotraining - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)
mermshaus
Senior HTML'ler
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>New</title>
<style type="text/css">
/**
* new clearfix
*
* @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
*/
.clear:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clear { zoom: 1; } /* IE6 */
*:first-child+html .clear { zoom: 1; } /* IE7 */
body {
margin: 0;
padding: 0;
}
.header, .footer {
background: red;
}
.content {
min-width: 800px;
max-width: 1200px;
border: 10px solid palevioletred;
margin: 0 auto;
}
.col1 {
width: 100px;
background: blue;
float: left;
}
.fluid {
margin-left: 100px;
background: green;
}
.fluid .col2 {
width: 40%;
background: cornflowerblue;
float: left;
}
.fluid .col3 {
width: 60%;
background: lemonchiffon;
float: left;
}
</style>
</head>
<body>
<div class="header">.header</div>
<div class="content clear">
<div class="col1">.col1</div>
<div class="fluid clear">
<div class="col2">.col2</div>
<div class="col3">.col3</div>
</div>
</div>
<div class="footer">.footer</div>
</body>
</html>