Bilder stapeln - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Website hundertprozent CO2 neutral mit Host Europe
Newsletter anmelden
Direkt zum Seiteninhalt
Scan QR or Download Android App

Bilder stapeln

Scripte > Bildobjekte


Objekte übereinander stapeln.

CSS

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 ""
2 Kommentare
Durchschnittliche Bewertung: 125.0/5


Admin-Antwort
2018-11-13 08:04:21
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/WidgetObjekt und die Bilder müssen dann auf dem Server im Ordner images liegen.
Daniela Baris
2018-11-13 08:02:13
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
Vielen Dank für Dein Feedback.
Logo HTML5
Button Spenden

© 2009 - 2018





Besucher Statistik
» 1 Online
» 441 Heute
» 552 Gestern
» 1502 Woche
» 8734 Monat
» 63277 Jahr
» 309855 Gesamt
Record: 1420 (10.04.2014)
Zurück zum Seiteninhalt