Design Clean
    >> Tipps zum anpassen

Boxen mit Tor

Hover-Effekt für rechte Boxen

Bei Mauskontakt fähr das Tor nach Oben. Beispiel mit und ohne Fenster.
Bildgröße hier: 260 x 240 Pixel. Die Boxen haben die gleiche Höhe bekommen.

Titel der Box



Titel der Box


Hilfe per Skype mit Klick auf Button:

Hier Beispiel mit Bild (max. 250 Pixel breit).

ein weiteres Beispiel :
Hier wurde Design "CSS" verwendet : Design CSS: Box mit Slider-Tor

Das Baukasten-Design "Clean" verfügt über nur eine rechte Box.
Im Feld "rechte Box" fügen wir 3 DIV-Elemente ein, welche die 3 Boxen darstellen.

  • Schritt 1: HTML-Code in rechte Box
  • auf "Design" gehen
  • auf "Designeinstellungen"
  • auf "Erweiterte Designeinstellungen"
  • dort ist das Feld "rechte Box"
  • siehe Beispielgrafik Rechts

    • Hier fügen wir 3 DIV (Felder) ein. 

<div class="neue_boxen">
<h2>Titel der Box 1</h2>
<img class="tor" src="//img.webme.com/pic/c/clean-test/tor5.JPG" />
<br /> <br />
Hier den Inhalt für Box 1 einfügen
</div>

<div class="neue_boxen">
<h2>Titel der Box 2</h2>
<img class="tor" src="//img.webme.com/pic/c/clean-test/tor5.JPG" />
<br /> <br />
Hier den Inhalt für Box 2 einfügen
</div>

<div class="neue_boxen">
<h2>Titel der Box 3</h2>
<img class="tor" src="//img.webme.com/pic/c/clean-test/tor5.JPG" />
<br /> <br />
Hier den Inhalt für Box 3 einfügen
</div>
Beachte , das der Inhalt die Boxenhöhe 240 Pixel nicht überschreiten darf.
Ihr könnt hier auch ein eigenes Bild (Tor) verwenden. Größe 260 x 240 Pixel verwenden.
Tor mit Fenster ? Grafikadresse //img.webme.com/pic/c/clean-test/tor.PNG   verwenden.

  • Schritt 2: Der CSS-Code
  • auf "Extras" gehen
  • das Extra "Eigener <head> Inhalt"
  • hier den CSS-Code einfügen
  • oder im Feld "Text Über Design"
  • siehe Beispielgrafik Rechts

    • Mit dem CSS-Code bekommen die 3 Div das gewünschte Aussehen. 

/* Aussehen Boxen */
.neue_boxen {
   width: 240px;
   height: 240px;
   padding:10px;
   position: relative;
   border: 1px solid #777777;
   overflow: hidden;
}

/* Aussehen der Boxen-Titel */
.neue_boxen h2 {
   width: 240px;
   padding-left: 30px;
   position: absolute;
   background-color: #333333;
   color: #FFFFFF;
   font-size: 14px;
   margin: -10px 0px 20px -20px;
   z-index: 2;
}

/* Position Tor sichtbar */
.tor {
  position: absolute;
  margin-top: 20px;
  top: 0px; left: 0px;
  transition: all 1s linear;
  z-index:1;
}

/* Position Tor eingefahren */
.neue_boxen:hover .tor { margin-top: -240px; }





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



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

nach Oben