In Html besteht fast jedes Elemet aus einer Box.
Versäume ich es der Box eine Breite zu geben,
wird die maximal mögliche Breite verwendet.
Das kann man schön an der Überschrift Radien & Farbe erkennen,
welche die Breite des übergeordneten <body>
Elements
von width: 880px;
einnimmt.
Für die <h2 class="extra">
-Überschrift habe ich eine Klasse ergänzt,
welche im .css oder <style>
-Bereich folgendes enthält.
h2.extra { color: red; // font farbe background-color: #d0e0ff; /* bei 4 Werten ist die Reihenfolge */ border-radius: 0 1.2em 0em 1.2em; /* topleft topright bottomright botleft */ text-align:center; /* quasi von 10:30 im Uhrzeigersinn */ }
Im Style Sheet habe ich erst den Variablen-Namen: Wert der Variable;
Kommentare sind wie bei Java Script einzugeben.
/* Kommentar */
oder // Kommentar ¶
Für jede Farbe kann ich 2 hexadezimale Ziffern verwenden,
vorangestellt mit einen #
Also hier für die Überschrift z.B. #d0e0ff;
Die Farben haben die Reihenfolge: rot = d0
, gelb = e0
, blau = ff
Alternativ kann auch ein Name verwendet werden z.B. red
Gebe ich lediglich zwei Parameter für
border-radius: 1em 0em;
an,
ist oben links und unten rechts
für den ersten Parameter 2em
gemeint.
Der zweite Parameter 0em
ist für
oben rechts und unten links.
Entsprechende Style-Definition für einen Paragraphen-Klasse lautet wie folgt.
p.extra { text-align:right; width: 450px; padding: 15px; color: green; background-color: #eeeeff; border-radius: 2em 0em; }
Ich hoffe man kann gut erkennen, dass die Farbgestaltung funktioniert,
aber bei einen Paragraphen nicht das Zentrieren des Paragraphens.
mozilla.org
border-radius
mediaevent.de
text-align – Text ausrichten
mediaevent.de
Webseiten-Layout: absolut und relativ Positionieren
Zum Anfang
Für die folgenden Beschreibungen habe ich <div>
verwendet,
was man eigentlich kaum noch braucht.
Ich hab es aber trotzdem zur Veranschaulichung genutzt.
Um eine Darstellung hin zu bekommen wie ein <div>
-Element funktioniert,
musste ich mehrere <div>
-Elemente ineinander schachteln
und ein wenig an den Abständen drehen.
Also das ist mehr eine Prinzip-Skizze, als das die Maße stimmen.
white background with 20px padding
padding: 20px;
definiere ich den Abstand zum Rahmen. border: 10px grey solid
definiere ich Rahmen-Breite, Farbe & Typ. margin: 40px;
definiere ich den Platz um den Rahmen. Hier ein konkretes Beispiel und der Code dazu.
Im Style Sheet Bereich steht folgendes
html { box-sizing: border-box; … } div.wichtig { background-color: yellow; text-align: center; width: 30%; border: 10px red solid; padding: 15px; margin: 40px; }
Und innerhalb <body>
steht folgendes.
<div class="wichtig"> Achtung </div>
Da ich im Dokument box-sizing: border-box;
definiert habe,
bezieht sich width: 30%;
auf die Außenkanten des Rahmens.
mediaevent.de
CSS Box-Modell: padding, border, margin, box-sizing
selfhtml.org
CSS/Tutorials/Boxmodell/Außen- und Innenabstand
html-seminar.de
Beispiele für die Anwendung des Box-Modells
w3.org
CSS Basic User Interface Module Level 3 (CSS3 UI)
ionos.de
div in HTML: Alles Wichtige zur Verwendung des div-Containers
Zum Anfang
Manchmal passt der Text nicht in die gewünschte Box, soll aber nicht abgeschnitten werden.
Eine mögliche Lösung wäre es, den Text vorher umzubrechen oder
innerhalb der Box verschiebbar zu machen.
Hier ist nun besonders langer Code der nicht umgebrochen werden sollte, da sonst die optische Struktur verändert wird.
Erreichen kann ich diesen Effekt mit der Klasse <pre class="scroll">
welche ich im Syle Sheet Bereich wie folgt definiert habe: pre.scroll { text-overflow: ellipsis; overflow: scroll; white-space: nowrap; }
Zum Anfang
div.xtoc { border: 1px black dashed; width: 365px; margin: 0px; float:left; }
Habe ich ein Element mit einer gewissen Breite versehen,
ist noch die Breite der Border (hier Rot um das Inhaltsverzeichnis)
border: 4px red solid;
Besser ist:
<div id="ctr">
<p>Ebenso funktioniert…</p>
und dann im .css
#ctr {text-align:center;}
Man kann aber über das <div>
-Tag einen Block eine Box mit bestimmten Eigenschaften definieren.
Die Abstände von Innen nach Außen bestimmt, werden mit folgenden Schlüsselworten belegt.
content - Padding - Border - Margin
Besser ist:
<div id="RightBlue">
und dann im .css
#RightBlue p
{float:right;
width:200px;
background-color:#A9D0F5;
padding:5px;}
Den ersten <div>-Block habe ich in hellgün gefärbt mit 10 Pixel Rand.
Hier habe ich der Einfacht halber geschrieben:
<div style="clear; padding:15px; background-color:lawngreen;">
<div id="Right…">
<p> Besser ist… </p>
</div>
<p> Den ersten <div>-Block habe ich in … </p>
<div style="float:left;…">
<p> Zweiter Block… </p>
</div>
<p>Dann habe ich vor Beginn dieses … </p>
</div>
Zweiter Block in Blau
Dann habe ich vor Beginn dieses Textes, innerhalb des ersten <div>
-Blockes,
einen weiteren Block mit <div>
definiert, welcher Linksbündig ist, 100 Pixel breit ist und
einen geänderten Zeilenabstand von 30 Pixel hat.
Insgesamt habe ich für den linken Block folgende Parameter eingetragen:
float:left; with:100px; padding:15px; line-height:30px; background-color:blue; color:white;
Wie man hoffentlich schön sieht, wird der Text ohne Abstand umflossen.
…
…
Hier ein weiteres Beispiel von grauen Boxen. Rechts steht wie sie erstellt werden.
<div style="float:none;
background-color:grey;
width:30px; height:30px;">
<p>A</p>
</div>
A
B
CDE…
nach den grauen Blöcken definiert…
Diese Text-Blöcke enthalten float:none
. So entstehen Blöck welcher nicht vom Haupttext umflossen sind.
Eine Box weiter rechts ist durchaus möglich, weil sie vorher definiert wurde.
Wird eine Box danach definiert, wandert sie dahinter.
Es ist kein padding verwendet worden, daher kann man schön sehen wie z.B. der Buchstabe A förmlich am linken Rand klebt.
Bei der dritten Box ist zusätzlich noch der Parameter border:3px solid #111;
eingeflossen.
float:
kann folgende Werte annehmen:
left
, siehe linke, blaue Box im ersten Beispiel
right
, siehe rechte, hell-blaue Boxen
none
Ein Block welcher nicht umflossen ist,
siehe graue Boxen im zweiten Beispiel
inherit
wie vererbt.
clear:
wird primär zum Zurücksetzen, des zu
<span style="background-color:lawngreen;">
umfließenden Textes </span>, verwendet.
Statt clear:none
kann man auch clear;
mit Semikolon schreiben.
Und es kann folgende Werte annehmen:
left
, Kein Element noch "linkser" möglich.right
, merkst selbst ;-) none
Default Wert, an beiden Seiten ist ein Umfließen (wie oben) erlaubt both
beide Seiten gesperrt inherit
wie vererbt. Für die Dimensionen einer Box benötigt man
z.B. height:300px;
x width:200px;
.
Alternativ kann man auch schreiben width:15%;
, dann ist es relativ zum Browser-Fenster...
Zeichensatzfarbe stellt man beispielsweise wie folgt ein color:#c0c0c0;
.
Alternativ geht auch die Kurzschreibweise color:#ccc;
oder color:white;
.
Und die Hintergrundfarbe wird z.B. durch background-color:#A9D0F5;
eingestellt und
die nahezu schwarze Umrandung durch border:3px solid #111;
(3 Werte ohne Semikolons dazwischen).
Siehe:
w3schools.com
tutorialspoint.com
w3docs.com
noch keine Lust gehabt dazu etwas zu schreiben…
Siehe:
w3docs.com
w3schools.com
css-tricks.com
learnlayout.com
html-seminar.de
html5rocks.com
on-design.de
ext quelle.de
div
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model
Zum Anfang