Design Clean
    >> Tipps zum anpassen

Box Oben 3


Rechte Box oben - Ohne Headergrafik

Zurück zur Übersicht

Boxen unter Header

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.






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 :25 Aufrufe



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

nach Oben