e1:css_boxen

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

-Element aufgeführt. Das <body>- Element enthält also genau fünf

-Elemente. Über deren Attribut „id“ wird der Namen des Bereichs angegeben:

Ausführbares Beispiel

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>Seitenaufbau mit DIV Containern</title>
        <link rel="stylesheet" href="stylesheet.css">
    </head>
 
    <body>
        <div id="werbung">
            Werbung
        </div>
 
        <div id="rahmen"> 
 
            <div id="banner">
                Hier könnte ihr Banner platziert werden!
            </div>
            <div id="navigation">
                <ul>
                    <li><a>Link 1<a/></li>
                    <li><a>Link 2<a/></li>
                    <li><a>Link 3<a/></li>
                    <li><a>Link 4<a/></li>
                </ul>
            </div>
            <div id="inhalt">
                Hier könnte ihre Werbung stehen!
            </div>
        </div>
    </body>
</html>
#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.

HTMLCSSErlä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.

Rahmen und Abstände

Im visuellen Anzeigemodell wie Windows Fenster oder Android Activitys erfolgt die Darstellung von Elementen durch das Zeichnen von Rechtecken. Die Bestandteile dieser Rechtecke beschreibt das „Box-Modell“. Eine Box kann bestehen aus: Dem Inhaltsbereich, also der Fläche, die durch Texte und Bilder oder Eigenschaften wie width und height vorgegeben wird,

  • einem Innenabstand (padding),
  • einem Rahmen (border) und
  • einem Außenabstand (margin).

Bei Blockelementen können Höhe und Breite beliebig festgelegt werden, bei Inlineelementen werden die Maße durch den Inhalt vorgegeben. Innen- und Außenabstände sowie Rahmen können für jede der vier Seiten einer Box einzeln festgelegt werden. Wird eine Box positioniert, beginnt die linke Außenkante bei left, die obere Außenkante bei top, die rechte Außenkante bei right und die untere Außenkante bei bottom. Siehe auch https://wiki.selfhtml.org/wiki/CSS/Box-Modell

  • /var/www/infowiki/data/pages/e1/css_boxen.txt
  • Zuletzt geändert: 2017/07/14 19:56
  • von admin03