Web äbe.ch
Bilder und Spalten (Seite4)
Hinweis:
Für die Anordung der Boxen/Spalten im Inhaltsbereich erklären wir Ihnen nachstehend unsere Techniken:- Gridsytem #1 arbeitet mit der Technik 'display:inline-block'.
- Gridsytem #2 arbeitet mit der Technik 'display:table'.
- Bildsytem mit der Technik 'float'
Worum geht es
Thema ist die Anordnung der Boxen im Inhaltsbereich bzw. wie regelt man mehrspaltige Boxen.Sobald man alles nur einspaltig untereinander anordnet, braucht man sich keine Gedanken zu machen, wobei so eine einspaltige Anordung im heutigen Webdesign naürlich kaum vorkommt.
Wenn man aber mehr als eine Box/Spalte verwendet, welche nicht mehr nur untereinander sondern in Boxen/Spalten auch nebeneinander stehen sollen, ist für die Verwaltung der Boxen/Spalten irgendein individuell frei auszuwählendes Bildsystems (genannt: GRID, ein sog. Gestaltungsraster) zu bestimmen, um eine Anordnung in Spalten und Reihen zu verwalten.
Dieses Gestaltungsraster bestimmen alleine Sie durch Ihre Codierung von HTML und CSS.
GRID-System
Grid heisst soviel wie Gitter oder Netz. Ein GRID-System ist im Prinzip die Basis für die Anordnung von Texten, Bildern oder anderen Objekten innerhalb einer Webseite. Ganz grob geht es darum, eine unterschiedliche Anzahl von Boxen in so einem Spalten-Netz zu arrangieren und zu bestimmen, mit welcher Technik sich diese Boxen verhalten sollen.Hinweis dazu: Es gibt unterschiedliche Techniken, die alle ihre Vor-und Nachteile haben, wie float oder inline-block oder display:table oder display:flex.
Responsive GRID-System
Nun geht es darum eine Webseite responsive zu gestalten. In einem zweiten Schritt wird deshalb aus einem GRID-System ein Responsive GRID-System, d.h. mit Hilfe der CSS-Media-Queries, also den Bildschirmabfragen, erfolgt eine Anpassung der Boxen in Breite und Anzahl an die verschiedenen Bildschirmgrössen von Smartphone bis Desktop-PC.Unser 'RESPONSIVE GRID' funktioniert so
Nun,wir haben folgendes responsives System für die Anordnung der Spalten im Inhaltsbereich angelegt. Es sind übrigens zwei Systeme mit unterschiedlicher Technik.- Gridsytem #1 arbeitet mit der Technik 'display:inline-block'.
- Gridsytem #2 arbeitet mit der Technik 'display:table'.
Klar kommt man auch mit einem einzigen Grid-System aus, das zweite (mit der Technik'display:table') ist für besondere Situationen, denn es ermöglicht, das die Boxen auch bei unterschiedlich langem Inhalt der Boxen alle auf einer Höhe abschliessen. Ein weiterer Vorteil ist die unkomplizierte vertikale Zentrierung mit CSS-vertical-align (top / middle / bottom)
Nachfolgend eine Hilfestellung zu den wesentlichen Einstellungen der Bildsysteme.
Allgemeine Einstellungen
Bevor wir zu den 2 GRID-Systemen kommen, erst einmal wichtige allgemeine CSS-Einstellungen. Diese gelten wir beide GRID-Systeme bzw. sind auch gültig, wenn Sie keine der GRID-Systeme verwenden. Max-with auf dem 'img' ist dafür da, wenn sie eigene Bilder unabhängig von diesem Bildsystem einsetzen. Diese Bilder sind dann maximal so gross wie die Original-Abmessungen des Bildes bzw. des umgebenen Containers und skalieren responsive.
CSS
img {max-width: 100%;
height: auto;
margin:0 auto;
}
Hier ist das Border-Box-Modell eingeschaltet, d.h. padding und border werden in die Box hinein gerechnet und nicht oben drauf addiert.
CSS
*, *:before, *:after {
box-sizing: border-box;
}
GRIDSYSTEM #1
Die Technik mit 'display:inline-block':
Nachfolgend ein Beispiel, so oder ähnlich könnte es aussehen:
1. Die 'img' im Bildsystem bekommen 100% responsive Breiten-Anpassung.
CSS
.wrapper-box img {width: 100%;
display:inline-block;
height: auto;
margin:0 auto;
}
2. Jetzt werden die Boxen für das Bildsystem angelegt. Um die Boxen in Spalten mit Prozent von 100%, 50%, 33.33% und 25% anzuordnen, genügen uns die folgenden CSS-Klassen:
.box-1_of_1
.box-1_of_2
.box-1_of_3
.box-1_of_4
Um für die Boxen namens '.box-1_of_2' und '.box-1_of_4' eine Alternative für einen davon abweichenden Breakpoint zu haben, haben wir zusätzlich noch die folgenden CSS-Klassen angelegt:
.box-1_of_2b
.box-1_of_4b
Alle Boxen bekommen an linker und rechter Seite einen 'minus-margin' um den bekannten INLINE-BLOCK-WHITESPACE-BUG auszugleichen. Da unsere Seite ja 'mobile-first' angelegt ist, starten alle Boxen mit einer Breite von 100%, d.h. alle Boxen stehen zunächst untereinander.
CSS
.wrapper-box {
text-align:center;
padding:1rem;margin: 0;
}
.box-1_of_1 ,
.box-1_of_2 ,
.box-1_of_2b ,
.box-1_of_3 ,
.box-1_of_4,
.box-1_of_4b
{width:100%;
display:inline-block;
vertical-align:top;
padding:1rem;
margin:0 -.25rem 0 -.25rem;
}
3. Mit den Bildschirmabfragen (Media Queries) setzen wir nun die Breakpoints. Wie immer sind diese Breakpoints nicht festgesetzt und können verändert und erweitert werden.
CSS
@media (min-width: 480px) {
.box-1_of_4 {width: 50%;}
}
@media (min-width: 768px) {
.box-1_of_1 {width: 50%;}
.box-1_of_2 {width: 50%;}
.box-1_of_2b {width: 100%;}
.box-1_of_3 {width: 33.33%;}
.box-1_of_4 {width: 25%;}
.box-1_of_4b {width: 50%;}
}
@media (min-width: 800px) {
.box-1_of_2b {width: 50%;}
}
GRIDSYSTEM #2
1. Die Technik mit 'display:table': So sieht es bei zwei Boxen aus, 'table-cell' stellt die Boxen nebeneinander und 'mit 'table-row' werden die Boxen untereinander platziert, mit 'height' kann eine Mindesthöhe angegeben werden.
CSS
.wrapper-box-table {
display:table;
width:100%;
text-align:center;
}
.box-tabcell-2 {
display:table-cell;
width: 100%;
height:20rem;
vertical-align:middle;
padding:1rem;
}
/* tabellenzelle-reihe */
.tabrow {display:table-row;
}
HTML
<div class="wrapper-box-table">
<span class="box-tabcell-2">
...Inhalt...
</span>
<span class="tabrow"></span>
<span class="box-tabcell-2">
...Inhalt...
</span>
</div>
2. Mit den Bildschirmabfragen (Media Queries) setzen wir nun die Breakpoints. Die Box bekommt jetzt 50% Breite und die Zellenreihe (table-row) wird mit 'display:none' ausgeschaltet, so das jetzt beide Boxen nebeneinander stehen.
CSS
@media (min-width: 1024px) {
.box-tabcell-2 {width: 50%; }
.tabrow {display:none }
}
BILDSYSTEM mit FLOAT
Die Technik mit 'float', um Text links oder rechts herum um ein Bild fliessen zu lassen. Nachfolgend ein Beispiel, so oder ähnlich könnte es aussehen:
1. Da dieses Template 'mobile-first' angelegt ist, stehen die Bilder zunächst mit 'float:none' ohne umgebenen Textfluss da.
CSS
/* bild steht links, text fliesst rechts herum */
.box-text-re {float:none;
padding:0;
width: 100%;
margin:0 auto;
margin-bottom:3rem;
margin-top:3rem;
}
/* bild steht rechts, text fliesst links herum */
.box-text-li {float:none;
padding:0;
width: 100%;
margin:0 auto;
margin-bottom:3rem;
margin-top:3rem;
}
2. Mit den Bildschirmabfragen (Media Queries) setzen wir nun die Breakpoints. Wie immer sind diese Breakpoints nicht festgesetzt und können verändert und erweitert werden. Die Bilder bekommen für die Breakpoints andere Breiten in Prozent und mit 'float:left' sowie 'float:right' einen umgebenen Textfluss. Es kommt auch ein Blocksatz für den Text (text-align:justify) hinzu.
CSS
@media (min-width: 480px) {
.box-text-re {
width: 70%; }
.box-text-li{
width: 70%; }
}
@media (min-width: 768px) {
.box-text-re {width: 30%;
float:left;
text-align:justify;
margin-right:2rem;
margin-bottom:1rem;
margin-top:1rem;
}
.box-text-li {width: 30%;
float:right;
text-align:justify;
margin-left:2rem;
margin-bottom:1rem;
margin-top:1rem;
}
}
@media (min-width: 1024px) {
.box-text-re {
margin-right:3rem;
margin-bottom:2rem;
margin-top:2rem;
}
.box-text-li{
margin-left:3rem;
margin-bottom:2rem;
margin-top:2rem;
}
}
3. So sieht der HTML-Code für die jeweiligen Boxen aus.
HTML
<div class="box-text-re">
<img src="images/picture01.jpg" width="800" height="530">
</div>
<div class="box-text-li">
<img src="images/picture01.jpg" width="800" height="530">
</div>
Icons
Wir verwenden Font-Icons
Font-Icons sind sozusagen grafisch wirkende Schriftzeichen, die aber wie normaler Text behandelt werden (denn es sind ja Textzeichen) und damit eine schnellere und leichtere Formatierung gegenüber grafischen Icons per Bildformat (z.b. gif, jpg oder png) ermöglichen. Wir haben eine der beliebtesten Icon-Schriften in dieser Vorlage bereits anbei. Sie heisst "Fontawesome".Allgemeiner Hinweis dazu: Wir haben die Icons schon für Sie angepasst. Denn ohne weitere Bearbeitung sind die Font-Icons immer genauso gross und erscheinen in gleicher Farbe wie die aktuell verwendete Schrift für den Text.
Als Beispiel:
Die Abschnitte im Inhaltsbereich
Mit Pseudo-Element 'nth-child(n)'
Auf der Startseite (index.php) sehen Sie im Inhaltsbereich mehrere Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, z.B. den ganzen Inhalt in nur einen einzigen Abschnitt packen könnten, erklären wir Ihnen nachstehend.Der Pseudo-Selektor :nth-child(n) ist sehr hilfreich, wenn man gleiche Elemente innerhalb eines Elternelement verschieden aussehen lassen möchte. Insbesondere bei Wiederholungen ist dies effektiv.
So haben wir den 'nth-child-Selektor' für die Abschnitte in der Datei format.css eingesetzt. Und zwar haben wir den nth-child-Selektor auf unsere CSS-Klasse namens 'section-content' gelegt.
'nth-child(3n+1)' spricht den ersten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 1, Abschnitt 4, Abschnitt 7 usw. sind identisch.
'nth-child(3n+2)' ist für den zweiten Abschnitt zuständig und ab diesen wird jeder dritte Abschnitt angesprochen.
D.h. Abschnitt 2, Abschnitt 5, Abschnitt 8 usw. sind identisch.
'nth-child(3n+3)' spricht den dritten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 3, Abschnitt 6, Abschnitt 9 usw. sind identisch.
CSS
.section-content:nth-child(3n+1) {
background:#4F4F4F;
color:#D8D8D8;
}
.section-content:nth-child(3n+2) {
background:#908F80;
color:#000;
}
.section-content:nth-child(3n+3) {
background:#25241f;
color:#8B8A7A;
}
So sieht ein Abschnitt in der HTML-Datei aus:
HTML
<!-- ABSCHNITT -->
<div class="section-content">
<div class="content">
... Inhalt ...
</div>
</div>
<!-- E N D E ABSCHNITT -->
So sehen zwei Abschnitte in der HTML-Datei aus:
HTML
<!-- ABSCHNITT -->
<div class="section-content">
<div class="content">
... Inhalt Abschnitt 1 ...
</div>
</div>
<!-- E N D E ABSCHNITT -->
<!-- ABSCHNITT -->
<div class="section-content">
<div class="content">
... Inhalt Abschnitt 2 ...
</div>
</div>
<!-- E N D E ABSCHNITT -->
Sehr praktisch und übersichtlich: Der Code für die Abschnitte ist also in der HTML-Datei immer der selbe, egal wieviele Abschnitte. Somit kann man schnell mal die einzelnen Abschnitte kopieren oder verschieben.
Auf den Unterseiten wollen wir nur einen einzigen Abschnitt haben. Da wir mit den selben Farben arbeiten wollen, wie im bereits definierten Abschnitt 1, müssen wir nichts weiter tun.
Die Dreiecke innerhalb der Abschnitte
Ein optisches Highlight sind die Dreiecke, welche jeweils die Farbe des übergeordneten Abschnitt übernehmen. So ein Dreieck ist per CSS gestaltet und lässt sich in alle Richtungen drehen. Nachstehend sehen Sie als Beispiel den Code für ein nach unten gerichtetes Dreieck in der Farbe Rot.
CSS
.dreieck {
margin:0 auto;
width: 0px;
height: 0px;
border-bottom: 0rem solid transparent;
border-left: 5rem solid transparent;
border-right: 5rem solid transparent;
border-top: 5rem solid red;
}
HTML
<div class="dreieck"></div>
Wir legen für unsere Abschnitte diese Dreiecke mit den unterschiedlichen Farben an.
CSS
.section-content:nth-child(3n+1) .dreieck {
margin:0 auto;
width: 0px;
height: 0px;
border-bottom: 0rem solid transparent;
border-left: 5rem solid transparent;
border-right: 5rem solid transparent;
border-top: 5rem solid #25241f;
}
.section-content:nth-child(3n+2) .dreieck {
margin:0 auto;
width: 0px;
height: 0px;
border-bottom: 0rem solid transparent;
border-left: 5rem solid transparent;
border-right: 5rem solid transparent;
border-top: 5rem solid #4F4F4F;
}
.section-content:nth-child(3n+3) .dreieck {
margin:0 auto;
width: 0px;
height: 0px;
border-bottom: 0rem solid transparent;
border-left: 5rem solid transparent;
border-right: 5rem solid transparent;
border-top: 5rem solid #908F80;
}
Das letzte Dreieck wird im Fussbereich angelegt. Je nachdem wieviele Abschnitte wir angelegt haben, können wir so flexibel bezüglich der Farbe des letzten Dreicks reagieren.
CSS
.dreieck-fuss-startseite {
margin:0 auto;
width: 0px;
height: 0px;
border-bottom: 0rem solid transparent;
border-left: 5rem solid transparent;
border-right: 5rem solid transparent;
border-top: 5rem solid #25241f;
}
Auf allen Unterseiten haben wir ja jeweils nur einen Abschnitt. Das letzte Dreieck im Fussbereich für alle Unterseiten sieht wie folgt aus:
CSS
.dreieck-fuss {
margin:0 auto;
width: 0px;
height: 0px;
border-bottom: 0rem solid transparent;
border-left: 5rem solid transparent;
border-right: 5rem solid transparent;
border-top: 5rem solid #4f4f4f;
}