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.

Lightbox Picture Gallery

Wir haben in diesem Template die bekannte, beliebte und bewährte 'Lightbox' Foto-Gallerie eingebaut. Klicken Sie bitte dazu auf die Fotos.

So funktioniert diese Foto-Schau: Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten. Zum Schließen des Fenster klickt man auf das 'X' oder irgendwo ausserhalb des Fensters.

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.

Pseudo-Element 'nth-child()'

Der Inhaltsbereich hat zwei Spalten. Bei der Sidebar, also der rechten Spalte im Inhaltsbereich, sehen Sie unterschiedliche Boxen, hier auf der Startseite sind es 6 Boxen. Box 1 enthält eine Hintergrundgrafik, Box2 und Box3 haben verschiedenen Farben, die sich bei den nachfolgenden Boxen wiederholen. Wenn man 'nth-child()' verwendet, so spart man Quelltext und es wird übersichtlicher.

Es ist so:
'nth-child(1)' spricht die erste Box mit der Hintergrundgrafik an, mit 'nth-child(even)' werden alle geraden Boxen angesprochen, also Box2, Box4, Box6 usw und mit 'nth-child(2n+3)' wird die dritte Box angsprochen und davon ausgehend jede weitere zweite, hier also Box3, Box5 usw.

Mehr Info zu 'nth-child()' erhalten Sie ggfls. hier bei SELFHTML-Wiki

 



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.

 

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.

Box2 - Ü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

Überschrift Box4

Hallo, ich bin Box 4, bitte fülle mich mit Text. Ea sea cetero feugiat ponderum, sea sint bonorum ea. Petentium rationibus nec ne.

Latest Picture



"Felsen im Meer". Vix erroribus dissentiunt ad, te sea falli affert.

Überschrift Box6

Hier ist Box. Facer melius eam ne, dicat tollit vim ne. Voluptua insolens ius in, sit ex nonumy legimus. Nec bonorum ever titur inm eicu vocibus
 
  • Firma Sir Michael Mustermann
  • 12345 Big City Of Nowhere
  • Sample-Nowhere-Street 232 A
 
©2022 | Der kleine Leuchtturm