Bilder stapeln - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Bilder stapeln

Scripte > Bildobjekte


Objekte übereinander stapeln.

Mit CSS (z-index) kannst Du Objekte (Bilder, Text, Container, ...) übereinander legen.

Image auf den Server in das Verzeichnis "images" kopieren.
Example:
demo_img1.jpg
demo_img2.jpg
demo_img3.jpg
demo_img4.jpg


Demo:

Beispiel mit Farbpalette:

Beispiel mit Bildern:

z-index: 1
z-index: 2
z-index: 3
z-index: 4
z-index: 5


Code für das HTML-Objekt (Demo mit Farbpalette):

<div style="position: absolute; top: 0px; left: 10px; width: 100px; height: 60px;
background-color: #FFFF97; z-index: 1;"> z-index: 1 </div>
<div style="position: absolute; top: 30px; left: 50px; width: 100px; height: 60px;
background-color: #A4FFA4; z-index: 2;"> z-index: 2 </div>
<div style="position: absolute; top: 60px; left: 90px; width: 100px; height: 60px;
background-color: #FF9F9F; z-index: 3;"> z-index: 3 </div>
<div style="position: absolute; top: 90px; left: 130px; width: 100px; height: 60px;
background-color: #1F90FF; z-index: 4;"> z-index: 4 </div>
<div style="position: absolute; top: 120px; left: 170px; width: 100px; height: 60px;
background-color: #7FFF00; z-index: 5;"> z-index: 5 </div>



Code für das HTML-Objekt (Demo mit Bildern):

<div style="position: absolute; top: 0px; left: 10px;
z-index: 1;"> <img src="images/demo_img1.jpg"> </div>
<div style="position: absolute; top: 70px; left: 80px;
z-index: 2;"> <img src="images/demo_img2.jpg"> </div>
<div style="position: absolute; top: 140px; left: 150px;
z-index: 3;"> <img src="images/demo_img3.jpg"> </div>
<div style="position: absolute; top: 210px; left: 220px;
z-index: 4;"> <img src="images/demo_img4.jpg"></div>

Feedbacks zu ""

es gibt insgesamt 1 Kommentar(e)


  1. Daniela Baris schreibt am 29.08.2015, 19.25 Uhr

    Hallo, funktioniert super. Doch leider wird der HTML Code nicht gespeichert. Wird die Vorschau geschlossen ist es wieder wie davor. Ich habe eine Text- Datei mit eingefügten Bilder. Da ich in HTML nicht fit genug bin, sollte dies auch so bleiben. :-) Tipps?? BZW: Wie komme ich außer über die Vorschau zum hinterlegten HTML- Code? Vielen Dank Dani
    Admin-Antwort: Hallo Dani, verstehe Dein Anliegen nicht so richtig. Mit welchem Programm arbeitest Du? Mach mal einen Screenshot, wo der Code drin ist. Der Code gehört in ein HTML/Widget-Objekt und die Bilder müssen dann auf dem Server im Ordner images liegen.


Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 19 Online
 » 139 Heute
 » 875 Woche
 » 5205 Monat
 » 24992 Jahr
 » 271570 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü