2 Div's übereinander - oder wie maskiere ich einen JavaScript Slider?
 |
|
|
LinkBack | Themen-Optionen | Ansicht |
10.02.2011, 14:54
|
||||
|
||||
2 Div's übereinander - oder wie maskiere ich einen JavaScript Slider?
Hallo Forum,
Bei einem Projekt stehe ich vor folgendem Problem: Ich möchte auf der Startseite einen JavaScript Image-Slider anzeigen. Das klappt soweit ganz gut. Nun möchte ich diesen Slider aber "maskieren", d.h. es soll nicht einfach ein rechteckiges Bild angezeigt werden, sondern ich möchte den Slider mit einer Verlaufsmaske (png mit Verlauf von Background nach Transparenz) überlagern. Damit will ich quasi simulieren, dass die Slider-Bilder in den Hintergrund übergehen. Das Problem ist, dass ich die Maske nicht angezeigt bekomme...  So sieht meine HTML Struktur aus: HTML-Code:
<div class="front-media-container"> <div class="content-slider"> <ul id="slider1"> <li> <img src="/img/sliderjereziah.jpg" width="560px" height="410px" alt="Jereziah" /> </li> <li> <img src="/img/slideropheliah.jpg" width="560px" height="410px" alt="Opheliah" /> </li> </ul> </div> <div class="content-slider-mask"> <img src="./img/content_slider/content_slider_mask.png" width="560px" height="410px" alt=""> </div> </div> Code:
.front-media-container
.content-slider
.content-slider-mask {
width: 560px;
height: 410px;
}
.front-media-container {
position: relative;
top: 0px;
left: 0px;
}
.content-slider {
}
.content-slider-mask {
position: absolute;
top: 0px;
left: 0px;
width: 560px;
height: 410px;
}
 Wie löse ich das möglichst elegant? 
