CammaBlog » CSS http://www.camma.ch die Informationsschnippsel-Sammlung eines Streifzugs durch die Weiten des Webs Fri, 27 May 2011 04:36:16 +0000 en hourly 1 CSS: Layouts mit 100% Höhe http://www.camma.ch/2010/01/12/css-layouts-mit-100-hoehe/ http://www.camma.ch/2010/01/12/css-layouts-mit-100-hoehe/#comments Tue, 12 Jan 2010 05:27:10 +0000 Lukas Blatter http://www.camma.ch/?p=1488 Wenn das Layout einer Seite 100% hoch sein muss, gibt es einiges was beachtet werden muss. Als Vorlage kann dieses Example genommen werden.

Vorbereitung des Stylesheets:

html,body {
    margin:0;
    padding:0;
    height:100%; /* braucht es für die min-height des Containers */
}

Danach muss für die gesamte Höhe ein Container erstellt werden:

div#container {
    position:relative; /* braucht es für die Footer Position*/
    margin:0 auto; /* Zentriert die Seite (nicht in IE5) */
    width:750px;
    height:auto !important; /* normale Browser */
    height:100%; /* IE6: setzt dies wie min-height um*/
    min-height:100%; /* normale Browser */
}

Der Head und der Content können nun normal platziert werden. Damit nun der Footer der Seite immer am unteren Rand klebt, muss folgendes im Stylesheet definiert werden:

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* Positioniert dies ganz unten */
}

Related Posts:

Twitter It!]]> http://www.camma.ch/2010/01/12/css-layouts-mit-100-hoehe/feed/ 0 Tutorial CSS Boxen http://www.camma.ch/2009/01/18/tutorial-css-boxen/ http://www.camma.ch/2009/01/18/tutorial-css-boxen/#comments Sun, 18 Jan 2009 12:57:23 +0000 Lukas Blatter http://www.camma.ch/?p=194 CSS Boxen sind immer wieder mal ein Buch mit sieben Siegeln, vorallem wenn man diese nicht häufig programmiert. Auf der Seite von the noodle incident sind die CSS Boxen mit Beispielen dargestellt. Der entsprechende Code wird mit einem Klick angezeigt.

Little Boxes Tutorial

Little Boxes Tutorial

Zum Tutorial von the noodle incident

Related Posts:

Twitter It!]]> http://www.camma.ch/2009/01/18/tutorial-css-boxen/feed/ 2