Tag 15

Display none

• wenn Sachen nicht erscheinen sollen:
  <style type="text/css">
  .wegdamit {display: none;}
  </style>
• gut für Stylesheets für den Druck
• es verschwinden Sachen

Übungsaufgabe:
eigene Navigation erstellen mit Hilfe von Listen
abhängige Selektoren bedenken, folgender Style-Block :

<style type="text/css">
* {margin: 0; padding: 0;}
 #navi {
position: absolute; Listenpunkte sind über dem Fließtext
width: 732px;} Feste Breite, im Fenster verschieben sich die Reiter nicht!

#navi, ul {
list-style: none; Listenicons verschwinden
font-family: Verdana;
font-size: 14px;}

#navi li ul {
display: none;} Listenunterpunkte werden unsichtbar
 
#navi li:hover ul {
display: block;} Listenunterpunkte erscheinen, wenn man mit der Maus drüber geht

#navi li {
float: left; oberer Navigation
width: 120px;
margin-right: 2px;}

#navi li a {
text-decoration: none; Keine Unterzeile bei den links
display: block; Kindelement wird Elternelement!
background: #FF7F00;
margin-right: 2px;
padding: 6px;
text-align: center;}

#navi li a:hover { mit Maus drüber gehen
color: #fff;
background: #FF0000;}


#navi li ul li {       abhänige Selektoren!!!
font-size: 12px;}   Listenunterpunkte werden kleiner
</style>

Absolutes Positionieren
... position: absolute;} =  Ebenen liegen übereinander, wie im Photoshop
... left: 50px; top: 50px;} = Ebenen kann man verschieben
... left: 0; top: 0;} = links oben
... right: 0px; top: 0px;} = rechts oben
 ... right: 0px; bottom: 0px;} = rechts unten
... left: 0px; bottom: 0px;}= links unten

Reihenfolge wird bestimmt

1. durch die Reihenfolge im HTML
2. oder durch z-index: 1;  z-index: 2; z-index: 3;
3. eine Ebene mit einem hohen z-Index liegt immer drüber
4.  z. B. z-index: 999; wenn eine Ebene über allem liegen soll
5.  z-index funktioniert nur, wenn position: absolute; vergeben wurde
6. z-index: -1% Ebene nach hinten legen, man kommt nicht mehr ran!!! Wie Wasserzeichen!
7.  position: relative; im Elternelement (also übergeordnet!) angeben, dann bezieht sich alles dann darauf
   
8.  es gibt eine x-, eine y- und eine z-Ebene
9. position: fixed; Position ist fest, beim Scrollen beleibt das Element stehen
   
10. Es gibt  position: absolute; | position: relative; | position: fixed;

overflow: auto;
es kommen Scrolling-Bars, wo sie notwendig sind (wenn zuviel Text im div ist)

overflow: scroll; es kommen überall Scrolling-Bars
overflow: hidden; verbirgt die Scrolling-Bars (z. B. overflow-y: hidden; )