content <section>
Fixed Footer / multi Hintergrundbilder Template
Handmade by monorom - HTML5 Template CSS2/CSS3.
Dowload FREE Template
Mit der CSS-Eigenschaft position:fixed
können Seitenelemente an einer bestimmten Position im Fenster fixiert werden, sie scrollen nun nicht mit dem übrigen Seiteninhalt weg. Platzsparend ist dieses Layout nicht :) . Mit position:fixed
können auch andere Design-Elemente fix positioniert werden. Siehe auch Intensivstation / Fixed Menu.
Fixe Footer mit Hintergrundbildern
Das Element wird mit position: fixed; aus dem Fluss des HTML genommen und liegt über den static positionieren Elementen. Fixe Positionen brauchen eine Breitenangabe. Wenn keine angegeben wird ist das Element so breit wie der Inhalt. Für die Position wird der Wert left, right, top, botton, center
angegeben. Wertangaben können auch exakt in Pixeln oder dynamisch EM definiert werden.
footer {
background:
url(2.png) repeat-x -20% bottom,
url(1.png) repeat-x 90% bottom,
url(3.png) repeat-x 20% bottom;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
}
Der Footer
hat drei Hintergrundbilder. Siehe Intensivstation / CSS3 / Multi Hintergrundbilder. Ein div
definiert und zentriert die innere Textbreite. Fixe Positionen brauchen eine Breitenangabe, wird keine angegeben, ist das Element so breit wie der Inhalt. Für die Position wird der Wert in Pixeln oder EM definiert.
.inner{ margin: 0 auto;
padding: 20px;
max-width: 1000px;
min-width:700px; }
Inhalt
Die container
zentriert das Layout. Die content
Breite wird mit min-width
und max-width
angegeben, dadurch wird das Layout dynamisch.
#container { max-width: 1000px; min-width:700px; margin:10px auto; background-color: #eee; } section#content { background-color: #fff; padding: 20px 20px 130px; }
reset first
Am einfachsten lassen sich Positionen errechnen wenn alle Abstände auf "0" gesetzt sind.
Mit CSS3 box-sizing
kann bestimmt werden, dass der Innenabstand padding
und der Rand border
in width
und height
eingerechnet wird. Siehe auch intensivstation.ch/css3/box-sizing/
* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
This work is licensed under a Creative Commons License.