Hilfe bei Easy-Slider CSS

[Foos]

Hallo, ich habe auf meiner Homepage den Easy Slider eingebaut.
Der funktioniert ja mit Buttons. Der CSS Code dieser Buttons ist folgender:

    #slider ul, #slider li{
        margin:0;
        padding:0;
        list-style:none;
        border: 0px;
        font-size: 10px;
        }
    #slider, #slider li{ 
        /* 
            define width and height of container element and list item (slide)
            list items must be the same size as the slider area
        */ 
        width:930px;
        font-size: 10px;
        height:325px;
        overflow:hidden; 
        }
#prevBtn, #nextBtn{ 
            display:block;
            width:30px;
            height:77px;
            position: absolute;
            left:160px;
            top:270px;
            }    
        #nextBtn{ 
            left:1120px;
            }                                                        
        #prevBtn a, #nextBtn a{  
            display:block;
            width:30px;
            height:77px;
            background:url(../images/btn_prev.gif) no-repeat 0 0;    
            }    
        #nextBtn a{ 
            background:url(../images/btn_next.gif) no-repeat 0 0;    
            }

Auf jeden Fall ist auf meinem Notebook alles ok! Auf einem größerem Bildschirm versetzen sich die Buttons im Fenster aber!

Das das an "absolute" liegt hab ich herausbekommen. Wenn ich das absolute aber wegmache, dann verschiebt sich die ganze Seite. Also ich will das die Pfeil-Buttons immer rechts und links neben den Bildern bleiben.

Die Seite wäre:


JEmand eine Idee?

 

[sokie]

AW: Hilfe bei Easy-Slider CSS

die kürzeste Lösung ist vielleicht die, dass du dem Container #slidecont positon:relative gibst, und die position der Buttons entprechend korrigierst, die sich dann 'abslolute' nach der linken oberen Ecke des #slidecont positionieren.

 

[TMP2k1]

AW: Hilfe bei Easy-Slider CSS

Ich konnte dein Problem jetzt leider nur ganz kurz angucken, daher bin ich nicht sicher, ob dir das jetzt weiter hilft.
Aber was ich mache, um derartigen Verschiebungen vorzubeugen:

- DIV um das betreffende Objekt (also hier um die Bildershow)
- diese relativ ausrichten
- Objekte darin, also in dem Fall die Elemente der Diashow an sich, absolut ausrichten

Sollte in der Regel klappen

\Edit: Gut, ich mein eigentlich das gleiche wie sokie ... war bloss länger am tippen

 

[Foos]

AW: Hilfe bei Easy-Slider CSS

hm ok merci...
irgendwie verschwindet mir dann aber ein button!

sokie, könntest du mir vielleicht erklären, warum ich "slidecontent" relativ setzen muss und nich die buttons? wär super

 

[sokie]

AW: Hilfe bei Easy-Slider CSS

Hallo Foos,
wenn man elemente absolut in einem Container positionieren will(aber nicht absolut im Browserfenster, dann muss dieser container die CSS Rgel position:relative bekommen.
dann kann man zB hergehen und mit position:ablolute;top: yyy; right:0; ein element amrechten Rand dieses Containers platzieren (so wie es etwa zB für den 'Next' button interessant wäre) und hat den Vorteil, dass ein zentriertes Layout bei jeder fenstergrösse funktioniert, und die Buttons an der entsprechenden Stelle bleiben.
Hat man auf der anderen Seite den umgebenden Container nicht 'relative' positioniert, richten sich die absolute-positionierten Buttons am Browserfenbster aus, was eben dazu führt, dass sie nur bei einer einzigen Auflösung an der richtigen Stelle sind.

Diese Lösung würde mit dem wenigsten Aufwand auf dein Problem anzuwenden sein. Ein anderer Weg wäre die <a elemente display: block; zu formatieren(height und width) und diese und die <ul>(display:block,height,width) als floats in dem Container zu definieren.

 

[Foos]

AW: Hilfe bei Easy-Slider CSS

wow danke für die erklärung ... jetzt check ich das auch!
meine dummen pfleile bekomm ich trotzdem irgendwie nich hin. immer hauts etwas durcheinander

 

[feelx75]

AW: Hilfe bei Easy-Slider CSS

Hi Foos

Versuch mal Folgendes:

1) bei #wrapper: nimm mal overflow-hidden raus (sonst verschwindet der NEXT button ins nirvana am rechten rand)

2) #slidecont position: relative; zuweisen (aus Gründen, die sokie schon nannte)

3) #prevBtn, #nextBtn: position: absolute; (statt fixed)
und ausrichten, etwa so:

#prevBtn:
left:-45px;
top:140px;

#nextBtn:
left:935px;
top:140px;

So hats bei mir recht gut ausgesehen... (Augenmass Bei ner Auflösung von ~1024width hast du aber ne horizontale Scrollbar, da musst halt noch mit den Abständen, resp. mit der Positionierung und allenfalls Grösse etwas spielen und ausprobieren.

PS: Die site, wie auch deine Werke kommen RICHTIG gut! Respekt! Ganz toll! Die Bilder würde ich aber etwas weniger schnell sliden - also etwas länger stehen lassen. Ich, der sie noch nie gesehen hat, komme gar nicht mehr nach mit lesen, betrachten und bestaunen...

lg
feelx

 

[Foos]

AW: Hilfe bei Easy-Slider CSS

danke feelx für das lob...

irgendwie klappts einfach nich. der button - egal ob links oder rechts - liegt mal hier mal hier - shit!!!