Bitte um Css Hilfe !

Nikki379

Hallo,
ich habe folgendes problem !
Das ist mein slider :

Der schaltet nach wenigen sekunden um auf die schrift darunter !
dann erscheint wie oben abgebildet ein pfeil nur neben der 2 Schrift oben verschwindet dann auch der detailsbutton und das bild was oben mit einem weißen kasten abgebildet ist , tauchen auf dem bild darunter auf und verschwinden oben.
Doch da sind wir schon beim Problem das ganze klappt nicht
Beim ersten Bild habe ich es noch hinbekommen doch beim 2 Bleib ich stecken.
Das ist der abteil für den slider in der style.css:

Code

/* slider */
#faded {width:849px;height:350px;margin:0px 0;background:url(images/slider-bg.png) no-repeat 25px 5px}
#faded ul {list-style:none;padding:0;margin:0}
#faded ul.pagination {list-style:none;padding:0;margin:0;width:246px;height:350px;background:url(images/pagination-bg.jpg) no-repeat left top}
#faded ul.pagination li {padding:5px 0 0 5px;margin-bottom:-5px}
#faded ul.pagination li a {width:270px;height:85px;background-repeat:no-repeat;background-position:left -85px;background-image:url(images/thumb-sprite.png);text-decoration:none;display:block;color:#464646}
#faded ul.pagination li.current a {background-position:left top;color:#ffff}
#faded ul.pagination li a span {font-family:Tahoma;font-size:25px;font-weight:100;line-height:1.2em;display:block;padding:14px 0 0 0}
#faded ul.pagination li a small {font-family:Tahoma;display:inline-block;color:#428301;background-repeat:no-repeat;background-position:right -80px;background-image:url(images/arrows.gif);padding:0 17px 0 0}
#faded ul.pagination li a span,
#faded ul.pagination li a small {padding-left:40px}
#faded ul.pagination li.current a small {color:#ff0000;background-position:right 5px}
#faded ul.slides li {position:relative;width:100%}
#faded ul.slides li img {position:absolute;top:18px;right:230px}
#faded ul.slides li a {color:#fff;text-transform:uppercase;text-decoration:none;position:absolute;right:70px;top:22px;font-size:18px;line-height:1.2em;padding-left:8px;background:url(images/button-left.png) no-repeat left top;letter-spacing:-1px}
#faded ul.slides li a:hover {color:#ff0000}
#faded ul.slides li a span {display:block;padding-right:8px;background:url(images/button-right.png) no-repeat right top}
#faded ul.slides li a span span {background:url(images/button-tail.png) repeat-x left top;padding:15px 14px 17px 14px}
a {outline:0;border:0}

Alles anzeigen

So und nun kommt meine eigentliche Frage !
Wie bekomme ich es hin genau das glecihe noch mal für das 2 bild zu machen ? Ich habe schon alles verscuht neue class angelget alles doch das ist alles total bugy danach
wenn jemand eine idee hat bitte schreiben!
Das ist übrigens die html datei wo der slider eingebunden wird:

HTML

<div id="faded">
                <ul class="slides">
                    <li><img src="themes/shark-hosting/images/slide-title1.png"><a href="modules.php?name=store"><span><span>Details</span></span></a></li>
                    <li><img src="themes/shark-hosting/images/slide-title4.png"><a href="#"><span><span>Details</span></span></a></li>
                    <li><img src="themes/shark-hosting/images/slide-title3.png"><a href="#"><span><span>Details</span></span></a></li>
                    <li><img src="themes/shark-hosting/images/slide-title2.png"><a href="#"><span><span>Details</span></span></a></li>
                </ul>


                <ul class="pagination"><b>
                    <li><a href="/modules.php?name=store&op=details&ids=1" rel="0"><span><ul>schrift1</ul></span><small>Mehr Informationen</small></a></li>
                    <li><a href="#" rel="1"><span><ul>schrichft2</ul></span><small>Mehr Informationen</small></a></li>
                    <li><a href="#" rel="2"><span><ul>schrift3</ul></span><small>Mehr Informationen</small></a></li>
                    <li><a href="#" rel="3"><span><ul>schrift4</ul></span><small>Mehr Informationen</small></a></li>
</b>


                </ul>
            </div>

Alles anzeigen

