Aktuelle Seite: Tutorials / Übersicht / Header mit Hintergrundbild Teil 3

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.

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

Das war der lezte Teil des Tutorials.

  • Die index.php ist fertig gestellt.
  • Das Modul für die obere Infoleiste ist erstellt.
  • Die CSS Formatierungen für den äußeren Container sind erstellt.
  • Die CSS Formatierungen für das Modul Kontakt sind erstellt.
  • Die Leiste mit Logo, Titel und Navigation ist fertig gestellt.
  • Das Modul für die Navigation ist erstellt.
  • Die CSS Formatierungen für die Leiste und die Navigation sind erstellt.
  • Das Override für die Schriftformatierungen der Navigation ist fertig.
  • Das Modul für den Content und die CSS Formatierungen sind erstellt.