Der kleine Leuchtturm
 

Home

Informationen

Layout

Dieses Template heißt 'Der kleine Leuchtturm'. Auf den Fotos oben und unten liegt jeweils ein Farbfilter, dieser ist hier Blau sowie halbtransparent, per CSS-rgba, so daß die weiße Schrift trotz der weißen Wolken auf den Fotos gut zu lesen ist. Farbe und Deckungsgrad dieses Filters lassen sich ggfls. auch anders einstellen.

Pseudo-Element (nth-child:odd)

Der Inhaltsbereich hat zwei Spalten. Bei der Sidebar, also der rechten Spalte im Inhaltsbereich, sehen Sie auf jeder ungeraden Box (Beginnend mit 1) eine Grafik im Hintergrund. Diese Wiederholung bei jeder ungeraden Zahl ist angelegt mit CSS:nth-child(odd). Klar können außer der Hintergrundgrafik noch weitere Anpassungen diesbezgl. tätigen, wir wollten es hier nur für Sie so einfach wie möglich darstellen.

 

 Wolken-Meer - Die Farbe Blau entspannt 

 

Text-Schatten gibt Kontrast

Bei den Boxen in der Sidebar ist für die Lesbarkeit der weißen Schrift auf dem Foto hier kein Farbfilter zuständig, sondern ein Textschatten (per CSS-text-shadow), welcher der Schrift einen Kontrast verleiht .

Bereits verlinkt

Klicken Sie auf die Links im Menü (Primus bis Sextus) und Sie sehen wie die Seiten verlinkt sind und erfahren noch einige Informationen.

1-spaltiger Inhaltsbereich

Wollen Sie auf einigen Seiten ihrer Webseite keinen 2-spaltigen Bereich im Inhaltsbereich, sondern auf die Sidebar verzichten? So geht es: Wir haben als Beispiel für Sie die Seite index7.html (Septus) angelegt.

 



Fotostrecke: Bildunterschrift. Ein Leuchtturm am Pier. Seemöwen, Wellen, Boote, Wind und Wolken. Küsten gehören zu den schönsten Landschaften auf der Erde.

 

Das Hauptmenü

Es wird beim Hauptmenü - das gilt von kleinen mobilen Auflösungen bis hin zur großen Desktopversion - der gerade jeweils aktuell angeklickte Link immer rechtsbündig dargestellt. Man erkennt also schnell, auf welcher Seite man sich gerade befindet.

 

Die Technik

Responsive Webdesign

Responsive Webdesign (RWD) ermöglicht eine Anpassung bzw. Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Dazu werden per CSS-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Somit kann man auch auf das Hoch- oder Querformat eines mobilen Gerätes reagieren. Außerdem wird beim Layout verstärkt mit Prozent-Angaben gearbeitet.

So testen Sie

Diese Responsive-Vorlage verwendet keinerlei Javascript.Hier auf der Seite index1.html (Primus) nennen wir Ihnen gute Möglichkeiten ein Responsive-Layout in verschiedenen Auflösungen zu testen, denn nicht jeder hat ja diverse Smartphones und Tablets zu Hause.

Öffnungszeiten

  • MONTAG - FREITAG:
  • 10.00 - 18.00 Uhr

  • DONNERSTAG:
  • 10.00 - 20.00 Uhr

  • SAMSTAG:
  • 09.00 - 16.00 Uhr



Lorem Ipsum

Oratio salutatus in per. Sea aeque equidem offendit eu, posse latine ea eam. Soluta putant fabulas his in, veniam impedit accumsan no mea, dicant ullamcorper nam ei.


Magna Charta

In pertinax patrioque vel, eum everti detracto no, partem delectus eum in. Mea primis fuisset instructior an, mel quaestio abhorreant cu.

Über uns

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum ... Weiter

Ich bin die 4te Box

Hallo, ich bin mit der vierten Position innerhalb der Sidebar , also Box 4, eine gerade Box.
 
  • Firma Sir Michael Mustermann
  • 12345 Big City Of Nowhere
  • Sample-Nowhere-Street 232 A
 
©2022 | Der kleine Leuchtturm