homepage, dokument, webpage, page, web, netz, homepage dokument webpage page web netz

About

About. Id vel voluptua invidunt, euismod deseruisse ei eam, eam ex salutandi efficiendi. Alia cibo nihil eum no. Illum nobis integre eos ne, ex mei augue quaestio, et salutandi referrentur eos. Oratio invenire ei cum, no suas dicam deleniti duo. Sit omnium periculis splendide ex, vix ei assum adversarium. Ea sed.

About 1

Lorem ipsum dolor sit amet, meliore consectetuer definitiones in per. Eu suas vituperata ius, errem legendos cu pro. Vis dicant principes ei.

About 2

Scripta legimus cum ad, viris laboramus voluptaria eu nam. Has nostro diceret appareat ut, invidunt prodesset dissentiet sed ei, nostro eligendi sit.

About 3

Ad mel laudem offendit, ei vis dignissim forensibus, mea et iuvaret labores scripserit. Iudico doctus sadipscing te vis, an natum atomorum honestatis.

Featuring

Featuring -A

Ich bin eine Box die sowohl horizontal als auch vertikal mittig zentriert ist. Dies geschieht mit der Technik 'display:table'.
Weiter Lesen

Featuring -B

Außerdem schließen die nebenstehenden Boxen auch bei unterschiedlich langem Inhalt immer auf einer Höhe ab. Viel Spaß damit. Please enjoy.
Weiter Lesen

Informationen

Template

Dieses Template heißt ' 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 außerdem '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ößeren 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

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' (index4.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' (index4.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 (index8.html)

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 Angaben in Prozent gearbeitet.

So testen Sie

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.