Tag 13

Listen und CSS

• Liste (ul/ol) wie Boxmodell behandeln
• li-Element: der Punkt ist außen
• durch margin und padding können die  Abstände in der Liste bearbeitet werden
• es können auch Bilder als Listenpunkte eingesetzt werden: z. B.
  ul, .totenkopf   {list-style-image: url(totenkopf.gif) Pfad;}
  ol, .bluemchen {list-style-image: url(red_flower.png) Pfad;}
• und diese (und andere Werte) können positioniert werden{ ... list-style-position: inside;}
• ul {list-style: none;} Listenzeichen ausstellen!
• ul eine Breite geben = ul {width: 150px;}
• {display: block;} macht das Inline zum Blockelement! wichtig!
• Unordered List: square, circle, disc, none  
• Ordered List: decimal, lower-roman, upper-roman, decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha, none

   

 3 Navigationsleisten mit Hilfe von Listen:

     

Navigation horizontal

<style type="text/css">
*{margin: 0; padding: 0; border: 0;} 

body {font-family: Calibri;}

ul {list-style: none;}

li {float: left; width: 100px; background-color: #ccc; margin-right: 3px;}

a {display:block; background: #000; color:#FF0; text-decoration: none; padding: 6px; text-align: center; border-bottom: 6px solid #fff;}

a:hover {border-bottom: 6px solid red;}

#inhalt {clear: both; padding-top: 1.5em;}

</style>

 

Navigation vertikal links

<style type="text/css">
*{margin: 0; padding: 0; border: 0;} 

body {font-family: Calibri;}
ul {list-style: none;}
li {float: left; width: 100px; background-color: #ccc; margin-right: 3px;}
a {display:block; background: #000; color:#FF0; text-decoration: none; padding: 6px; text-align: center; border-bottom: 6px solid #fff;}
a:hover {border-bottom: 6px solid red;}
#inhalt {padding-left: 170px;}

</style>

 

Navigation vertikal rechts

 <style type="text/css">
*{margin: 0; padding: 0; border: 0;} 

body {font-family: Calibri;}
ul {float: right; width: 150px; list-style: none;}
li {background: #ccc; margin: 0 0 3px 0}
a { background: #FF0; display: block;  text-decoration: none; color:#000; padding: 6px; border-left: 6px solid #000;}
a:hover {color: #FFO; background: #000; boder-left: 6px solid #FFO;}
#inhalt {padding-right: 170px;}

</style>

 

Pseudoklassen für <a>
schön für interaktive Navigationen/siehe oben
Reihenfolge immer: link, visited, hover, active
kein Leerzeichen zwischen z. B. a:link !!

• a:link { } alle a-Elemente mit dem Attribut href
• a:visited { }besuchte Links
• a:hover { } mit der Maus über den Link       Spannend!
• a:active { } im Moment des Klicks

 Menüs häufig auf der rechten Seite

Bei Pseudoklassen handelt es sich um einfache Selektoren, die ein Element dann ansprechen, wenn es eine bestimmte Eigenschaft besitzt. So lassen sich zum Beispiel Elemente auswählen, über denen sich gerade der Mauszeiger befindet oder Elemente, die das erste Kindelement eines anderen Elementes sind.

CSS Hintergrundbilder

• mit {background-image: url(milka.jpg);}
• füllt die Breite der Website komplett mit Bildern wenn man nur die Höhe angibt height: 90px;
• bei einem Bild bitte Höhe und Breite angeben width: 90px;/height: 90px;
•  CSS-Hintergrundbilder werden nicht gedruckt!! Nur für dekorative Elemente!

 Background-repeat:

1. .hgb {background-repeat: repeat;}
2. .hgb2 {background-repeat: no-repeat;}
3. .hgb3 {background-repeat: repeat-x;}
4. .hgb4 {background-repeat: repeat-y;}
5. repeat-y fixed  = Fixiert das Bild, scrollt nicht mit
6. repeat-y fixed right = das Bild wird auf die rechte Seite positioniert

 Background-position:

1. .hgb {background-position:10px; 0;}
2. .hgb2 {background-position:30px 30px}
3. .hgb3 {background-position: right bottom;}
4. .hgb4 {background-position: center center;}
5. .hgb5 {background-position: -100px 0;}
6. .hgb6 {background-position: center -16px;} 

Background-attachment:
{background-attachment: fixed;}  Bild scrollt nicht mehr mit! Sehr schön!

Background-size: 

• {background-size: 50% 50%;} Bildgröße 50% 
• {background-size: 50% auto;} Hintergrundgröße 50% Bild paßt sich an
• {background-size: 100% auto;} Hintergrundbild paßt sich an
• {background-size: 100% cover;} Hintergrundbild paßt sich an so üblich!
• {background-size: 100% contain;} Hintergrundbild paßt sich vollständig an/wird aber zerschossen