kostenloser Webspace werbefrei: lima-city


CSS3 Slideshow

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    Hallo! :wave:

    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! :wink:


    Gruß,
    webdesignerin :angel:


  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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:
    [...] 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...? [...]
    Wo und wie versuchst du denn die Inhalte einzubinden?
  4. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    Hallo ploco! :wave:

    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 :angel:
  5. webdesignerin schrieb:
    [...] 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.[...]
    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!
    Hast du ein paar Links zu den betreffenden Dokumenten?
  6. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    Hallo ploco! :wave:

    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 :angel:
  7. webdesignerin schrieb:
    [...] 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?
    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. :eek:

    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
  8. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    Hallo ploco! :wave:

    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. :eek:


    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. :confused:


    Gruß,
    webdesignerin :angel:

    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! :thumb:

    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
  9. webdesignerin schrieb:
    [...] 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?
    Wie sieht denn dein aktueller Entwurf aus? Würde es nicht reichen das Background-Image des animierten Elements mit einem Standard-Bild zu belegen?
  10. 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
  11. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    Hallo ihr Beiden! :wave:

    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. :confused:

    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 :angel:
  12. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!