CSS Befehle und Beispiele | Größenoptionen und DIV Beispiele

Wenn man diese Varianten testen möchte dann sollte man hierfür eine einfache Div Box erstellen und mit dieser probieren.

#DEINDIV {
	background-color: lightgreen;
    // Hintergrundfarbe
	height: 80px;
    // Höhe
	width: 150px;
    // Breite
}

<div id="DEINDIV">Inhalt deines DIVS</div>

Das sollte eine Box erzeugen die wie folgt aussieht.

Dieser Block lässt sich jetzt nach belieben umgestalten..

Hier wurde folgende Css noch hinzugefügt.

#DEINDIV {
	background-color: lightgreen;
    // Hintergrundfarbe
	height: 80px;
    // Höhe
	width: 150px;
    // Breite
	text-decoration: underline;
    // Text decoration hier unterstrichen
	text-align: right;
    // Textausrichtung innerhalb der Box
	padding: 5px;
    // Abstand innerhalb der Box
	border:2px solid gold;
    // Rahmen + Stärke + Typ + Farbe
	border-radius: 20px;
    // Ecken abrunden (auch border-radius-top zb.)
	box-shadow: 5px 5px 25px 5px black;
    //Schatten um die Box 
    margin-left: auto;
    margin-right: auto;
    // Die Box wird innerhalb der Beitragsbox zentriert
}

So kann man natürlich wunderbar mit Boxen spielen. Eine Standardvariante was aber nicht gerne gesehen wäre, wäre wenn man die Webseite als Box in der Box darstellt. Das macht auf der einen Seite Sinn da jede Box explizit angesprochen werden kann. Nachteil ergibt sich wenn man nicht mehr weiß in welcher Box man sich gerade befindet und das Schließen der einzelnen Boxen durcheinander bringt (Wenn man später die Webseite als Php Funktion aufbaut und segmentiert dann ist so eine Sucherei Gift). Ein schöner Standard ist es Div Blöcke zum positionieren mit Css an die richtige Position zu bringen aber so das die Webseite selbst frei von einer Box ist.

Das würde auch das zentrieren einer Seite so aussehen lassen das man den Body der Webseite direkt anspricht ala

body {
// Es wird kein # (für ID) oder . (für CLASS) am Anfang verwendet da der Body eine Grundklasse in Css ist
    margin-left: auto;
    margin-right: auto;
    // mit margin werden Objekte positioniert. Um eine Zentrierung zu erreichen wird die Konfiguration auf AUTO gesetzt das sich der Body dem Browser anpasst und mittig zentriert.
}