Grafik-Werkstatt

Beispiel 5

Ein "responsive" Design-Beispiel

Auf der Linken Hälfte wurde das Headerfeld #header_container platziert. Die Header-Grafik lässt sich bequem über das Baukasten-Menü einfügen (Größe 1000 x 1000). Als Avatar dient uns das Feld für den Header-Titel h1#title, Größe hier 120 x 120 Pixel. Unten im Headerfeld eingefügt, das Feld "Copyright-Hinweis unter Design" , #below_content. Füllen können wir das Feld auch bequem über das Baukasten-Menü. Zum Beispiel mit verlinkten Texten für die Seiten Kontakt und Impressum.


Die Navigation

Hier wurde das Baukasten-Menü verwendet. Daher eignet sich das Design-Beispiel nur für Seiten mit wenigen Menü-Links. Hier sollten kurze Seitentitel verwendet werden. 2-3 Menü-Links (Kontakt / Impressum z.B.) könnte man mit dem Extra "versteckte Seiten" oben entfernen, um darauf dann links unten im Header zu verlinken. Man könnte in diesem Design aber auch die rechte Box verwenden, oben, unter dem Menü. Und dort ließen sich dann weitere Menü-Links einfügen, oder verlinkte Grafiken. Als zweites Header-Feld könnte die Box auch Verwendung finden. Beispiel dazu folgt .


Der CSS-Code zum kopieren:

Dies ist ein Beispiel für das Baukasten-Design "CSS". Dort kommt der Code ins Feld "css ohne style-tags".
Falls dieses Beispiel mit der rechten Box (oben / quer) gewünscht ist, schaut bitte das Template-Beispiel 7.

- Einloggen in der Homepage
- auf "Design" klicken
- auf "Designeinstellungen" klicken
- und nun auf "Erweiterte Einstellungen"
- dort unten findet Ihr das Feld "css ohne style-tags"
- die /* Grünen Texte im Code */ dienen Euch zur Info
- das erleichtert Euch das spätere anpassen


/*  Nullformatierung für alle Elemente */
* {padding: 0px; margin: 0px; }

/*  Hintergrund hinter Design  */
body { background-color: #F1F3F9; }

/*  Werbung über Design mittig setzen  */
Kompletter CSS-Code folgt in Kürze. Zur Zeit passe ich noch einige Kleinigkeiten an.
1 Besucher
=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=