CSS/Templates/Template4

Aus SELFHTML-Wiki
< CSS‎ | Templates
Wechseln zu: Navigation, Suche

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.

Informationen zum Autor

Name:
designenlassen.de
Homepage:

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


Besonderheiten beim Design[Bearbeiten]

Die Hintergrundfarben und Schatten sind direkt in der CSS-Datei definiert und können leicht geändert werden.

Responsivität[Bearbeiten]

Auf Anzeigegeräten mit einer geringeren Breite als 950px wird das Layout schmäler, bis es sich untereinander anordnet, damit nur nach unten gescrollt oder gewischt werden muss.

Das Dropdownmenü wandert bei weniger als 620 Pixeln Breite nach unten und kann dann über den dann sichtbar werdenden Navigations-Button "☰" (vorher: {display:none;}) direkt erreicht werden.

Verwendung des Icon-Fonts font-Awesome[Bearbeiten]

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.

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