Design Clean
    >> Tipps zum anpassen

Bilderslider im Header

Bilder-Slider auf dem Header

Diese Beschreibung funktioniert in allen Baukasten-Designs (Red / Iceblue / Butterfly u.s.w.)

Schritt 1: Div um das Design legen


  • Das DIV muss Design-Breite bekommen
  • Das Design "Clean" ist 1000 Pixel breit
  • Das DIV bekommt Breite 1000 Pixel

  • auf "Design"
  • auf "Designeinstellungen
  • auf "erweiterte Designeinstellungen"
  • dort findet Ihr das Feld "Text ÜBER Design"
  • habt Ihr dort CSS-Codes stehen ?
  • dann nach dem </style>
  • Bild Rechts anklicken zum Vergrößern >>
Text ÜBER Design
<div style="width: 1000px; overflow: hidden; margin: auto;">
Im Feld "Text UNTER Design" müssen wir dieses DIV wieder schliessen mit :
</div>



Schritt 2: Der HTML-Code des Sliders


  • wir bleiben im Feld "Text ÜBER Design"
  • gleich nach dem ersten DIV platzieren
  • siehe Grafik Rechts

  • im Code die Grafikadressen einfügen
  • im Code die Linkadressen einfügen
  • Bildgröße 990 x 290 Pixel verwenden
  • Haken raus bei "Bilder verkleinern"
Text ÜBER Design
<div id="slider">
 <div id="mask">
  <ul>

   <li id="first" class="eins">
   <a href="/Seite.htm"><img src="Grafikadresse 1" alt="Bild" /></a>
   <div class="info"> <h2>kurzer Info-Text zum Bild 1</h2></div>
   </li>

   <li id="second" class="zwei">
   <a href="/Seite.htm"><img src="Grafikadresse 2" alt="Bild" /></a>
   <div class="info"><h2>kurzer Info-Text zum Bild 2</h2></div>
   </li>
            
   <li id="third" class="drei">
   <a href="/Seite.htm"><img src="Grafikadresse 3" alt="Bild" /></a>
   <div class="info"><h2>kurzer Info-Text zum Bild 3</h2></div>
   </li>
                        
   <li id="fourth" class="vier">
   <a href="/Seite.htm"><img src="Grafikadresse 4" alt="Bild" /></a>
   <div class="info"><h2>kurzer Info-Text zum Bild 4</h2></div>
   </li>

  <li id="fifth" class="fuenf">
   <a href="/Seite.htm"><img src="Grafikadresse 5" alt="Bild" /></a>
   <div class="info"><h2>kurzer Info-Text zum Bild 5</h2></div>
   </li>

  </ul>
 </div>
   <div class="ladebalken"></div>
</div>

- im HTML-Code die Grafikadresse einfügen
- ersetze /Seite.htm durch Seitenadressen



Schritt 3: Der CSS-Code


  • wir gehen auf "Extras"
  • dort "Eigener <head> Inhalt" wählen
  • folgenden CSS-Code kopieren
  • und im Feld <head> einfügen

  • Grafik rechts anklicken zum Vergrößern
Das Extra Eigener Head-Inhalt
<link rel="stylesheet" type="text/css" href="//img.webme.com/userfiles/clean-test/h.css">
<style type="text/css">
<!--

#slider {
        margin-top:120px;
        z-index: 1000;
	background: #000;
	border: 5px solid #eaeaea;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
	width: 990px;
        height: 280px;
	overflow: visible;
	position: absolute;
}
#mask {overflow:hidden;height:280px;}
#slider ul { margin:0; padding:0; position:relative;}
#slider li { width:990px; height:280px; position:absolute; top:-305px; list-style:none;}
#slider li.eins {animation: cycle 25s linear infinite;}
#slider li.zwei {animation: cycletwo 25s linear infinite;}
#slider li.drei {animation: cyclethree 25s linear infinite;}
#slider li.vier {animation: cyclefour 25s linear infinite;}
#slider li.fuenf {animation:cyclefive 25s linear infinite;}

#slider .info {
        background:rgba(0,0,0,0.7);
        width: 480px;
        height: 60px;
        position: relative;
        bottom: 95px;
        left: -500px;
        transition: all 0.3s ease-in-out; }

#slider .info h2 {
	color: #fff;
	font-size: 18px;
	font-weight: 200;
	line-height: 60px;
	padding: 0 0 0 20px;
}
#slider li#first:hover .info, 
#slider li#second:hover .info, 
#slider li#third:hover .info, 
#slider li#fourth:hover .info, #slider li#fifth:hover .info { left: 0px; }
#slider:hover li, 
#slider:hover .ladebalken {animation-play-state: paused;}


.ladebalken { 
       position: relative;
       top: -5px;
       width: 990px; 
       height: 5px;
       background: #000;
       animation: fullexpand 25s ease-out infinite;}

-->
</style>

User mit Werbefreiheit müssen den Wert bei margin-top: anpassen.
User mit anderen Designbreiten müssen die Breiten bei width: 990px anpassen.
Und wer das Baukasten-Design "Clean" verwendet, benötigt noch diese Codezeile dazu :
img {max-width:100%!important;}
mit einfügen im CSS-Code, vor dem --> </style>



Schritt 4: Headerfeld Höhe anpassen:

  • auf "Design"
  • auf "Designeinstellungen"
  • auf "Erweiterte Designeinstellungen"
  • zum Feld "Höhe des Headers"
  • wähle Höhe 250 Pixel aus

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