Bini's Unterrichtsmaterial
Quellcode von id_09.css
/* id_09.css 09.2009 bi
demo-css zu id-selectoren*/
* {margin:0px; padding:0px; border:0px;} /* der Universalselector Stern steht fuer alle Selctoren
durch diese Definition erzwingt man aehnliches Verhalten verschiedener Browser */
html {height:100.3%;} /* durch die minimal groessere Ausgabe der ganzen Seite erscheint auf jeden Fall eine Bildlaufleiste */
body {text-align: center;} /* der gesamte BodyInhalt wird zenrtiert dargestellt */
div#container {width:760px; /* die Breite des Containers wird festgelgt */
margin: 20px auto; /* der obere/untere-Abstand wird mit 20px festgelgt, li/re-Positionierung erfolgt automatisch */
text-align: left;} /* die Textausrichtung wird wieder auf links gesetzt */
div#header {background: #F8F8FF; padding:10px; text-align:center;}
div#nav {background: #DEDEFF;}
div#nav ul {padding:4px 20px 6px 40px;} /* durch das voranstellen von div#nav wirken diese Einstellungen nur auf ul in div#nav - Textabstaende*/
div#nav li {display: inline;
margin-right: 10px;} /* die Listenelemente erscheinen und in einer Zeile, also nebeneinander */
div#content {background: #F5F5FF;
overflow:auto;} /* die Groesse des Contentbreichs wird an die Groesse des Inhalts angepasst */
div#maintext {padding: 20px; /* der Abstand des Textes vom Rand der Box wird festgelegt */
width:560px;} /* die Breite der Box wird festgelegt */
div#menu { float: right; /* die Box schwimmt an den rechten Rand des uebergeordneten Elements > Container */
width: 135px; /* die Breite der Box wird festgelegt */
padding: 10px;} /* der Abstand des Textes vom Rand der Box wird festgelegt */
div#menu ul {list-style-type:none;} /* es werden keine Aufzaehlungspunkte vorangestellt */
div#menu ul ul {margin-left:10px;} /* unterlisten werden eingerueckt */
div#footer {background: #9999FF; padding:5px; text-align:center;}
.defoat{clear:both;} /* das Beenden des Float Breichs bewegt auch den IE6 dazu das Layout korrekt anzuzeigen */