Informationen

Layout

Dieses Template heißt 'My Fitness Girl'.

Das Design soll leicht und luftig wirken. Im oberen Bereich sehen Sie drei Fotos, welche übereinander gelegt sind. Innerhalb eines dieser Fotos haben wir das Menü platziert, die Links dort erhalten als optische Unterstützung noch eine dekorativen Pfeil als Font-Icon. Per CSS (transform:rotate) sind diese Fotos in verschiedenen Winkeln gedreht.



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.

Follow Us



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.

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.



Ein paar Worte zur Technik

Bei den Fotos im Inhaltsbereich haben wir uns folgendes System für Sie ausgedacht, sehen Sie bitte auf den einzelnen Seiten unseren Vorschlag für die Anordnung der Bilder im Inhaltsbereich: Nämlich ein Bild alleine stehend sowie zwei Bilder und drei Bilder nebeneinander stehend. Hier wurde die CSS-Technik 'display:Inline-Block' verwendet.

Für die Anordnung der Fotos im oberen Bereich wurden folgenden zwei CSS-Techniken kombiniert. Nämlich die 'display-Eigenschaft' (table-cell) sowie die Positionierung mittels 'position'. Das bedeutet: Zwei Fotos liegen im normalem Elementfluß nebeneinanander (display: table-cell) und ein weiteres Foto (welches das Menü enthält) wird per CSS-position (relative/absolute) mit einer eigenen Ebene darüber gelegt und so aus dem normalem Elementfluß herausgenommen.
© 2025 | My Fitness Girl