CSS/fertige Layouts/Design10

Eine grafisch abwechslungsreiche Seite, die mit einem strukturierten Hintergrund daherkommt. Der Kopf und die Navigation sind oben fix positioniert.

Design 10

Download: ZIP-Datei (683kB)

Besonderheiten

Layout einfach gemacht mit grid

Der Kopf (header) und der Seitenfuß (footer) erstrecken sich über die gesamte Breite. Die eigentlichen Inhalte (oben die Navigation, unten 3 section-Elemente) sind aber mittig zentriert. Bei floats und selbst mit dem Flexbox Layout müssten hier noch verpönte Wrapper verwendet werden, damit sich Logo und Navigation im fixen header bei sehr großen Monitoren nicht an den Rändern verkriechen.

Im Grid Layout kann ein Raster der geplanten Seite erstellt werden. Die einzelnen Seitenelemente werden dann an den benannten Linien ausgerichtet.

Element mit Rändern außen

header {		
	display: grid;
	grid-template-columns: 1fr [main-links] minmax(10em, 75em) [main-rechts] 1fr;

}

footer {		
	display: grid;
	grid-template-columns: 1fr [main-links] repeat(3, minmax(10em, 25em)) [main-rechts] 1fr;
	grid-gap: 1em;
}

#navigation {
	grid-column-start: main-links;
	grid-column-end: main-rechts;	
}

.friends {
	grid-column: 2 / 3;
}

Header und footer werden zum Grid-Container, um Inhalte zu zentrieren.
Während die Navigation eine Spalte mit einer Mindestbreite von 10em und einer Höchstbreite von 75em einnimmt, besteht der Footer aus drei mittleren Spalten mit max. 25em Breite; der verfügbare Rest wird auf die Ränder aufgeteilt.

Damit die Inhalte nicht die linken Ränder füllen wird sowohl für #navigation ein grid-column-start an der benannten Linie main-links, bzw. für die section mit der Klasse .friends ein Beginn an der 2. Linie festgelegt.

Fazit: Sowohl das HTML-Markup als auch das CSS sind kürzer und übersichtlicher!

ein fixierter header

Wenn lange Inhalte nach unten gescrollt werden bleibt der header oben am Viewport „kleben“. Dieser „sticky header“ erforderte früher einige Tricks – heute nur noch eine CSS-Festlegung:

„sticky header“

@media only screen and (min-width: 40em) {
header {
    position: -webkit-sticky; 
    position: sticky;
    top: 0; 
    z-index: 9;
}
}

Ab einer Breite von 40em ist der Header nur noch eine Zeile hoch und wird über position: sticky am oberen Rand des Browserfensters fixiert.

Verläufe als Hintergrundgrafik

Anderseits wirkt das Design durch die vielen verschiedenen Elemente interessanter als eine rein weiße oder einfarbige Seite. Der gestreifte Hintergrund kommt ohne Grafik aus, sondern wird mittels eines sich wiederholenden Verlaufs (repeating-linear-gradient()) dargestellt.

"Verlauf als Hintergrund

body {
	background: #ebebeb linear-gradient(90deg, transparent 50%, rgba(255,255,255,.3) 50%);
	background-size: 2em 2em;
    font: normal 1em Arial, sans-serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
	color: black;
}

Da die Größe des Hintergrundbilds nur 2em groß ist, wird es immer wieder gekachelt, sodass das Streifenmuster entsteht.

Bilder-Karussell

Auf der Startseite findet sich ein Bilder-Karussell, dass man entweder manuell anklicken oder mit wenigen Handgriffen automatisch rotieren lassen kann. Es ist ab einer Breite von 45em responsiv, schmalere Ansichten müssten noch eingestellt werden.

Siehe auch

Tutorials

• Einstieg in das Grid Layout (Rasterelemente explizit positionieren und formatieren, template-areas)
  • implizite Erzeugung von Rastern mithilfe des auto-placement-Algorithmus
  • Ausrichtung von Grid-Items

Hinweis:

Urheberrecht: Die Templates unterliegen abweichend von den Lizenzbedingungen ausdrücklich nicht der Lizenz CC-BY-SA 3.0 (de), sondern sie sind im Sinne der Lizenz CC0 1.0 (de) als public domain veröffentlicht. Sie dürfen diese Templates kopieren, verändern, veröffentlichen, sogar zu kommerziellen Zwecken, ohne um weitere Erlaubnis bitten zu müssen. SELFHTML verzichtet weltweit auf alle urheberrechtlichen und verwandten Schutzrechte, soweit dies gesetzlich möglich ist.