zweiter Header

Ein zweites "Header-Feld"

Jeder Seite kann oben sein eigenes Bild bekommen. Wir setzen mit einem CSS-Code den Seiteninhalt (und rechte Box) tiefer und verwenden ein Hintergrundbild (im Seiteninhalt). Das Bild sollte die Größe 1000 x 200 Pixel besitzen.

Schritt 1: Der CSS-Code

Diesen fügen wir mit im Seiteninhalt ein. So kann jede erstellte Seite (und Unterseite) seine eigene Grafik oben bekommen.

- auf "Seiten" gehen
- wähle eine Seite aus
- Seite ist zum Bearbeiten offen
- oben im Editor (Werkzeugleiste) auf "Quellcode"
- und nun zu Beginn des Inhals diesen Code einfügen

<style type="text/css">
<!--

/* Abstand zwischen Menü und Grafik */
#container { padding-top: 0px!important; }

/* zweite Headergrafik */
#content {
background:url(Grafikadresse) no-repeat #fff; }

/* Seiteninhalt */
#main {
   margin: 150px 0px 0px 0px!important;
   padding: 20px;
}

/* rechte Box */
#sidebar { margin-top: 150px; }

-->
</style>

Bei Grafikadresse fügt Ihr die Grafikadresse vom Bild ein.
Sollten Box oder Inhalt das Bild berühren, den Wert 150px erhöhen

---

Möglichkeit 2 : mit weißen Rahmen

- erstelle die Grafik in Größe 960 x 200 Pixel
- erhöhe im CSS-Code beide 150px; um 20 Pixel
- füge dem CSS-Code noch hinzu :
- #content { background-position: 20px 20px; }

---

Weitere Möglichkeit

- Original-Header, entfernt
- Menü beginnt damit oben
- darunter sitzt der zweite Header
- hier: Design Clean: Ohne Original-Header