Box Oben 2

Rechte Box auf Headerfeld

Zurück zur Übersicht

---

  Unsere Headergrafik sitzt in diesem Beispiel bei #content (siehe CSS-Code)
  Jede Seite kann seine eigene Headergrafik bekommen.

---

Schritt 1: Der CSS-Code

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

/* Design Clean Bild-Problem beheben */
#main img, .widget img {max-width: 100% !important;}

/* Headerfeld NICHT sichtbar */
#masthead { visibility: hidden; }

/* Container ohne Innenabstand */
#container { padding-top: 0px!important; }

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

/* Seitentitel auf Headerbild  */
h1 {
   position: absolute;
   margin-top: -70px;
   color: white;
}

/* h2 ohne Schatten */
h2 { box-shadow: none!important; }

/* Rechte Boxen auf Header platzieren */
#sidebar {
   position: absolute;
   top: -20px;
   left: -20px;
   width: 980px!important;
   height: 235px;
   background-color: #fff!important;
   overflow: hidden;
   border-radius: 15px 15px 0px 0px;
   box-shadow: 0px 0px 8px rgba(0,0,0,0.7); 
   padding: 20px 0px 0px 20px!important;
}

/* Clean Menü (oben) */
#access {
   background:  none #fff!important;
   height: 45px;
   padding: 10px 0px 10px 20px;
   width: 980px;
   box-shadow: 0px 0px 8px rgba(0,0,0,0.7); 
}

/* Menü-Button ohne Schatten */
#access li:hover > a, #access a:focus { box-shadow: none!important; }

/* Seiteninhalt tiefer und neue Breite */
#main { margin-top: 180px!important; width: 90%!important; }

/* die 3 Boxen */
.boxen {
   float: left;
   width: 230px;
   height: 195px;
   margin: 0px 29px;
   padding:10px 15px; 
   border: 1px solid #ccc;
   overflow: hidden;
}
/* Überschrift in 3 Boxen */
.boxen h2 {
   background-color: #333;
   color: white;
   font-size: 14px;
   margin: -10px 0px 20px -20px;
   width: 250px;
   padding-left: 30px;
   box-shadow: 3px 5px 10px 5px #bbb;
}

/* Bildgroesse in Boxen */
.boxen img { width: 230px; height: 153px;}

 -->
</style>

User mit Werbefreiheit müssen #sidebar den Wert top: anpassen.
User mit Design Clean und dem Menü auf Linker Seite dürfen mich gerne anschreiben.

---

Schritt 2: Die 3 Boxen einfügen

Im Feld "rechte Box" (findet Ihr bei Design / Designeinstellungen / erweiterte Eeinstellungen) müsst ihr noch folgenden HTML-Code einfügen:

<div class="boxen">
<h2> Überschrift 1 </h2>
Hier Inhalt Box 1
</div>

<div class="boxen">
<h2> Überschrift 2 </h2>
Hier Inhalt Box 2
</div>

<div class="boxen">
<h2> Überschrift 3 </h2>
Hier Inhalt Box 3
</div>

Noch ein Hinweis :

Auf dieser Homepage gibt es die Beschreibung Design Clean mit weiteren Boxen
Wer Design "Clean" bereits mit mehrere Boxen verwendet

- benötigt diesen HTML-Code nicht (habt Ihr schon)
- muss im eigenen CSS-Code die Zeilen von .boxen und .boxen h2 entfernen
- bevor der neue CSS-Code (von Schritt 1) eingefügt wird
- sonst stehen diese doppelt im Quellcode

Auch muss Euer Boxen-Inhalt an die neue Höhe angepasst werden.

---

Jede Seite mit eigener Header-Grafik ?

- entferne im CSS-Code folgendes :

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

- gehe nun auf "Seiten"
- wähle eine Seite aus
- Seite ist nun zum Bearbeiten offen
- oben Links im Editor (Werkzeugleiste) auf "Quellcode" klicken
- Seite ist nun in der HTML-Code-Ansicht
- Alle Seiten bekommen folgenden Code:

<style type="text/css">
<--
#content { background:url(Grafikadresse) no-repeat #fff; }
-->
</style>

- Grafik muss die Größe 1000 x 200 Pixel haben
- Grafik im Baukasten Hochladen (bei "Bilder")
- Haken entfernen im Feld "Bild verkleinern"
- Eure Grafikadresse findet Ihr dann hier