Die Abschnitte im Inhaltsbereich

Mit Pseudo-Element 'nth-child(n)'

Auf der Startseite sehen Sie im Inhaltsbereich 5 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. Mehr Info zu 'nth-child()' erhalten Sie ggfls. hier bei SELFHTML-Wiki und noch viel übersichtlicher und mit vielen Beispielen erklärt es die Webseite h5c3

So haben wir den 'nth-child-Selektor' für die Abschnitte in der Datei format.css eingesetzt:

'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.


Wir haben für Sie auf den HTML-Seiten verschiedene Beispiele, nämlich:
index.html   = 5 Abschnitte
index1.html = 1 Abschnitt
index2.html = 1 Abschnitt
index3.html = 4 Abschnitte
index4.html = 3 Abschnitte
index5.html = 1 Abschnitt
index6.html = 6 Abschnitte


So sieht ein Abschnitt in der HTML-Datei aus:

<!-- 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:

<!-- 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 -->

Der Code für die Abschnitte ist also in der HTML-Datei immer der selbe, egal wieviele Abschnitte. In der Datei format.css haben wir den nth-child-Selektor auf unsere CSS-Klasse namens 'section-content' gelegt.

Die Bilder / Spalten im Inhaltsbereich

Das 'GRID-System'

Grid heißt soviel wie Gitter oder Netz. Ganz grob geht es im Prinzip darum, eine unterschiedliche Anzahl von Boxen responsive in so ein Spalten-Netz zu arrangieren. Es werden viele Grid-Systeme als Frameworks (z.B. 'Bootstrap') angeboten, diese sind meistens leider nicht semantisch gut nachzuvollziehen - und Sie benötigen halt immmer diese zusätzliche Arbeitsumgebung, die es zu erlernen gilt und an der man sich anzupassen hat. Eigenen Änderungen gestalten sich in so einem Framework schwierig. Systembedingt gibt es natürlich auch überflüssigen Code bzw. Code, den man nicht benötigt- um eben alle Eventualitäten abzugleichen. Nicht falsch verstehen: So ein Grid-Framework ist schon ein tolle Sache und funktioniert auch wunderbar, sofern Sie es halt studieren wollen und immer wieder das neuste und beste Grid-Frame-Work erlernen wollen.

Unser eigenes 'GRID'

Nun,wir haben unser eigenes System für die Anordnung der Spalten im Inhaltsbereich angelegt. Wir arbeiten hierbei mit 'display:inline-block'. Nachfolgend kein komplettes Tutorial, sondern eine Hilfestellung zu diesem Template. Es handelt sich um die wesentlichen Einstellungen dazu in der Datei format.css

1. 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.

img {max-width: 100%;
height: auto;
margin:0 auto;
}

2. Hier wird das Border-Box-Modell eingeschaltet, d.h. padding und border werden in die Box hinein gerechnet und nicht oben drauf addiert.

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

3. Die 'img' im Bildsystem bekommen 100% responsive Breiten-Anpassung.

.content .wrapper-box img {width: 100%;
display:inline-block;
height: auto;
margin:0 auto;
}

4. 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
.box-1_of_2
.box-1_of_3
.box-1_of_4

Um für die Boxen namens '.box-1_of_2' eine Alternative für einen dazu abweichenden Breakpoint zu haben, haben wir zusätzlich noch die CSS-Klasse .box-1_of_2b angelegt.

Die Boxen bekommen an linker und rechter Seite einen 'minus-margin' um den bekannten INLINE-BLOCK-WHITESPACE-BUG auszugleichen.

.box ,
.box-1_of_2 ,
.box-1_of_2b ,
.box-1_of_3 ,
.box-1_of_4
{width:100%;
display:inline-block;
vertical-align:top;
padding:1rem;
margin:0 -.25rem 0 -.25rem;
}

5. 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.

@media (min-width: 480px) {
.content .box-1_of_4 {width: 50%;}
}

@media (min-width: 768px) {
.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%;}
}

@media (min-width: 800px) {
.content .box-1_of_2b {width: 50%;}
}

Hinweis: Eine kleine Abweichung gibt es noch. Auf der Startseite index.html sehen Sie im Inhaltsbereich auch Boxen, die Icons enthalten. Diese Icons mit dem dazugehörigen Text haben wir mit Listen angelegt.

Die Schrift

Webfonts

In diesem Template werden Google Webfonts verwendet. Diese sind ja kostenlos und beliebt. Es sind die Schriften 'ROBOTO Light' und 'OPEN SANS Light', welche direkt im Template integriert sind und somit auch ohne Internet-Verbindung angezeigt werden. Die Schriften haben wir über das HTML Link-Element eingebunden.

<link rel="stylesheet" href="css/font-roboto-light.css" type="text/css">
<link rel="stylesheet" href="css/font-open-sans-light.css" type="text/css">

Wenn Sie diese Schriften nicht verwenden wollen bzw. sich für andere Schriften entscheiden, so nehmen Sie einfach den Link-Verweis aus der HTML-Seite heraus, damit die Schriften nicht geladen werden.

Icons

Wir verwenden Icon-Fonts

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 heißt "Fontawesome".

Font Awesome

Viele weitere Icons sind möglich, denn die Icon-Schrift "FontAwesome" ist ja bereits in dieser Vorlage installiert. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.

Die Dateien der Icon-Schrift sind also bereits diesem Template beigefügt mit dem großen Vorteil, das die Icons somit auch geladen und angezeigt werden, wenn keine Internet-Verbindung besteht.

Die Icon-Schrift kann aber statt dessen auch noch einfacher durch einen entsprechenden Link im Kopfbereich der Seite aufgerufen werden, die Schrift wird dann serverseitig geladen, sehen Sie hierzu die Erklärungen auf der Seite des Anbieters. Dies mag für manche der leichtere Weg sein, falls man ein Versions-Update aktualisieren möchte. Aber wie gesagt: Besteht keine Internet-Verbindung, so wird in diesem Fall auch kein Icon angezeigt.

Wir haben die Icons schon für Sie angepasst. Denn ohne weitere Bearbeitung sind die Font-Icons immer genauso groß und erscheinen in gleicher Farbe wie die aktuell verwendete Schrift für den Text.

Als Beispiel:      

Bilder

Hinweis: Die Fotos in dieser Vorlage sind von https://picjumbo.com/ . Wir haben diese responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.