Design Clean
    >> Tipps zum anpassen

Box Oben 1


Rechte Box über Seiteninhalt

Zurück zur Übersicht

Boxen unter Header

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.

Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :33 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben