Box Oben 1

Rechte Box über Seiteninhalt

Zurück zur Übersicht

---

---

Schritt 1:

Geht auf "Design" und dort (unten) auf "Erweiterte Einstellungen".
Ändert die "Höhe des Headers" auf 200 Pixel

---

Schritt 2: Der CSS-Code

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

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

/* Headerfeld ausrichten */
#masthead {
   margin-bottom: 0px!important;
   padding: 20px 0px 10px 0px!important;
}

/* Seitentitel entfernt */
#main h1 { display: none; }

/* Clean Problem beheben Schatten bei h2 Titel */
h2 { box-shadow: none!important; }

/* Rechte Box über Seiteninhalt platzieren */
#sidebar {
   position: absolute;
   left: -20px;
   width: 980px!important;
   height: 235px;
   background-color: #fff!important;
   overflow: hidden;
   padding:10px 0px 0px 20px!important;
}

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

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

/* Seiteninhalt tiefer und neue Breite */
#main { 
   margin-top: 200px!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;
}

/* Titel in den 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 den Boxen */
.boxen img {
   width: 230px;
   height: 153px;
}

-->
</style>

Wenn die Boxen mehr Höhe bekommen sollen, müsst Ihr hier bei #sidebar
und bei .boxen den Wert bei height: erhöhen. Z.B. beide um 20 Pixel erhöhen.
Und bei #main müsst Ihr dann eventuell den Wert bei margin-top: erhöhen.

---

Schritt 3: Die 3 Boxen einfügen

Im Feld "rechte Box" (bei Design / erweiterte Einstellungen) müssen noch die 3 Boxen eingefügt werden :

<div class="boxen">
<h2> Titel in Box 1 </h2>
Hier Inhalt für Box 1
</div>

<div class="boxen">
<h2> Titel in Box 2 </h2>
Hier Inhalt für Box 2
</div>

<div class="boxen">
<h2> Titel in Box 3 </h2>
Hier Inhalt für 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 2) eingefügt wird
- sonst sind diese doppelt im Quellcode

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