Ergebnis 1 bis 8 von 8

Thema: CSS 3 Img Slider ohne JS, Problem mit overflow

  1. #1
    HTML Newbie
    Registriert seit
    11.12.2013
    Beiträge
    5
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS 3 Img Slider ohne JS, Problem mit overflow

    Hallo alle zusammen!

    Ich habe folgendes Problem, was ich weder mit google noch meiner Literatur gelöst bekomme.
    Für meinen Webshop möchte ich auf der Startseite unten eine Produktgalerie, "empfohlene Produkte".
    (vgl. zalando.de "Topseller des Tages")

    Mit nem Pfeil jeweils links und rechts soll man zu den nächsten 5 Produkten kommen (sollen seitlich reingefahren kommen).

    Soweit weiß ich auch wie mit der Animation unter CSS3 funktioniert, ich hänge aber schon an was anderem.

    Ich hab mir gedacht, die Produkte kommen in einen Container mit overflow:hidden. Der Container soll 15 Produkte enthalten, aber nur 5 sichtbar.
    Blöd nur, dass die "überflüssigen" Produkte nicht nach rechts weiter dargestellt werden (display:inline; hat hier nicht geholfen), sondern in die nächste Zeile gehen, was nicht Sinn der Sache ist.

    Hier mal etwas Code:

    Code:
    <!-- GesamtContainer für die Navigationspfeile seitlich und die "Gallery" in der Mitte -->
    <div id="containerGallery">
        <div id="arrowLeft"></div>
        
            <div id="containerProducts">
                     <div class="product"></div>
                     <div class="product"></div>
                    </div>
                      
        <div id="arrowRight"></div>
    
    
    </div>

    Ich hoffe, das ist soweit verständlich.

    mfG,
    Wuselpuff
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: CSS 3 Img Slider ohne JS, Problem mit overflow


  3. Folgende User finden die Antwort von explanator gut:


  4. #3
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: CSS 3 Img Slider ohne JS, Problem mit overflow

    Der Umbruch passiert wahrscheinlich, weil du keine Breite für deinen Slider angegeben hast.
    Ein Element bricht erst um, wenn das maximale seiner Breite erreicht oder überschritten ist.
    Guck doch mal im Debugger nach, wie dein Div "containerProducts" aussieht ...

    Bei einem CSS Problem kann man dir nicht wirklich ohne CSS Angaben helfen.
    Deine divs mit der Klasse product brauchen natürlich auch ein float:left um nebeneinander zu stehen.

    Also im Prinzip fehlt dir glaube ich sogar ein Element für einen Slider, welches dir nur den gewünschten Bereich deines gesamten Sliders anzeigt.
    Geändert von Bleistift (11.12.2013 um 17:35 Uhr)


  5. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    11.12.2013
    Beiträge
    5
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS 3 Img Slider ohne JS, Problem mit overflow

    Hallo nochmal!
    Die Tipps haben mir zwar enorm weitergeholfen, jedoch bin ich an die Grenzen der meisten Img-Slider geraten, weil viele nur mit Bildern funktionieren, nicht aber mit <div> Elementen, die dann jeweils wieder <div> Elemente und Bilder etc enthalten. Musste dann doch auf JS zurückgreifen.

    Ich steh hier jetzt eig. auch schon vor der Lösung, nur eine Kleinigkeit fuchst mich noch ohne Ende: Die "nächste" und "vorherige" Buttons.
    Hier der Code:

    Code:
    <a class="slidesjs-next slidesjs-navigation" href="#" title="Next">Next</a>
    Das ist der ORIGINAL-Code aus der fertigen Galerie.
    Im Code steht, lass dir die Buttons automatisch erzeugen, oder nutze deine eigenen (brauch ich).
    Füge deinen Buttons einfach nur class="slidesjs-next slidesjs-navigation" zu und es geht. Leeeider nicht.

    Beim href="#" springt er an den Seitenanfang und führt kein JS aus. Dabei nutze ich exakt den gleichen Code wie vorgegeben.
    Hab sogar mit Firebug getestet: Wenn ich den Code vom funktionierenden Button nehme, ausschneide und direkt an der gleichen Stelle einfüge, gehts nicht. Was ist denn da faul?
    Im Original gehts mit href="#", wenn ichs haargenau so nutze nicht, wtf?

  6. #5
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: CSS 3 Img Slider ohne JS, Problem mit overflow

    Und wieder ..
    Ein JS Problem ohne deinen JavaScript Code
    Oder meinst du dein a-Tag führt JavaScript aus?


  7. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    11.12.2013
    Beiträge
    5
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS 3 Img Slider ohne JS, Problem mit overflow

    Also bitte... nicht gleich so unfreundlich.
    Wie beschrieben, ist das hier KEIN JS Problem. Der Code macht was er soll, wenn ich die durch JS erstellten Buttons verwende. Und die sehen so aus wie im Code-Zitat oben beschrieben.
    Was dann als JS durchgeführt wird, ist erstmal egal. Es funktioniert ja.
    Es wundert mich nur, dass wenn ich einen Anker selbst mit der exakt gleichen Klasse setze, nichts passiert, außer dass er an den Anfang springt. Es wird also der Link ausgeführt, aber nicht der mit der Klasse verbundene Code.

    Das extremste ist ja, dass ich den obigen Originalcode mit Strg + X und Strg + V einfach mal ausgeschnitten und wieder an der gleichen Stelle eingefügt hab (Firebug/Chrome) und plötzlich funktioniert auch der Original-Anker nicht mehr, obwohl haargenau der gleiche Ausdruck da steht wie vorher. Das macht in meinen Augen gar keinen Sinn. Wie kann es sein, dass der gleiche Code unterschiedliche Rückgabewerte erzeugt?

    Anmerkung: Ich nutze den Slider von SlidesJS.com

  8. #7
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: CSS 3 Img Slider ohne JS, Problem mit overflow

    Ohne den Code kann man nicht nachvollziehen was du evtl falsch oder richtig gemacht hast. Bitte stelle deinen kompletten Code hier rein oder gib uns den Link zu deiner Seite bekannt.

  9. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    11.12.2013
    Beiträge
    5
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS 3 Img Slider ohne JS, Problem mit overflow

    Hat sich soeben erledigt.
    Für die, die den Slider auch nutzen wollen:

    Die Steuerungsbuttons für die Slideshow müssen unbedingt ein child vom Element mit der ID="slides" sein, sonst funktionierts nicht.
    Der JS Code greift über den Slides-Container auf die Buttons zu.

Ähnliche Themen

  1. Nivo Slider Problem.
    Von Azr im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 11.04.2012, 12:12
  2. css overflow problem
    Von Serpico73 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 04.08.2011, 16:46
  3. CSS: float:left; und overflow:auto; IE6 und kleiner==Problem
    Von LinuxMan im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 19.07.2008, 20:00
  4. Problem: style="overflow:auto" .....
    Von Dark_Dog im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 21.06.2007, 12:27
  5. #content overflow Problem
    Von mgraf im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 2
    Letzter Beitrag: 08.01.2007, 00:47

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •