Teil 3: Erstellung des Contentbereichs mit den Infoboxen
Die Boxen werden gleichmäßig ausgerichtet und bekommen eigene Überschriften.
Die Abstände nach oben und unten werden großzügig eingestellt, damit das Hintergrundbild zur Geltung kommt.
Voraussetzungen:
Der erste und zweite Teil des Tutorials wurden umgesetzt.
Die Infoleiste mit den Fontawesome Icons ist fertig gestellt.
Die Navbar-Leiste mit dem Logo und dem Seitentitel ist fertig gestellt.
Das Modul Header-Content und den CSS-Code erstellen
<div class="flex-header-content-inner">
<div class="flex-item-slider">
<h2>Textbox</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="flex-item-slider smallbox">
<h2>Textbox</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<a href="/Link" target="_blank"><button type="button" class="btn btn-success">weiter Infos</button></a>
</div>
</div>
Erläuterungen:
Das Modul als Eigenes Modul erstellen.
Folgende Einstellungen vornehmen:
Unter Optionen Inhalte vorbereiten aktivieren
Als Position header-content einstellen.
Anschließend nebenstehenden Code einbinden.
.flex-header-content-inner { /* Header Inhalt - Button,Text */
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display:flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-item-slider { /* Infoboxen */
flex: 1 38%;
order: 1;
padding: 0 0.8em 0.5em;
border:1px solid #080807;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
border-radius: 0.3em;
margin: 0.8em 2.0em;
padding-top: 1em;
background:rgba(250,250,250,0.8);
}
.smallbox {
height: 90%;
}
@media screen and (min-width: 48em) {
.flex-header-content-inner {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
}
Erläuterungen:
flex-item-slider h2
Schriftformatierungen der Überschriften.
flex-header-content-inner
Der innere Container bekommt auch eine Flexbox.
Sie erhält mit flex-direction: column die Anweisung, die Flex-Items (.flex-item-slider) untereinander zu positionieren.
Erst wenn der Viewport mit 48em breit genug ist, was über die media-queres untersucht wird, schaltet der Browser durch flex-direction: row auf ein Spaltenlayout um.
smallbox
Zusatzklasse für die rechte Box, mit der die Höhe auf 90% begrenzt wird.
Die Nutzung dieser Klasse bleibt jedem selbst überlassen.