Ich erkläre es dir von Anfang an.
Ein Html Dokument wird mit einem Doctype eingeleitet, damit alle Browser sich gleich verhalten und wissen das jetzt HTML kommt und nicht etwa SVG oder XML oder Kaffeebohnen.
wir schreiben
[HTML][/HTML]
Jetzt kommt noch das Tag für das Dokument in dem Fall HTML und das wir einen Header haben. Danach müssen wir den Zeichensatz angeben, warum - nun in China, Thailand und auf dem Mars werden andere Schriften verwendet und manche schrieben auch von rechts nach links, doch das gibt es.
Also schreiben wir
[HTML]
[/HTML]
Es folgt der Titel der Seite, der uns im Browser oben in der Fensterleiste angezeigt wird.
[HTML]
Seitentitel steht oben im Fenster
[/HTML]
Eine Seitenbeschreibung ist zwar nicht notwendig, wird aber von Suchmaschinen gern gesehen und als Ausschnit bei der Suche angezeigt.
Da es nur Vorteile bringt, schreiben wir das mit rein.
[HTML]
Seitentitel steht oben im Fenster
[/HTML]
Nun brauchen wir noch Stilangaben für unsere späteren Elemente, damit der Browser nicht für jedes Element sein eigenes Süppchen kocht. Das kann man auslagern und an dieser Stelle den Verweis zur CSS-Datei angeben, aber wir wollen da ja ein wenig mit rumspielen, daher ist es besser alles im Blick zu haben und wir schreiben daher unsere Stilangaben mit ins HTML-Dokument.
[HTML]
Seitentitel steht oben im Fenster
[/HTML]
Das waren jetzt alle Angaben die in den Kopfbereich(Head) kommen, jetzt noch zumachen und mit dem Element Body weiter machen.
[HTML]
Seitentitel steht oben im Fenster
[/HTML]
Alle Elemente die noch offen sind schliessen und wir haben das Grundgerüst unserer Seite.
[HTML]
Seitentitel steht oben im Fenster
[/HTML]
Jetzt wird unsere Seite schon angezeigt und alles was wir in das Element body schreiben wird auch irgendwie angezeigt. Warum irgendwie, na weil wir ja noch keine Stilangaben angegeben haben und somit der Browser seine Stilangaben verwendet, von denen wir nicht wissen wie sie ausschauen. soll uns auch nicht interessieren, da wir die Browser durch unsere Angaben einfach zwingen werden, das so anzuzeigen wie wir das wünschen. Also los gehts.
Wir wollen erst mal das der Hintergrund einen schönen Farbverlauf bekommt.
Ich nehme mal deinen Farbverlauf. Also rein ins CSS für das Element body.
[HTML]
Seitentitel steht oben im Fenster
body {
background: -moz-linear-gradient(top, #6A96FF, #12266D); //für Mozilla Firefox
background: -o-linear-gradient(top, #6A96FF, #12266D); //für Opera
background: linear-gradient(top, #6A96FF, #12266D);
background: -webkit-gradient(linear, left top, left bottom, from(#6A96FF), to(#12266D));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‚#6A96FF‘, endColorstr=‚#12266D‘);
}
[/HTML]
Wenn wir uns das jetzt ansehen, stellen wir fest, dass der Verlauf nicht über die ganze Seite geht und noch schlimmer, jeder Browser was anderes anzeigt. Der IE sogar noch einen Abstand von oben.
Das werden wir denen schon noch abgewöhnen, wo kommen wir hin unseren schönen Verlauf so zu verschandeln.
Wir setzen also erstens alle Abstände auf Nullwert, sind ja nur margin(Aussenabstände) und padding(Innenabstände) und zwar für alle Elemente.
Das machen mir mit dem tollen Universalattribut Stern *.
Ausserdem teilen wir den Browsern mit, dass wir den Verlauf gern über die ganze Seite hätten. Also Seitenhöhe 100% sein soll.
[HTML]
Seitentitel steht oben im Fenster
*{
margin:0;
padding:0;
}
body {
height:100%;
background: -moz-linear-gradient(top, #6A96FF, #12266D); //für Mozilla Firefox
background: -o-linear-gradient(top, #6A96FF, #12266D); //für Opera
background: linear-gradient(top, #6A96FF, #12266D);
background: -webkit-gradient(linear, left top, left bottom, from(#6A96FF), to(#12266D));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‚#6A96FF‘, endColorstr=‚#12266D‘);
}
[/HTML]
Schauen wir uns an wie es aussieht. IE8 hat keine Abstände mehr, zeigt aber immer noch keinen Verlauf über die ganze Seite und der FF, sowie die anderen modernen Browser zeigen jetzt gar nichts mehr an.
Was ist passiert. Nun, wir haben zwar dem Element body eine Höhe von 100% zugewiesen, jedoch bezieht sich diese auf das Elternelemt. Ja da muss dann also noch was sein. Und das Element, welches das Element body unter seiner Kontrolle hat ist das Element html, welches ganz am Anfang unseres Dokumentes steht.
Logische Schlussfolgerung: Das erste Elemt ist das html und das nächste Tochterelement ist das Element body.
Das können wir uns zu nutze machen.
Wir verpassen dem Element html aber erst mal die korrekte Höhe von 100%.
[HTML]
Seitentitel steht oben im Fenster
*{
margin:0;
padding:0;
}
html {
height:100%;
}
body {
height:100%;
background: -moz-linear-gradient(top, #6A96FF, #12266D); //für Mozilla Firefox
background: -o-linear-gradient(top, #6A96FF, #12266D); //für Opera
background: linear-gradient(top, #6A96FF, #12266D);
background: -webkit-gradient(linear, left top, left bottom, from(#6A96FF), to(#12266D));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6A96FF', endColorstr='#12266D');
}
[/HTML]
Jetzt schaut der Verlauf sahne aus, oder.
ENDE