====== CSS-Boxen ====== Moderne Webseiten werden mit Hilfe von CSS-Boxen strukturiert. Im Fenster eines Browsers werden die Inhalte der HTML-Elemente in rechteckigen Bereichen dargestellt. Im nachfolgenden Beispiel erkennt man fünf solcher Rechtecke: Das Rechteck oben für den Titel, das Rechteck links für das Menü und das Rechteck für den Inhaltsbereich. Ein weiteres Rechteck umschließt die Seite, ein weiteres ist als Werbung an die linke Seite geheftet. Im HTML-Dokument werden diese fünf Bereiche mit dem
Seitenaufbau mit DIV Containern
Werbung
Hier könnte ihre Werbung stehen!
#werbung{
background-color: #FF0000;
width: 100px;
height: 300px;
position:absolute;
top:150px;
left:0px
}
#rahmen{
width: 600px;
height: 600px;
margin: 0 auto 0 auto;
background-color: #FFFFFF;
border: 3px dashed black;
}
#banner{
width: 600px;
height: 200px;
background-color: #1133AA;
}
#inhalt{
width: 496px;
height: 400px;
background-color: #11AAAA;
float: right;
}
#navigation{
width: 100px;
height: 400px;
background-color: #AAAA22;
float:left;
}
Mit dem Attribut position kann man angeben, dass
eine CSS-Box z. B. absolut positioniert wird. Mit
den weiteren Attributen top, left, width und height
kann man die Position und Größe in der Einheit px
(engl, Pixel, Bildpunkt) festlegen. Für den Feinschliff
einer CSS-Box gilt es zwischen margin (Abstand
zu anderen CSS-Boxen), border (Rahmen) und
padding (Abstand Inhalt zum Rahmen) zu unterscheiden.
Die Zuordnung zeigt das nebenstehende
Bild.
Class und Id-Attribute
Mit Hilfe der Attribute class und id können praktisch alle HTML-Elemente mit CSS formatiert werden.
* Das id-Attribut wird für Elemente verwendet, die nur einmal in einem HTML Dokument vorkommen, etwa einer Kopfzeile oder einem Menü.
* Das class-Attribut kann für immer wiederkehrende Elemente benutzt werden.
In der folgenden Tabelle wird zusammenfassend dargestellt, wie die class und id-Attribute in einem
HTML-Dokument mit den Formatierungen in einer CSS-Datei verknüpft werden.
HTML | CSS | Erläuterung |
---|---|---|
<Elementname class = “Wert “> | .Wert { CSS-Angaben } | Das class-Attribut wird in der CSS-Datei mit dem Punkt angesprochen. |
<Elementname id = “Wert “> | #Wert { CSS-Angaben } | Das id-Attribut wird in der CSSDatei mit dem # angesprochen. |