Box Oben 3

Rechte Box oben - Ohne Headergrafik

Zurück zur Übersicht

---

---

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; }

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

/* 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 neue Breite */
#main { 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 (Design Clean) mit Menü auf Linker Seite dürfen mich gerne anschreiben.

---

Die 3 Boxen einfügen :

- gehe auf "Design"
- nun auf "Designeinstellungen"
- dort unten auf "Erweiterte Einstellungen"
- hier finden wir Feld "erste rechte Box"
- dort fügen wir die 3 Boxen ein:

<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 2) eingefügt wird
- sonst sind diese doppelt im Quellcode

Auch muss der Inhalt der 3 Boxen an die neue Höhe angepasst werden.