CSS3 Slideshow
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aktueller entwurf
animation
bild
code
demo
einfachen code
farbe
funktionieren
genannten quellen
geschichte
glauben
http
image
konflikt
modifizierung
position
problem
test
url
webseite
-
Hallo!
Eigentlich ist es ganz einfach, aber bei mir will es einfach nicht funktionieren: Eine simple Slideshow (ausschließlich mit CSS, ohne JavaScript oder jQuery) soll den header meiner Webseite ersetzen.
Bisher habe ich folgende Tutorials ausprobiert:
1) Fullscreen Background Image Slideshow with CSS3
2) A Pure CSS3 Cycling Slideshow
Rufe ich die Demos der Tutorials auf den entsprechenden Webseiten auf, funktionieren sie, wenn ich sie hier hochlade ebenfalls - jedoch nicht, wenn ich sie in die Seite einbinde. Vielleicht gibt es ja mit der Slideshow CSS und der style.css auf meiner Webseite einen Konflikt...?
Zur Probe habe ich es mal mit einem einfachen Code probiert, aber auch der will nicht - zumindest mit Bildern nicht, denn mit Farben geht's.
- Demo mit Farben
- Demo mit Bildern
Bitte schaut's Euch mal an, denn vier Augen sehen mehr als zwei oder vielleicht habt ihr ja auch einen ganz anderen CSS Code im Kopf, mit dem ihr das Problem lösen würdet. In jedem Fall wäre ich euch für eine Antwort dankbar!
Gruß,
webdesignerin
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Bei den von dir genannten Quellen wird nicht versucht das Background-Image während der Animation zu verändern, sondern die einzelnen Elemente werden unsichtbar gemacht und/oder verschoben:
@-moz-keyframes cycle { 0% { top:0px; } 4% { top:0px; } 16% { top:0px; opacity:1; z-index:0; } [...] 96% { top:-325px; opacity:0; } 100%{ top:0px; opacity:1; } }Quelle: Pure CSS3 Cycle Slider
webdesignerin schrieb:
Wo und wie versuchst du denn die Inhalte einzubinden?
[...] Rufe ich die Demos der Tutorials auf den entsprechenden Webseiten auf, funktionieren sie, wenn ich sie hier hochlade ebenfalls - jedoch nicht, wenn ich sie in die Seite einbinde. Vielleicht gibt es ja mit der Slideshow CSS und der style.css auf meiner Webseite einen Konflikt...? [...]
-
Hallo ploco!
ploco schrieb:
Bei den von dir genannten Quellen wird nicht versucht das Background-Image während der Animation zu verändern, sondern die einzelnen Elemente werden unsichtbar gemacht und/oder verschoben:
Dennoch funktionieren die Demos in einem entsprechenden Unterordner meiner Webseite, solange ich die angepasste CSS und den dazugehörigen HTML Code nicht in meine Webseite einbinde.
ploco schrieb:
Wo und wie versuchst du denn die Inhalte einzubinden?
Naja, ich ändere halt den Bildpfad und ggf. auch die Anzahl der Bilder oder die Slideshow-Dauer. Aber selbst als ich einfach nur den Bildpfad geändert habe - der meinerseits eigentlich korrekt angegeben war - hat es nicht funktioniert. Der entsprechende Container ist dann einfach leer geblieben, weil die Bilder wahrscheinlich nicht gefunden werden konnten (was ich mir aber auf Grund des korrekt angegebenen Bildpfades nicht erklären kann).
Gruß,
webdesignerin
-
webdesignerin schrieb:
Wenn es ohne Modifikation deinerseits funktioniert, müssen deine Änderungen für die Komplikationen verantwortlich sein. Trotz den scheinbar korrekten Bildpfaden würde ich - wie auch du - darauf spekulieren, dass diese die Auslöser sind. Da die Pfade wahrscheinlich relativ sind, musst auch auf das Verzeichnis der Stylesheet-Datei achten!
[...] Dennoch funktionieren die Demos in einem entsprechenden Unterordner meiner Webseite, solange ich die angepasste CSS und den dazugehörigen HTML Code nicht in meine Webseite einbinde. [...]
Naja, ich ändere halt den Bildpfad und ggf. auch die Anzahl der Bilder oder die Slideshow-Dauer. Aber selbst als ich einfach nur den Bildpfad geändert habe - der meinerseits eigentlich korrekt angegeben war - hat es nicht funktioniert.[...]
Hast du ein paar Links zu den betreffenden Dokumenten? -
Hallo ploco!
Also was die Tutorials der anderen Seiten betrifft, scheint es zunehmend tatsächlich an einem Modifikationsfehler meinerseits zu liegen. Ich werde das nocheinmal überprüfen und ebenfalls eine Demo-Datei aufbereiten, die ich dann hier verlinken werde.
Aber was den ganz einfachen Code mit den Farben angeht, so verstehe ich nicht, warum er nicht in umgekehter Weise mit Bildern funktioniert. Zugegeben ist mir dieses einfache Script lieber, weil ich die ganzen anderen Effekte aus den anderen Tutorials ja nicht brauche. Und bei diesem Script ist auch am deutlichsten mein beschriebenes Problem zu sehen: die Bildpfade scheinen trotz korrekter Angaben und keiner Modifizierung nicht richtig zu sein. Hast Du eine Erklärung dafür?
Gruß,
webdesignerin
-
webdesignerin schrieb:
Die Änderung der Background-Images als Animation in Keyframes ist (noch) nicht mit allen Browsern möglich. Ich habe die ganze Geschichte mal mit der aktuellsten Version von Chrome ausprobiert und siehe da: Es hat funktioniert.
[...] Aber was den ganz einfachen Code mit den Farben angeht, so verstehe ich nicht, warum er nicht in umgekehter Weise mit Bildern funktioniert. Zugegeben ist mir dieses einfache Script lieber, weil ich die ganzen anderen Effekte aus den anderen Tutorials ja nicht brauche. Und bei diesem Script ist auch am deutlichsten mein beschriebenes Problem zu sehen: die Bildpfade scheinen trotz korrekter Angaben und keiner Modifizierung nicht richtig zu sein. Hast Du eine Erklärung dafür?
Deine Lösung ist somit korrekt, aber aufgrund der mangelnden Browser-Kompatibilität nicht einsetzbar. Ich würde dir empfehlen alle Bilder gefloatet in ein Div zu packen und auf eine Animation durch Verschieben/ Ein- & Ausfaden zu setzen.
Beitrag zuletzt geändert: 11.6.2012 20:31:21 von ploco -
Hallo ploco!
ploco schrieb:
Die Änderung der Background-Images als Animation in Keyframes ist (noch) nicht mit allen Browsern möglich. Ich habe die ganze Geschichte mal mit der aktuellsten Version von Chrome ausprobiert und siehe da: Es hat funktioniert.
Dass manche CSS3 Spielereien noch nicht mit allen Browsern möglich sind war mir klar, aber da das mit den Farben funktioniert hatte und ich bereits den neuesten Firefox habe, dachte ich es wäre ein Programmierfehler. Ich aktualisiere Chrome mal eben und probiere es dann selbst mal.
ploco schrieb:
Deine Lösung ist somit korrekt, aber aufgrund der mangelnden Browser-Kompatibilität nicht einsetzbar. Ich würde dir empfehlen alle Bilder gefloatet in ein Div zu packen und auf eine Animation durch Verschieben/ Ein- & Ausfaden zu setzen.
Könntest Du mir das mal bitte als Code veranschaulichen? Ich habe in den letzen Tagen so viel gelesen und ausprobiert, dass ich jetzt nicht mehr weiß, wo vorn und wo hinten ist.
Gruß,
webdesignerin
Edit: Ich habe es gestern noch mit dem 1. Tutorial (Fullscreen Background Image Slideshow with CSS3) hinbekommen. Das Problem dabei waren nicht die Bildpfade, sondern die Zeile -moz-border-radius in meiner style.css und die Zeile position:fixed in der slideshow.css. Kaum hatte ich das Präfix -moz- entfernt und aus dem position:fixed ein position: absolute gemacht, funktionierte es!
Allerdings funktioniert es ja nicht in allen Browsern und da dachte ich mir, dass man bei solchen Browsern eben einfach nur das erste Bild statisch anzeigen lassen könnte. Geht das, wenn ja: Wie?
Beitrag zuletzt geändert: 12.6.2012 9:32:17 von webdesignerin -
webdesignerin schrieb:
Wie sieht denn dein aktueller Entwurf aus? Würde es nicht reichen das Background-Image des animierten Elements mit einem Standard-Bild zu belegen?
[...] Allerdings funktioniert es ja nicht in allen Browsern und da dachte ich mir, dass man bei solchen Browsern eben einfach nur das erste Bild statisch anzeigen lassen könnte. Geht das, wenn ja: Wie? -
Hi webdesignerin
Du solltest dir mal die CSS3-Slideshow von designmadeingermany.de anschauen, die ist komplett CSS, ich glaube das ist genau was du suchst.
MfG raphael811
Beitrag zuletzt geändert: 12.6.2012 17:23:29 von raphael811 -
Hallo ihr Beiden!
ploco schrieb:
Wie sieht denn dein aktueller Entwurf aus?
Mein aktueller Entwurf, mit dem ich - bis auf die Aufzählungszeichen - zufrieden bin: CSS3 Slideshow
ploco schrieb:
Würde es nicht reichen das Background-Image des animierten Elements mit einem Standard-Bild zu belegen?
Bitte veranschaulicher mir das doch bitte nochmals mit einem Codeschnipsel, sonst versteh' ich wieder nur Bahnhof.
ploco schrieb:
Du solltest dir mal die CSS3-Slideshow von designmadeingermany.de anschauen, die ist komplett CSS, ich glaube das ist genau was du suchst.
Um ehrlich zu sein ... ist sie genau das, was ich NICHT suche.
Gruß,
webdesignerin
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
