ccs problem [gelöst]
am 30.09.2009 - 10:34 Uhr in
Hallo Leute,
habe eine kurze Verständnisfrage zum Thema css theming in der styles.css
Ich benutze das Modul views-carousel. Dieses Modul gibt mir einen Container aus der vom Modul standartmäßig auf 245px breite definiert ist. Dies Möchte ich auf 1000px ändern.
Natürlich will ich das nicht in der css datei vom Modul machen sondern in der styles.css
Soweit so gut.
Mit Firebug finde ich raus, dass das Element das ich verändern will .jcarousel-container-horizontal heißt
Füge ich jetzt einfach
.jcarousel-container-horizontal
{
width:1000px;
}
in die styles.css ein funktioniert dies nicht. Ich denke mal da muss noch was vor das .jcarousel-container-horizontal und zwar etwas das mit einer # beginnt. Ich habe aus webcasts schon mitbekommen das ich das auch mit Firebug rausfinde, aber ich raffs nit.
Habe jetzt schon ewig viele sachen vorangesetzt aber der Container verändert sich nicht.
Kann mir da einer nen Einblick geben ???
Gruss Bastian
- Anmelden oder Registrieren um Kommentare zu schreiben
CSS
am 30.09.2009 - 10:40 Uhr
Wenn Du mit Firebug das Element gefunden hast (Klasse
.jcarousel-container-horizontal
) suchst Du Dir dort auch gleich eines der übergeordneten HTML-Elemente heraus. Von einem dieser Elemente (zum Beispiel<div class="node">
) setzt Du dann die Klasse davor:.node .jcarousel-container-horizontal
{
width:1000px;
}
hth,
Stefan
--
sei nett zu Deinem Themer
Tipp: Beachte die Verhaltensregeln des DrupalCenter.
Hi Stefan, mein Ausdruck
am 30.09.2009 - 10:59 Uhr
Hi Stefan,
mein Ausdruck sieht jetzt so aus
.jcarousel-skin-tango .jcarousel-container-horizontal
{
width:1000px;
}
und es funktioniert. Das ist jetzt ein Element hoch gegangen. Noch ein Elemt weiter hoch währe
.view-content .jcarousel-container-horizontal
{
width:1000px;
}
da klappt es wohl logischerweise auch. An dem logischerweise erkennst du aber vieleicht das ich den Zusammenhang nicht verstehe. Wiese funktiert das ohne das was vorangestellt ist nicht und wenn ich einfach was voranstelle das eins höher liegt klappt es??
Außerdem verstehe ich nicht so ganz wo der unterschied liegt zwischen etwas das mit .beginnt und vorangestellt wird und etwas das mit #beginnt und vorangestellt wird.
Bin verwirrt... Aber vielen dank schonmal das es jetzt funktioniert.
Hallo Bastian, der
am 30.09.2009 - 11:08 Uhr
Hallo Bastian,
der unterschied zwischen . und # ist eigentlich relativ einfach zu erklaeren.
- Alles was mit einem . beginnt ist eine Klasse
- Alles was mit einem # beginnt ist eine ID
Klassen koennen beliebig oft im HTML-Code verwendet werden, IDs sollten nur einmal in deinem HTML-Code auftreten.
Die Geschichte mit vorangestellten IDs oder Klassen im CSS:
Je genauer du einen Pfad zu einem Element angibst desto hoeher werden deine Formatierungen gewertet. Gibst du nur formatierst du nur .jcarousel-container-horizontal kann es sein dass ein anderes Stylesheet .jcarousel-skin-tango .jcarousel-container-horizontal formatiert. Da dies ein genauer spezifizierter Pfad ist wird er greifen und nicht deiner.
ah ok das verstehe ich doch
am 30.09.2009 - 11:57 Uhr
ah ok
das verstehe ich doch auch mal :-)
Wie sieht es dann aus, theoretisch könnte ich dann also so ein konstrukt bis zu höchsten ebene in die css baun
.höchstebene .ebene2 .ebene3 .ebene3 .verwendetesObjekt
gibt es da nicht ne abkürzung? sowas wie
&höchsteebene .verwendetesObjekt
damit ich nicht theoretisch alles bis oben ausschrieben müsste.
Gruss Bastian
im Normalfall reicht es wenn
am 30.09.2009 - 12:11 Uhr
im Normalfall reicht es wenn du bist zum nächst höheren Element gehst, das eine ID hat. Also
#element-mit-id .element-mit-class
Die ID eines Elements sollte auf der Seite eigentlich einzigartig sein, eine Klasse kann beliebig oft vorkommen. Deshalb kann man dementspechend jedes Element mit einer Klasse über das übergeordnete Element, das eine ID hat, identifizieren.
Ok bedeutet also ich suche
am 30.09.2009 - 12:29 Uhr
Ok
bedeutet also ich suche mir mit firebug meine klasse die ich verändern will
.verändern
danach suche ich mit firebug nach oben gehend die nächste id
#nächsteId
dann kann ich im css einfach schreiben
#nächsteId.verändern
und schon müsste es funktionieren.
Liege ich da richtig??
bei mir hats bis jetzt immer
am 30.09.2009 - 13:26 Uhr
bei mir hats bis jetzt immer genau so funktioniert.
Dann bedanke ich mich recht
am 30.09.2009 - 13:35 Uhr
Dann bedanke ich mich recht herzlich und versuche mal das neue Wissen umzusetzen.
Gruss Bastian