|
| Sponsored Links |
|
10.02.2011, 16:25
|
|||
|
|||
|
Schwer zu sagen
 Dein Code ist nicht vollständig. Ein Testcase wäre schön. Mir ist aufgefallen, dass deine Pfade unterschiedlich sind, dein content_slider_mask.png müsste im gleichen Verzeichnis liegen wie die aufrufende Datei ( ./ ....) Tut sie das?
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
| Sponsored Links |
|
10.02.2011, 17:45
|
||||
|
||||
|
Ups - hab ich ganz vergessen: Testcase
Grundsätzlich werden beide Div's angezeigt. Pfade stimmen also. Wenn ich die Opacity des Containers "content-slider" auf 0.1 reduziere, dann sehe ich den "content-slider-mask"... Nun möchte ich aber nicht die Deckkraft verringern; sondern es sollten beide Div's mit der vollen Opacity angezeigt werden (die Maske - also der darüberliegende Div- beinhaltet ja ein transparentes png). Freue mich auf weitere Anregungen 
Geändert von ThomB (10.02.2011 um 17:46 Uhr) Grund: Korrektur
|
|
10.02.2011, 17:49
|
|||
|
|||
|
Na also
Gib dem div.content-slider eine opacity von 0.9, das sollte für deine Zwecke ausreichen. Edit: Du hast noch ein paar Codefehler drin (allgemein) In XHTML musst Du manche Elemente wie br oder img mit einem Slash schließen, ein br hat nicht mal die schließende Klammer.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte Geändert von andir (10.02.2011 um 17:57 Uhr)
|
|
10.02.2011, 18:09
|
|||
|
|||
|
Die li-Elemente haben hohe z-index-Werte. Sie liegen über der Maske.
.content-slider positionieren und auf z-index:0 setzen würde die Stapelei ändern -- doch eigentlich finde ich, dass andirs Vorschlag das schönere Ergebnis liefert (edit: Ich weiß nur nicht, ob das browserübergreifend klappt).
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (10.02.2011 um 18:11 Uhr)
|
|
10.02.2011, 19:02
|
|||
|
|||
|
Nö, der IE 8 macht da nicht mit, er ignoriert die Maske wie es aussieht.
Vielleicht probierst Du es mal mit friccas Vorschlägen aus
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
|
10.02.2011, 19:08
|
|||
|
|||
|
Hm, ich sehe da online bereits einen Versuch.
ThomB, "positionieren" heißt nicht zwangsläufig absolut. Relative reicht. Und z-index:0 meine ich tatsächlich. @andir: Ja klar, IE8 weiß nix davon wie opacity funktioniert. Ich bin mir aber auch nicht sicher, dass alle Browser, die opacity kennen, auch wissen, wie sie dann stapeln müssen. Heikel.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
|
10.02.2011, 19:08
|
||||
|
||||
|
Vielen Dank für die freundliche Unterstützung!
Hab andir's Vorschlag zuerst ausprobiert. Funktioniert leider mit IE nicht...wieder mal typisch. Also gut - absolut positioniert und z-index gesetzt: schon funktioniert's. Bisher habe ich immer einen Bogen um z-index gemacht; doch heute habe ich endlich begriffen, wie man diese Funktion richtig einsetzt...  P.s.: bezüglich der offenen und nicht korrekt gesetzten XHTML Tags ist mir bekannt. Es ist so, dass ich neu als Administrator für das Projekt tätig bin. Die Seite existiert seit einigen Jahren und ist aus einem SMF Forum gewachsen. Alles von verschiedensten Leuten selber geschrieben - das sieht man halt einfach auch im Code (das PHP sieht noch übler aus)... So hab ich wenigstens noch genug zu tun - und werde mir früher oder später die Seite mit dem Validator vorknöpfen 
|
|
10.02.2011, 19:10
|
|||
|
|||
|
Zitat:
Siehe Vorposting.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
| Sponsored Links |
|
10.02.2011, 19:45
|
||||
|
||||
|
Zitat:
 *ironie off*So kanns gehen, wenn man noch schnell zwischen Tür und Angel am Code herumbastelt. Habs nochmal geprüft und gemäss Deinen Angaben eingefügt. Jetzt sehe ich keine Unliebsamkeiten mehr. Das CSS sieht jetzt so aus: Code:
.front-media-container
.content-slider
.content-slider-mask {
width: 560px;
height: 410px;
}
.front-media-container {
position: relative;
top: 0px;
left: 0px;
}
.content-slider {
position: relative;
top: 0px;
left: 0px;
z-index: 0;
}
.content-slider-mask {
position: absolute;
top: 0px;
left: 0px;
width: 560px;
height: 410px;
}
.content-slider-mask muss ich absolut positionieren, ansonsten rutscht dieser DIV nach unten und wird unterhalb des Sliders angezeigt. Wenn ich dann 100% weiss, wie ich alles positionieren möchte, werde ich dann auch das Bild der Maske noch etwas anpassen - im Moment ist hier noch ein Platzhalter am Werk. Ich hoffe, jetzt ist soweit alles korrekt - lol.
|
| Sponsored Links |
|
| Stichwörter |
| css, div übereinander, layer, z-index |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Zwei div's uebereinander (ein-/ausblenden) - Ansatz gesucht! | Toshi18 | CSS | 8 | 17.09.2010 14:36 |
| Horizontaler Scroll mit DIVs und Breite über Javascript | kolarsky | Javascript & Ajax | 1 | 16.08.2010 11:18 |
| zwei divs übereinander - mal wieder | maeck | CSS | 19 | 02.10.2008 00:41 |
| verschachtelte divs, javascript menü - firefox macht ärger | fork | (X)HTML | 14 | 05.11.2005 13:35 |
| Zwei DIVs übereinander, beide mit verschiedenem Hintergrund? | Boris | CSS | 6 | 13.03.2005 11:53 |
Linear-Darstellung
