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

<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"

<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

<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

FB Messenger:

Anklicken und im Messenger schreiben

weitere Tutorials :

Boxen

mehr

Bilderslider im Header

Bilder-Slider auf dem Header

Schritt 1: Div um das Design legen

Schritt 2: Der HTML-Code des Sliders

Schritt 3: Der CSS-Code

Schritt 4: Headerfeld H�he anpassen:

FB Messenger:

weitere Tutorials :

Seitentipps

Testbox 1

Testbox 2

Bilderslider im Header

Bilder-Slider auf dem Header

Schritt 1: Div um das Design legen

Schritt 2: Der HTML-Code des Sliders

Schritt 3: Der CSS-Code

Schritt 4: Headerfeld H�he anpassen:

Forum Login

Info zum Login

FB Messenger:

weitere Tutorials :

Seitentipps

Testbox 1

Testbox 2