Slider Code anpassen?

vikkiv schrieb am 28.04.2015 um 10:25 Uhr

Hallo,

Meine Software:  WD10 Premium.

Ich möchte gerne den Coin Slider auf meiner HP anpassen. Habe eigentlich  alles irgendwie selbst hinbekommen bis auf das Problem mit dem Text zentriren. Ich möchte gerne den Text, der sich darunter in dem transparentem Balken befindet zentrieren..kriege ich aber nicht hin.

Ich weiss das man das mit den Prozenten (blau markiert) hier verändert. Nur das Problem ist man kann das nicht richtig aussteuern bzw.  zentrieren, weil nicht jeder Slide hat die selbe Textlänge.

Wenn ich aber die Angabe: margin-left: 480px; einfüge dann verschiebt sich alles zu Mitte inkl. der transparente Balken. Irgendwo mache ich hier einen Denk-Fehler???

Hier ist die HP dazu: http://slidertest.magix.net/HUNDEZENTRUM/

Kann mir jemand eventuell einen Tipp geben wo ich die Änderung vornehmen soll?

/*
Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/

.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; color: #FFFFFF; }

.cs-buttons { font-size: 0px; padding: 10px; float: left;  }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

.cs-title { width: 99%; padding: 10px 0 10px 1%; background-color: #416905; color: #FFFFFF; font-weight:bold; font:arial; font-size:15px; }
// .cs-title { width: 25%; padding: 10px 0 10px 1%; background-color: #416905; color: #FFFFFF; position:relative; top:0px; }

.cs-prev,
.cs-next { background-color: #416905; color: #FFFFFF; padding: 0 1% 0 1%; }

Danke

Vik

Kommentare

BeRo schrieb am 28.04.2015 um 13:43 Uhr

Mit einer kleinen Ergänzung kannst Du Dein Problem schnell lösen...

CSS kennt die Möglichkeit, Text innerhalb anderer Elemente zu zentrieren. Dazu genügt die Anweisung "text-align: center;"

Wenn wir das in die CSS Steuerdatei des Coinslider einbauen, sieht das so aus:

Damit das Zentrieren nicht durch andere Anweisungen beeinflusst wird, setzt du den "padding" Wert für die linke Seite am besten auf 0 (NULL), wie oben grün markiert zu sehen.

Viel Erfolg

Zuletzt geändert von BeRo am 28.04.2015, 13:43, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

vikkiv schrieb am 28.04.2015 um 15:03 Uhr

jup!!! das war es was ich gesucht habe. Vielleicht noch mal  zu Ergänzung für die anderen User: den Wert width 99% (in der Zeile 13) bitte auch auf 100% setzen, sonst fehlt rechts ein Stück von dem transparenten Balken.

Dankööö BeRo