Druckbare Version
Hallo Zusammen,
kämpfe heute schon den ganzen Tag damit herum, die Vorwärts/Rückwärts Links grafisch anzupassen sowie eine mit quadraten fortlaufende Progressansicht zu erstellen...
Kein Weiterkommen...
Gegen abend finde ich eine Seite auf der das wohl zu 100 % so umgesetzt ist.
http://www.frankdaniels.de
Hm, hat jemand ne idee wie sich die halbtransparenten (Vorwärts/Rückwärts) Buttons sowie die farbliche aktiven Punkte anstatt der Zahlen generieren lassen???
Danke Euch
Grüße
Messen
Das musst du mittels CSS machen...
Sent from my iPhone using Tapatalk
CSS für die Progresspunkte:
CSS für die Button rechts und links:Code:.noobButtons span.noobActive {
background-color: #B80C96;
}
.noobButtons {
margin: 0 auto;
text-align: center;
width: 220px;
}
.noobButtons span {
background-color: #414141;
display: block;
float: left;
height: 8px;
margin: 5px 5px 0 0;
padding: 0 4px;
text-indent: -3000px;
width: 0;
}
Code:.noobWrapper .image_container img, .noobWrapper .image_container img:hover {
box-shadow: 0 0 0 0 #FFFFFF;
}
.noobWrapper .buttons span.button_prev {
background: url("../../tl_files/fd/graphix/slider_button_prev.png") no-repeat scroll center center transparent;
display: none;
height: 450px;
left: -5px;
position: absolute;
top: 5px;
width: 30px;
}
.noobWrapper .buttons span.button_next {
background: url("../../tl_files/fd/graphix/slider_button_next.png") no-repeat scroll center center transparent;
display: none;
height: 450px;
position: absolute;
right: -5px;
top: 5px;
width: 30px;
}
Vielen Dank für den Code Auszug... hab ich soweit eigentlich verstanden...
Aber wo werden die Punkte definiert bzw. gegen die Ziffern (im Original) ersetzt...?
Wurden da Eigene Klassen benutzt? da ich diese im Code nicht finden konnte?
Dankeschön
Messen
Die Punkte sind die Rahmen um die "noobButtons span".
Gibst du ihnen einen border-radius, werden sie rund, ohne sind sie eben eckig.
Die Zahlen sind immer noch da, werden aber durch "text-indent: -3000px;" aus dem Blickfeld gerückt.
Anhang 8238
Insgesamt wird die Buttons im Script erzeugt, automatisch abhängig von der Anzahl der Slides..
An einer neuen Site habe ich es so gelöst (mit der aktuellen Version):
Anhang 8239
Anhang 8240
Die Wirkung ist die gleiche.
Vielen Dank -
ist aber ausschließlich CSS, da ist dann kein extra js Teil dabei oder?
Grüße
messen
JS ist dafür nicht nötig. Mit dem geposteten CSS Code solltest du es umsetzen können.
lg
Philipp
Hat funktioniert....
Perfekt - Danke!
Grüße
Messen:D
Hallo,
ich quäle mich nun auch seit Tagen, mit der Grafischen gestaltung der vor und zurück buttons.
Wenn ich den Taxt ausblende, egal, ob mit
text-indent:-99999px oder display:none;
funktionieren die Links nicht mehr, sprich das Blätter geht dann nicht mehr.
Ich habe nun die Farbe der Schrift auf transpaentz 0,1 gestellt, ich aber auch nicht die sauberse Art.
Einen Tipp, wie es anders gehen könnte?
besten Dank
Nachtrag:
wie immer, kaum ist die Frage gepostet, findet man die Antwort!
=> siehe css-ok.png
Hallo zusammen!
würde auch gerne den noobslider wie oben angegeben nachbauen - bin aber blutiger Anfänger...
Hab nun den Code von "jubel" genommen und bei meinem Stylesheet eingefügt/bzw. erstellt.
Aber bei mir hat sich jetzt gar nichts getan/verändert... hab ich etwas falsch verstanden?!? Dachte im Code bräuchte nichts verändert werden?!?
Wäre froh, wenn mir jemand einen Tip/eine Hilfe geben könnte.
Meine Seite:http://www.smp-motorsport.at/index.php/
lg Stefan
Schau mal in deine NoobSlider-Einstellungen. Mir scheint, du hast da den Punkt "Navigation aktivieren" nicht angekreuzt.
wow - danke für die rasche Antwort!!
war wirklich nicht angekreuzt... nach dem aktivieren hat sich aber leider noch immer nichts verändert... :(
Doch, da hat sich was geändert: Die Controls sind jetzt da, nur noch nicht an der richtigen Stelle!
Du musst sie jetzt noch so positionieren wie du sie haben willst, z.B.
Spiel mal mit diesen beiden Werten rum!Code:.control_buttons {
position: absolute;
left: 50%;
top: 200px;
}
also mit .control_buttons spreche ich die nummerierung an... also diese "1 2 3" navigation... (hoffe man versteht was ich meine...)
aber von den Pfeilen ist nichts zu sehen... (steh' ich grad voll am Schlauch oder wie?!?)
Korrekt!Zitat:
also mit .control_buttons spreche ich die nummerierung an... also diese "1 2 3" navigation
Für die Pfeile brauchst du auch zusätzlich noch die Grafiken und musst deinem Slider (wenn du obigen Code 1:1 übernehmen willst) die Klasse "noobWrapper " geben.
Schau dir am besten mal die Stelle auf der Originalseite (http://www.frankdaniels.de) im Firebug an und vergleiche mit deinem Code.
ahh ... jetzt glaub ich hab ichs - zumindest mit der navigation (1 2 3) klappts schon...
mit dem pfeil spiel ich mich jetzt noch... als anfänger hats man ganz schön schwer :D
aber vielen vielen dank für die tolle hilfe!!
Das wird schon! ;)
Ich versuche gerade den Text der Navigation Buttons weg zu schieben, was mir aber nicht gelingen will.
weder
.ce_noobSlide_button noch
.ce_noobSlide_button span
verändern mit text-indent:-9999px
etwas an der Position der der Bildnummern.
Über .control_buttons
bekomme ich zwar den Text verschoben, aber dann ist auch meine Hintergrundgrafik weg.
Was mach ich denn da falsch?
Danke für Euere Hilfe.
Texteinrückung ist für Absätze (paragraphs, Ps) gedacht. Du kannst ein Wort innerhalb eines Absatzes nicht einrücken, das macht keinen Sinn.
Formatiere die SPANs mit display:inline-block;, oder display:block, oder float:left, dann werden Sie wie ein Absatz behandelt und man kann Text dann auch einrücken.
Sehr gut, kaum macht man es richtig, funktioniert es.
Vielen Dank...
Nach etwas "einlesen" konnte ich auch selbst sogar die Kästchen erstellen.
Mein Problem ist aktuell, dass der sogenannte "Active-Wert" nicht funktioniert. Habe den Code von dieser Seite (oben) reinkopiert. Nur leider funtkioniert die Änderung beim Aktiven Element dann nicht. Was mache ich falsch? wieso funktioniert der "Active-Wert" nicht?
Hoffe es kann mir jemand von euch helfen.
Danke schon mal :-)