Living in a box


© Januar 2022, letzte Änderung am 07.11.23

Übersicht

Radien, Ausrichtung &
Farbe

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.

Quellen

mozilla.org   border-radius
mediaevent.de   text-align – Text ausrichten
mediaevent.de   Webseiten-Layout: absolut und relativ Positionieren

Zum Anfang

Border, margin, padding

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.

margin: 40px;     border: 10px grey solid
padding: 20px;

white background with 20px padding


Hier ein konkretes Beispiel und der Code dazu.

Achtung!

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.

Quellen

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

Scrolling & outbreak

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; }
 

Verschoben

0em 0em
1.5em 7em
-0.5em -1.5em
0em 0em

Zum Anfang

div.xtoc { border: 1px black dashed; width: 365px; margin: 0px; float:left; }

Übersicht

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;}

Optische Struktur der Seite

Grundlagen wie in html dargestellt wird: selfhtml.org   Box-Modell

Anwendung des div-Tags mit den "float" Attribut

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:

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:

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

Anwendung der Flexbox

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

https://wiki.selfhtml.org/wiki/Box-Modell

Quellen

ext quelle.de   div

Zum Anfang