Contao-Camp 2024
Ergebnis 1 bis 5 von 5

Thema: [pk_noobslide] Sidebuttons (img) neben Content positionieren

  1. #1
    Contao-Fan
    Registriert seit
    02.08.2009.
    Ort
    Westfalen
    Beiträge
    639

    Frage [pk_noobslide] Sidebuttons (img) neben Content positionieren

    Ein "Hallo" in die Runde.

    Ich setze bei mir lokal pk_nooblslide ein, was ich dafür nutze, um Content durchsliden zu lassen, herkömmliche Verwendung also. Mein (selbstgeschaffenes) Problem ist nun, dass ich gerne die SideButtons (prev, next; Ausgabe: Zurück | Vorwärts) neben dem Content links und rechts entsprechend positionieren möchte. Außerdem soll die Textausgabe von Zurück und Vorwärts durch zwei versch. Bilder mit Pfeil nach links und rechts ersetzt werden.
    Ursprünglich sind diese ja im Template ce_noobslide_stop.tpl verankert durch:

    Code:
      
    <?php if($this->SideButtons): ?>
       <p class="buttons">	   
       	   <span id="prev<?php echo $this->noobHandlesId; ?>"><?php echo $this->previous; ?></span> | <span id="next<?php echo $this->noobHandlesId; ?>"><?php echo $this->next; ?></span>
       </p>
    <?php endif; ?>
    Trenne ich das ganze nun in zwei if-Abfragen, tausche die echo's gegen die zugehörigen img-Tags und positioniere sie jeweils vor und hinter den noobWrapper oder -container, so hat der Pfeil mit der id #prevID die falsche Funktion, slidet die Bilder also vor statt zurück und der Pfeil mit #nextID wird gar nicht angezeigt, bzw. nur ab und an beim Sliden des Bildes durch Autoplay.

    Ich bin verwirrt. Kann mir jemand helfen und mir sagen, wie sich dies bewerkstelligen ließe?

    Beste Grüße
    Alex
    ‎"The basic drives of humans are few: to get enough food, to find shelter, and to keep debt off the balance sheet."

  2. #2
    Contao-Urgestein
    Registriert seit
    07.04.2010.
    Ort
    Stuttgart
    Beiträge
    2.733
    User beschenken
    Wunschliste

    Standard

    tausche die echo's gegen die zugehörigen img-Tags
    Da liegt der Fehler.
    Versuche nicht die Buttons durch Bilder zu ersetzen.
    Gib ihnen eine feste größe und ein Hintergrundbild und display: block;
    dann gib ihnen noch text-indent: -9999px; um den text zu verstecken.

    Dann nurnoch per css positionieren oder den kompletten part im template.

    Das ganze hat den vorteil das der Text immernoch für Screenreader da ist, und du deine schönen Bildchen hast un du keine Bilder fix in der Code schreiben musst.

  3. #3
    Contao-Fan
    Registriert seit
    02.08.2009.
    Ort
    Westfalen
    Beiträge
    639

    Frage

    Hi psren,

    danke für deine Antwort!
    Ich habe das ganze nun so umgebaut, wie von dir beschrieben. Mein Problem ist nun nur, dass ich die Buttons ja trennen muss, damit links ein Bild (als Hintergrund nun) und rechts ein Bild neben dem Content angezeigt wird. Heißt, ich habe einmal das vor #noobContainer eingefügt:
    Code:
    <?php if($this->SideButtons): ?>   
       	   <div id="prev<?php echo $this->noobHandlesId; ?>"><?php echo $this->previous; ?></div>
    <?php endif; ?>
    Und dementsprechend das nach #noobContainer:

    Code:
      
    <?php if($this->SideButtons): ?>   
       	   <span id="next<?php echo $this->noobHandlesId; ?>"><?php echo $this->next; ?></span>
    <?php endif; ?>
    Doch klicke ich nun auf die Ausgabe von previous (also das Hintergrundbild) geht er nach vorne und nach hinten, das ist ärgerlich. Gleich gilt auch für die next-Ausgabe.

    Irgendeine Idee, woran das liegen könnte?

    Beste Grüße
    Alex


    EDIT: Ok, ich nehme alles zurück! Es war ein beschämender Fehler meinerseits. Ich hatte lediglich 2 Elemente eingebunden, weshalb natürlich das ganze ein Kreis war... :-).
    Besten Dank, psren!
    Geändert von Alexander (12.01.2011 um 16:14 Uhr)
    ‎"The basic drives of humans are few: to get enough food, to find shelter, and to keep debt off the balance sheet."

  4. #4
    Contao-Fan
    Registriert seit
    02.08.2009.
    Ort
    Westfalen
    Beiträge
    639

    Frage

    Ich melde mich hier nochmal zu Wort, da ich leider ein weiteres Problem habe.
    Psren's Lösung hat super geklappt, die Buttons sitzen da, wo sie hin sollen, neben dem Content. Links neben dem Content sitzt #prevID und rechts neben dem Content #nextID.Mein Problem ist nun aber, dass #nextID nicht anklickbar ist. Nur 1 Pixel breit ist das Feld, das man anklicken kann, der Rest ist zwar sichtbar aber anscheinend nicht zu klicken.

    CSS von #prevID:
    Code:
    #prevID {
        background: url("tl_files/arrow_prev.png") no-repeat scroll left top transparent;
        cursor: pointer;
        display: block;
        float: left;
        height: 40px;
        margin-top: 120px;
        width: 22px;
    }
    CSS von #nextID
    Code:
    #nextID {
        background: url("tl_files/arrow_next.png") no-repeat scroll left top transparent;
        cursor: pointer;
        display: block;
        float: right;
        height: 40px;
        margin-top: 120px;
        width: 22px;
    }
    Erhöhe ich nun width bei #nextID auf z.B. 25, so ist etwas mehr an "anklickbarem Bereich" verfügbar, geht aber nur bis 28, danach rutscht er unter den #noobWrapper.

    Jemand eine Idee? Link gibt es leider keinen, da, wie gesagt lokal.

    Beste Grüße
    Alex
    ‎"The basic drives of humans are few: to get enough food, to find shelter, and to keep debt off the balance sheet."

  5. #5
    Mike1410
    Gast

    Standard GLEICHES PROBLEM

    Genau das ist auch mein Problem. Bei allen Content- oder Imageslidern kann man mit CSS die Steuerungsbuttons Vor und Zurück (Next und Prev) wunderbar formatieren. Man setzt sie auf display:block, text-ident:-5000px und gibt ihn ein Hintergrundbild per background... mit.

    Leider funktioniert das im pk_noobslide nicht. Sobald man dies durchführt, sind zwar die beiden Vor- und Zurückbuttons optisch wie man sie haben will, aber funktionieren dann nicht mehr. Man kann sich dann totklicken die Funktion next bzw. prev wird nicht mehr ausgeführt.

    Vielleicht sollte sich der Entwickler hier nochmal Gedanken machen, denn dies ist für das Layout essentiell.

    https://github.com/kaipk/contao-pk_noobSlide/issues/11
    Geändert von Mike1410 (19.02.2013 um 18:18 Uhr)

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. Spalte neben der Hauptspalte
    Von andi-bar im Forum Layout / Templates / Holy Grail
    Antworten: 2
    Letzter Beitrag: 19.07.2010, 09:17
  2. Vorschlag: Layout neben Seitenname in der Seitenstruktur
    Von phreak im Forum Sonstiges zu Contao
    Antworten: 3
    Letzter Beitrag: 28.05.2010, 13:07
  3. Backend: Navigation vor statt neben Arbeitsbereich
    Von DavidBasel im Forum Sonstiges zu Contao
    Antworten: 3
    Letzter Beitrag: 06.04.2010, 23:21
  4. Antworten: 7
    Letzter Beitrag: 22.10.2009, 22:45

Lesezeichen

Lesezeichen

Berechtigungen

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