Web äbe.ch

1 2 2

Blindtext (Frontseite)

Du liest gerade einen Blindtext, der sich darüber lustig macht, dass du gerade einen Blindtext liest, der sich über Blindtext erheitert. Das ist doch mal ein echter Meta-Moment, oder?
🕵

Die Tulpe

Die Tulpe, eine lebendige Symphonie aus Farben, ist ein weiteres Juwel in der Blumenwelt. Von leuchtendem Gelb bis hin zu tiefem Violett präsentiert sie sich in einer Vielfalt, die die Augen erfreut und die Seele berührt. Sie symbolisiert den Frühling, die Erneuerung und die Freude, die mit der warmen Jahreszeit einhergehen.
🚙

Die Rose

Die Rose: In ihrem betörenden Rot verkörpert sie die Leidenschaft und die Liebe, und ihre Blütenblätter entfalten sich wie die kostbarsten Gewänder eines königlichen Hofes. Die Rose fordert Bewunderung und fordert uns auf, uns der Schönheit hinzugeben, die im Zusammenspiel von Zartheit und Stärke entsteht.
📑

Die Anemone

Einer Blume von seltener Schönheit und Grazie. Ihre zarten Blütenblätter, die wie zerknittertes Seidenpapier aussehen, erzählen von Vergänglichkeit und Flüchtigkeit. Die Anemone erinnert uns daran, dass das Leben kostbar ist und dass wir jeden Moment in seiner ganzen Pracht genießen sollten.

Blindtext

As a boy, I spent several years in Indonesia and heard the call of the azaan at the break of dawn and the fall of dusk. So let me be clear: no system of government can or should be imposed upon one nation by any other. Thank you. And may God's peace be upon you.
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten – man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog.
Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum.
Weiter Lesen ➥

Featuring -B

Ausserdem schliessen diese Boxen auch bei unterschiedlich langem Inhalt immer auf einer Höhe ab. Viel Spass damit. Please enjoy. Weiter Lesen ➥

Informationen

Template

Dieses Template heisst ' Technical Solutions '. Die Seiten 'Home' (diese Seite) sowie die Seiten beim Aufklapp-Menü, welche Sie bei 'Untermenü-A' und 'Untermenü-B' finden (von Primus bis Octavus), sind bereits als Beispiel verlinkt. Bitte klicken Sie diese, um zusätzliche Infos zu erfahren und zu sehen wie die Unterseiten angelegt sind.

Das Menü

Das Aufklapp-Menü ist responsive und nur per CSS erstellt. Es funktioniert ganz ohne Javascript und ist ausserdem 'touch-friendly', d.h. es läuft auch auf mobilen Geräten. Hinweis dazu: Normalerweise wird die Aufklapp-Funktion ja per Mausberührung (hover) getätigt. Aber mobile Geräte kennen eben keine Maus sondern nur Touch. Unsere Lösung beruht auf der sog. 'Toggle-Funktion per Checkbox-Hack'.
Bei grösseren Auflösungen wird das Aufklapp-Menü mit 6 horizontalen Buttons dargestellt. Bei mobilen Auflösungen erscheint nur der sog. Hamburger Menü-Button (3 Striche, quer als Menü-Symbol). Um das Menü dort zu öffen, klicken Sie bitte auf den Hamburger Menü-Button. Aus den 6 Buttons wird bei mobilen Auflösungen ein sog. Akkordeon-Menü mit vertikalen Buttons, welches sehr splatzsparend ist.

Specials -A

Graecis abhorreant duo ea, vim ad impetus bonorum. Ius dicunt eripuit et. Ea quis percipitur eos, usu assum noster appellantur at illud.
Weiter Lesen ➥

Specials -B

Eu per porro integre, id feugait maiestatis philosophia pro. Oratio copiosae ex eam, cu suas doming vis. Ei eos meis doctus ei.
Weiter Lesen ➥

Die Technik

Einbau der Bilder

Bei den Fotos im Inhaltsbereich haben wir uns für drei Techniken entschieden, nämlich die CSS-Techniken mit 'display:inline-block' und 'display:table' sowie 'float'. Wir beschreiben es Ihnen hier in einem Tutorial auf der Seite 'Quartus' (seite4.html)

Strukturierte Abschnitte

Hier auf der Startseite sehen Sie im Inhaltsbereich mehrere Abschnitte, die farbig getrennt sind. Auch entdecken Sie Dreicke, welche die Abschnitte eröffen und schließen. Wie wir die Abschnitte sowie auch die Dreiecke angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, z.B. den ganzen Inhalt in nur einen einzigen Abschnitt packen können (so wie wir es auf den Unterseiten auch getan haben, erklären wir Ihnen hier auf der Seite 'Quartus' (seite4.html)

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. Sie finden die Gallery auf der Seite Octavus (seite7.html)

Responsive Webdesign

Responsive Webdesign

Responsive Webdesign (RWD) ermöglicht eine Anpassung bzw. Optimierung der unterschiedlichen Bildschirmgrössen 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 Angaben in Prozent gearbeitet.

So testen Sie

Hier auf der Seite seite1.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.
☏ ✉ f
hier ensprechende Dateien anlegen/verlinken
© 2026 äbe.ch Werner
🆙