10. Tag HTML 22.10.2014

HTML/CSS
Ralf Herbst


Im HTML-Editor im Projekt HTML-Lexikon:
index.html
wichtig: liegt im Hauptverzeichnis: HTML-Lexikon, nie in sites!
Bezeichnung: index.html (weltweit gültig!)

Hintergrundbild für die website (CSS3): ist nicht kopierbar! (NO: Bild speichern unter...)

Bildauflösung: 2560x1440 Pixel f+r 27-Zoll, 1920x1200 für 24-Zoll

anlegen im head-Bereich:
<style type="text/css">
body { font-family: Arial, Helvetica; font-size: 100%; color: #FFF;
background-image: url(img/bg.jpg); = Pfad Bild und gekachelt
background-repeat: no-repeat; = nicht gekachelt, dh. Bild passt sich an
no-repeat = kein Kacheln, repeat-x = horizontal Kachelung,  repeat-y = vertikale Kachelung
background-position: center 0px; = Positionierung des Bildes durch 2 Werte:oben und links
(background-color: farbe; = dem Hintergrund eine Farbe geben)
background-attachment: fixed; = fixiert den Hintergrund und die Elemente (zB. Text, Video etc.) srollen, und bei scroll bewegt sich der Hintergrund mit
(background-size: contain;  = contain bei eher kleineren quadrischen Bildern in Verbindung mit background-color)
background-size: cover; = besser bei großen Bildern und passt sich an, wichtig für Handy
-moz-background-size: cover;  = für Gecko-basierte Browser wie Firefox oder Seamonkey-webkit-background-size: cover; = für Webkit-basierte Browser wie Safari, iCab, Konqueror, Google Chrome
(-ms-background-size: cover;  = für Microsoft)
(-o-background-size: cover;   = für Operabrowser)
}
dann die Attribute für die anderen Elemente festlegen:
* { }
h1 { }
h2 { }
a { ... outline: transparent; } = um die Umrandung des Links mit Punkten wegzunehmen
a:visited { color: farbe; } = um den geklickten Link farbit zu kennzeichnen
a:hover { ... text-shadow: 0 0 10px farbe; } = um den Link eine Schattierung zu geben
ol { .... list-style-type: decimal-leading-zero; } = um die Zahlen der Listen auf Null zusetzen, dh. ohne Nummerung
und die Positionierung der einzelnen Listen mit genauen Angaben:
ap-Div = Divcontainer mit absoluten Positionen
#liste1 { position: absolute; left: 50px; top: 120px; width: 220px;
               background-color: rgba(255,255,255,.5); = Werte aus css3generator, ohne Abstand
              z-index: 1000; = Überlappung der Elemente, ab 1000 wegen lt IE 8
               border-radius: 50px 20px;
               -webkit-box-shadow: 0 0 20px 10px rgba(255,255,255,.5);
               box-shadow: 0 0 20px 10px rgba(255,255,255,.5);  }
#liste2 {  position: absolute;  right: 50px; top: 120px; width: 250px;
               background-color: rgba(255,255,255,.5); z-index: 1001;
               border-radius: 20px 50px;
               -webkit-box-shadow: 0 0 20px 10px rgba(255,255,255,.5);
               box-shadow: 0 0 20px 10px rgba(255,255,255,.5); }
#liste3 {  position: absolute; left: 50%; bottom: 50px; width: 400px; height: 400px;
               margin-left: -200px; background-color: rgba(255,255,255,.5); z-index: 1002;
               border-radius: 200px;
               -webkit-box-shadow: 0 0 20px 10px rgba(255,255,255,.5);
               box-shadow: 0 0 20px 10px rgba(255,255,255,.5); }
#liste3 h2 { margin: 50px 0 80px 115px; }
 #liste3 ol { margin-left: 55px; }


</style>


EMPFEHLUNGEN:

css-cafe.de/CSS3

css3generator 

Gecko-Browser

WebKit-Browser

Opera-Browser