CSS/fertige Layouts/Design04

Diese grafisch ansprechende Seite eines Sportportals hat 3 Spalten, die sich bei kleinerem Bildschirm untereinander positionieren.

Informationen zum Autor

Name:

designenlassen.de

E-Mail:

Homepage:

designenlassen.de

Design 04

• Download: ZIP-Datei (278KB, Prüfsumme: )

Besonderheiten

Responsivität mit Grid Layout

Auf mobilen Geräten werden alle Inhalte untereinander angezeigt. Sobald genügend Platz vorhanden ist, wird der Inhaltsbereich mit display: grid zum Grid-Container mit zwei (und später drei) Spalten, der von den Kindelementen automatisch gefüllt wird.

Beispiel

@media only screen and (min-width: 40em) {
  main {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap:1em;
  }
  
  article {
	grid-column: span 2;
  }

@media (min-width: 60em) { 
  main {
    grid-template-columns: repeat(3, 1fr);
 }
 ... 
}

Fallback für IE9-11

Für ältere Browser, die das Grid Layout noch nicht verstehen, können Sie mit der supports not-Regel andere Regelsätze festlegen:

Beispiel

@supports not (display: grid) {
  main {
    display: flex;
    flex-flow: row wrap;
  }

main > * {
  flex: 1 100%;      /* Alle Elemente werden über die volle Breite dargestellt */
} 

article {
  flex: 1 64%;      
  margin: 1%;
}
section,
aside {
  flex: 1 31%;      /* Diese Elemente erhalten eine Breite von 1/3.  */
  margin: 1%;
}
}

Wo ist denn die Navigation?

Die Navigation befindet sich im HTML-Markup am Ende des Inhaltsbereichs. So können die Nutzer die Seiteninhalte direkt erreichen. Auf kleinen Bildschirmen führt ein Navigations-Skiplink "☰" mit einem „Hamburger-Icon“ dorthin, der den Inhalt überspringt.

Bei mehr als 40em Breite wird es in Form von Reitern oberhalb des Inhaltsbereichs absolut positioniert, der Skiplink wird mit display: none; ausgeblendet.

Formulare

Auf der Startseite befinden sich zwei Formulare:

• In der Suche wurde das Label absolut auf das input-Feld positioniert.
• In der letzten section befindet sich ein Login, dass z. B. den Zugang zu (noch anzulegenden) passwortgeschützten Unterseiten ermöglicht. Dies ist ebenfalls mit Grid-Layout formatiert.

Verwendung des Icon-Fonts font-Awesome

Die Icons in der Navigation, vor den Listenelementen und grafischen Elemente wie die Lupe in den Suchfeldern werden nicht mit Hintergrundbildern, sondern mit einer Schriftart, die statt Buchstaben diese Icons enthält, verwirklicht. Dadurch sind diese Grafiken immer gestochen scharf.

In diesem Tutorial wird die Vorgehensweise näher erklärt.

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.