CSS Positionierung

Positionierung mit CSS

Die CSS-basierte Positionierung ist wohl die gebräuchlichste. Selbst dynamische Anpassung an vordefinierte Bedingungen sind keine Zauberei mehr, was noch vor Jahren nur JavaSript zu erledigen schien. MSIE bis 8 konnte Anweisungen wie: position: absolute; top:0; bottom: 0; overflow: auto; für Container nicht umsetzen. Die Höhe entsprach dem Inhalt. Das ist zwar Geschichte, aber nur mit JavaScript war eine einzuhaltende Höhe regulierbar.

Positionierung mit der Funktion `calc(Berechnung)`

Moderne WebLayouts werden oft so komplex aufgebaut, dass es so scheint, man käme nun an das Ende der Möglichkeiten der CSS-Formatierung. Der Entwurf zur Einführung dieser Funktion stammt bereits aus dem Jahr 2006 (!!!). Aber wie so oft, muss ich erst zufällig darüber stolpern, um überhaupt Kenntnis davon zu erhalten.

Mit calc() ist es nun möglich Berechnungen mit Prozent und px- oder em-Werten zu kombinieren. Im Boxmodell wird deutlich, wie padding und margin sich auf die Endgröße auswirken. Elegant wird nun mit der Funktion gegengesteuert.

width: calc(100% -24px); wird angewendet. 100% gilt für die Spaltenbreite column-count:2 und entspricht der Hälfte des beige-farbenen Elternelements. Der Abzug ist -24px aus: margin: 0 5px 12px; padding: 6px; und 1px breiter Rahmen.

Das muss natürlich mit 2 multipliziert werden, wird ja links und rechts angewendet. Richtig wirksam wird das dann, wenn das Elternelement variabel auf Fensterbreiten zu reagieren hätte. Ist hier nicht der Fall!

Anmerkung zu Browserverhalten: Firefox und Safari5 trennen die Schrift im aqua-farbenen Container ordentlich, IE11 nimmt den gesamten Container auf die linke Seite. ~~Opera und Chrome trennen die 2. Zeile mitten durch.~~ ( Hmm??? ) Auch das hat sich inzwischen erledigt. (25. Aug. '16)
Noch ein wenig QuellCode der Stylesheets:

39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


.column { width: 856px; left: 0px; margin: 0; position: relative; 

 background-color: rgba(256, 256, 210, .6); padding: 6px; 

 -moz-column-count:2; -webkit-column-count:2; column-count:2; 

 -moz-column-width: 50%; -webkit-column-width: 50%; column-width: 50%; 

 -moz-column-gap: 12px; -webkit-column-gap: 12px; column-gap: 12px; 

 -moz-column-rule-color: blue; -webkit-column-rule-color: blue; column-rule-color: blue; 

 -moz-column-rule-style: solid; -webkit-column-rule-style: solid; column-rule-style: solid; 

 -moz-column-rule-width: thin; -webkit-column-rule-width: thin; column-rule-width: thin;  

 -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; 

 -o-hyphens: auto; hyphens: auto; } /* nutzt nichts für Chrome, Opera und Safari5 */}

.column div{ font-style: normal; font-size: 14px; 

  -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; 

  -o-hyphens: auto; hyphens: auto; } /* nutzt nichts für Chrome, Opera und Safari5 */

.column .box { font-size: 14px; background-color: aqua; position: relative; top: 6px; 

 width: calc(100% - 24px); line-height: 115%; height: auto; margin: 0 5px 12px; 

 padding: 6px; border-color: #fff purple purple #fff; border-style: solid; border-width: 1px; 

 }

Mittig zentrieren

innen

Eigentlich isses ´n oller Hut. Dennoch bin ich vor noch nicht allzu langer Zeit gefragt worden.
Von Interessse ist für „innen“ nur das: top: 50%; height: 120px; margin-top: -60px; padding-top: 10px; left: 50%; width: 160px; margin-left: -80px;
Alles klar? Na? Eigentlich nicht! Damit „innen“ nicht am oberen Rand anbabbt, ist der innere Abstand nach oben 10px groß. Die Box erhöht sich um 10px auf 130px und hängt tiefer. Das müssen wir wieder ausgleichen. Das ich das in Zeile 98 bis 103 per PHP einrichte, dient nur der Demo.

56
57
58
59


.aussenbox{ background-color: yellow; text-align: center; position: relative; z-index: 1; 

 top: -18px; right: 0px; width: 240px; height: 160px; float: right; margin-left: 40px; }

.innenbox{ background-color: gold; text-align: center; position: absolute;  padding-top: 10px; 

 top: 50%; height: 120px; padding-top: -60px; left: 50%; width: 160px;  margin-left: -80px; }

97
98
99
100
101
102
103




$richten = isset($_POST['ausgleich']) ? $_POST['ausgleich'] : 0 ;

if ($richten) { $kor = -10/2 ; $gut = "<span style='color: DarkGreen'>jetzt schon! </span>"; }

else { $kor = 0 ; $gut = "<span style='color: Red'>Eigentlich nicht! </span>"; }

echo '<style type="text/css" media="all"><!--

      .innenbox { margin-top: calc(-60px + '.$kor.'px); }

     --></style>' ;

Positionierung mit display: inline-block

Die CSS-Eigenschaft inline-block kombiniert Eigenschaften von Inline- und Block-Boxen.
Die mit HTML 5 eingeführten Elemente, die einen Zusammenhang von Inhalt und seiner Begrifflichkeit klarer herausstellen, setze ich für ein übliches div- oder span-Element nun figure: kennzeichnet eine Abbildung und als figcaption: Bildbeschreibung ein.

Die Bilder setzen sich nebeneinander solange fort, wie Platz ist. Jede Bildreihe befindet sich in einen section-Container mit der Klasseneigenschaft, sich nicht an den linken Rand zu quetschen. Diese Eigenschaft geht verlohren, wenn die Breite aller Bilder die zur Verfügung stehende überschreitet. Muss man also abwägen, ob der Container benutzt werden soll - dann immer einen neuen einsetzen oder keiner besser ist.
Und nun gibts die Beschreibung der Eigenschaften:

23
24
25
26
27
28
29
30
31
32
33
34
35
36


#contained figcaption { color: white; } /* Bildtexte weiß */

#contained .galerie1 { margin-left: 40px; } /* 1. Bildcontainer */

#contained .galerie2 { margin-left: 40px; } /* 2. Bildcontainer */

.oben { vertical-align: top; } /* alle Bilder oben angeordnen für .galerie2 */

#contained figure { margin: 0; padding: 0; display: inline-block; }

#contained .galerie1 figcaption { background-color: black; text-align: center; margin: 0; 

  padding: 3px 0 0; /* Abstand nach oben */

  } 

#contained .galerie2 figure > figcaption { text-align: center; margin: 0; 

  background-color: rgba(0, 0, 0, 0.5); /* transparenz */

  position: relative; bottom: 24px; width: 225px; height: 22px; 

  padding: 2px 0 0; /* Abstand nach oben */

  } 

#contained figure img { width: 225px; } /* alle Bilder auf eine Breite festlegen */