e1:css_boxen [Infowiki]

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== 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 <div>-Element aufgeführt. Das <body>-
Element enthält also genau fünf <div>-Elemente. Über deren Attribut „id“ wird der Namen des Bereichs
angegeben:

[[http://185.75.148.125:4444/infowiki/beispiele/e1/divbox.html|Ausführbares Beispiel]]


<code html>
<!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>
</code>

<code css>
#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;
	}
</code>


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>
<table>
<tr><th>HTML</th><th>CSS</th><th>Erläuterung</th></tr>
<tr><td>&lt;Elementname class = “Wert “&gt;</td><td>.Wert { CSS-Angaben }</td><td>Das class-Attribut wird in der
CSS-Datei mit dem Punkt angesprochen.</td></tr>
<tr><td>&lt;Elementname id = “Wert “&gt;</td><td>#Wert { CSS-Angaben }</td><td>Das id-Attribut wird in der CSSDatei
mit dem # angesprochen.</td></tr>
 </table> 
</html>

====== Rahmen und Abstände ======
{{ :e1:600px-box-modell.svg.png?direct&600 |}}

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|https://wiki.selfhtml.org/wiki/CSS/Box-Modell]]