Ich hoffe jemand kann mir helfen
Mit freundlichen grüßen Niklas.
ps. ich entschuldige mich für meine Rechtschreibung doch bin gerade sehr in Eile

explanator

Und wie heisst der Slider?
Hasst mal die Anleitung komplett gelesen zum Slider?
FAQ zum Slider gelesen?
E-Mail an den Entwickler des Sliders mit Problembeschreibung geschrieben?
Und ohne Javascript und Link zur Seite tappen auch wir völlig im dunkeln.

Nikki379

Per java script muss man da nix einbinden das kann ich aber auch noch mit schicken
Und es ist ein komplettes template also gekauft !
ich könnte ja einen kleinen teil zum download hier zur verfügung stellen !
Gutte idee =?

gruß

threadi

Eine bessere Idee wäre, wenn Du den Link zur Seite zeigst. Dann könnte man sich das direkt anschauen was Du aktuell hast.

Nikki379

Okay hier :
http://www.chunk-hosting.de/modules.php?name=store
Wie gesagt wenn der Slider auf den 2 button darunter wechselt sollten die Bilder mitziehen ich wüsste aber nicht wie ich das machen sollte.

threadi

Da kann ich nicht mal den Quellcode richtig analysieren, weil der HTML-Code dermaßen fehlerhaft ist, dass es pures Glück ist wenn irgendein Browser überhaupt etwas so anzeigt wie Du es gerne hättest:
http://validator.w3.org/check?verbose=…%3Fname%3Dstore
Korrigiere diese Fehler, sorge vor allem erstmal für einen korrekten Aufbau der HTML-Grundstruktur.

Nikki379

Das sind ja alles nur endtag fehler ?
Ist das wichtig oder ich sag mal so was für folgen kann es haben ?

synaptic

also ich hab jetzt keine lösung für dich parat, aber das problem erkannt und lass dir zwei dinge gesagt sein:
1) dein positionierungsgedöhnse is mehr als gruselig
2) nein man braucht keinen validen code für eine richtige anzeige, aber besser ist es schon, vor allem wenn man strict als doctype nutzt.

wieso is die ul relativ, die li absolute und die bilder darin wieder relativ?
du brauchst lediglich des relativ auf den li und des absolute auf den images darin.
wenn die inline-styles von dienem javascript kommen, is das script scheisse^^

ein anständiges plugin liefert entweder ein css mit, was anzupassen ist oder aber es gibt dir die möglichkeit die klassen der elemente in den defaults durch die options zu überschreiben.

dein css-ansatz(deaktiviertes JS) is soweit schon richtig, aber dein script haut die den käse kaputt.
wenn deine ul die richtige breite bekommt und somit auch ne art layout^^ bekommste beide bereiche nebeneinander gesetzt, stichwort "float"
dann brauchen deine LI bestimmt keine 100% breite die sie vom content bekommen und damit mehr platz einnehmen, als nötig.
dann haben deine LI keine höhe, was den murks mit deiner positionierung hervorruft.

alles in allem wirste noch ne wiele zu tun haben^^
viel erfolg

Nikki379

Okay trz. danke für deine Antwort :).
Ich glaube es wär einfacher wenn ich es doch anders Löse !

synaptic

naja grundlegend kannste probieren das css zu fixen für die anzeige an sich. deine konstruktion braucht ohne js nich mehr viel, um zu fruchten.
nur die kombi aus deiner gesamtfaxe da is kritisch und wird einiges an zeit brauchen.

und neu bauen ist nicht immer die lösung für probleme...

Nikki379

Ne ich hätte das jeze so gelöst das die bilder einfach immer da sind und wenn es umschaltet jeweils nur aufleuchtet mit cs effekte
joar.

synaptic

ja dann viel erfolg bei dienem unterfangen

threadi

Zitat von Nikki379

Das sind ja alles nur endtag fehler ?
Ist das wichtig oder ich sag mal so was für folgen kann es haben ?

Nicht dein Ernst? Du hast in deinem HTML-Code 2 (!) Doctypes, keiner davon ist HTML5 und trotzdem schreibst Du HTML5-Elemente in deinen "Quälcode"? Es sind auch eine Menge Elemente nicht beendet, wodurch sich jeder Browser das Aussehen erst selbst denken muss.

Also:
Erst HTML-Code überarbeiten, dann über Darstellung Gedanken machen.

Tags