Design Clean
    >> Tipps zum anpassen

Box Oben 2


Rechte Box auf Headerfeld

Zurück zur Übersicht

Box auf Header

  Unsere Headergrafik sitzt in diesem Beispiel bei #content (siehe CSS-Code)
  Jede Seite kann seine eigene Headergrafik bekommen.


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

/* Neue Headergrafik */
#content { background:url(Grafikadresse) no-repeat #fff; }

/* Seitentitel auf Headerbild  */
h1 {
   position: absolute;
   margin-top: -70px;
   color: white;
}

/* 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 tiefer und neue Breite */
#main { margin-top: 180px!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;
}
/* Ü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 mit Design Clean und dem Menü auf Linker Seite dürfen mich gerne anschreiben.


Schritt 2: Die 3 Boxen einfügen

Im Feld "rechte Box" (findet Ihr bei Design / Designeinstellungen / erweiterte Eeinstellungen) müsst ihr noch folgenden HTML-Code einfügen:
<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 1) eingefügt wird
- sonst stehen diese doppelt im Quellcode

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


Jede Seite mit eigener Header-Grafik ?

- entferne im CSS-Code folgendes :
/* Neue Headergrafik */
#content {background:url(Grafikadresse) no-repeat #fff; }

- gehe nun auf "Seiten"
- wähle eine Seite aus
- Seite ist nun zum Bearbeiten offen
- oben Links im Editor (Werkzeugleiste) auf "Quellcode" klicken
- Seite ist nun in der HTML-Code-Ansicht
- Alle Seiten bekommen folgenden Code:
<style type="text/css">
<--
#content { background:url(Grafikadresse) no-repeat #fff; }
-->
</style>

- Grafik muss die Größe 1000 x 200 Pixel haben
- Grafik im Baukasten Hochladen (bei "Bilder")
- Haken entfernen im Feld "Bild verkleinern"
- Eure Grafikadresse findet Ihr dann hier









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



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

nach Oben