CSS Image Launch - Website X5 Hilfe - Die Helpsite

Website hundertprozent CO2 neutral mit Host Europe

Hauptmenü

Startseite
Übersicht/Suchen
Virtual Website X5
WSX5 Tools
Scripte
- Bildobjekte
- Bildergallerien
- Menü Navigation
- Button Navigation
- Listen Navigation
- Form-Mailer
- Multimedia
- Text- & Tabellenobjekte
  - CMS Editor
  - Texte mit Schatten
- Tools
- Attachment
- Protection
- Snipped
Tutorials
- Website X5
- Fremdscripte
  - Gästebuch Hinnendahl
- Settings
  - JavaScript aktivieren
Übersichten
- HTML & Co.
- Microsoft DOS
- Microsoft Shortcuts
- Microsoft Zeichensätze
Download
Template
Online-Tools
Imagehost
Links
Testebene
- Forum-Test
- Member-Test
Gästebuch
Kontakt
Impressum

CSS Image Launch

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 0 Kommentar(e)

Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *