Design Clean
    >> Tipps zum anpassen

Grafik-Slider Beispiel

weiteres Grafik-Slider Beispiel


Hier den Inhalt
Es gehen auch verlinkte Texte. Den Inhalt muss man von seiner Länge her an die Bild-Höhe anpassen.


Der HTML-Code :
<div class="img-slider">
<img class="img-top" src="GRAFIKADRESSE.jpg">
<strong> Überschrift </strong>
<br>
Hier der Inhalt unter der Grafik
</div>

Der CSS-Code :
<style type="text/css">
<!--
.img-slider {
   width: 445px;
   height: 80px;
   padding:10px;
   position: relative;
   border: 1px solid #777777;
   overflow: hidden;
}

/* Position Grafik sichtbar */
.img-top {
  position: absolute;
  top: 0px; left: 0px;
  transition: all 1s linear;
  z-index:1;
}

/* Position Grafik oben */
.img-slider:hover .img-top { margin-top: -100px; }
-->
</style>
Bei .img-slider seht Ihr Breite width: und Höhe height:
Gebt hier Eure Bildgröße an, Minus 20 Pixel !

Beispiel:
Eure Grafik hat die Breite 500 Pixel. Das width: bekommt 480px;
Eure Grafik hat die Höhe 200 Pixel. Das height: bekommt 180px;
Das margin-top: bekommt -200px;

Tipp:
Das Textfeld ( im CSS-Code .img-slider ) kann z.B.
auch eine Hintergrundfarbe oder ein Hintergrundbild bekommen

- Hintergrundfarbe mit background-color: #EEEEEE;
- Hintergrundbild mit background-image: url(GRAFIKADRESSE.jpg);
- Textfarbe mit color: #000000;
- Schriftgröße mit font-size: 14px;




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



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

nach Oben