content <section>

Fixed Menu 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. Mit position:fixed können auch andere Design-Elemente fix positioniert werden. Siehe Template Intensivstation / Fixed Footer / Fixed Header.

Fixes Menu

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.

nav {
    font-size: 16px;
    color:#fff;
    background: #888;
    width: 250px; 
    position: fixed;
    left: 0;
    top: 0;
    height:100%;
    padding:20px;
    }

Das Menu links wird mit position: fixed;code> aus dem Fluss des HTML genommen und liegt über den static positionieren Elementen. Fixe Positionen brauchen immer 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.

Inhalt

Die section#content hat einen Aussenabstand (margin), in der Breite der Navigation, zum linken Rand. Die content Breite wird mit min-width und max-width angegeben, dadurch wird das Layout dynamisch.

section#content {
    padding: 20px;
    margin:0 0 0 250px;
    background-color: #fff;
    max-width: 800px;
    min-width:550px;
    }

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.