Box Oben 1
Rechte Box über Seiteninhalt
Zurück zur Übersicht![Boxen unter Header](https://img.webme.com/pic/c/clean-test/box_unter_header.jpg)
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 BoxenWer 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.