image icon vor h3 Titel per css. nur wie?

[hinsen2k]

Moinsen,

ich beiß mir gerade die Zähne daran aus, dass ich mich an den css code eines joomla modules gewagt habe. dabei soll vor den modultitel ein kleines sternchen. ich habe im css ein h3 classe geschrieben, in der ich den stern als backround bild links ausgerichtet aufrufe. soweit so gut. der stern wird auch angezeigt, nur startet der modultitel genau da, wo der stern auch anfängt. mit padding und co komme ich nicht weiter, da dann auch der stern verschoben wird.
ich bin mir sicher, dass da nur ein gedankenfehler von mir drin steckt, aber vielleicht könnt ihr ja dabei helfen!

hier mein css-versuch:

#right h3 {
    background:url(../images/star.gif) bottom left no-repeat;
    margin:0px 0px 10px 0px;
    text-align:left;
    color:#313131;
    font-weight:bold;
    font-size:15px;
}

danke!

edit: gerade merke ich beim aktivieren des zweiten moduls, dass meine idee, wohl eher suboptimal ist. da wird dank meines h3 ja auch der stern angezeigt. das soll er da nicht, sondern nur bei einem speziellen modul. und nun?

gruß
hinsen

 

[sokie]

AW: image icon vor h3 Titel per css. nur wie?

Du kannst jedem Modul eine eigene Klasse geben, wenn du in den "erweiterten Rarametern" des Moduls den Modul-Klassen-suffix benutzt. Dann kannst du über den Klassennamen dein h3 für das spezielle Modul stylen.
zB:

.modulklasse_suffix h3{
    background: left center no-repeat url(img/star.png);
    font-size: 20px;
    padding-left: 24px;
    line-height: 24px;
}

 

[hinsen2k]

AW: image icon vor h3 Titel per css. nur wie?

hi sokie,

vielen dank für deine rasche antwort!!!

aber...nächste dummer frage von mir: was mach ich damit?
ich habe deinen code kopiert und in meine css eingefügt.
modulklasse-sufix habe ich durch das wort stern ausgetauscht, den link zum image angepasst. in den erweiterten einstellungen des moduls dann h3 eingetragen...nix. dann stern h3...nicht, dann -stern h3....wieder nix. wo liegt denn nun mein fehler? entschuldige bitte die sicher dumme nachfrage.
gruß

 

[sokie]

AW: image icon vor h3 Titel per css. nur wie?

poste doch einfach mal den Link zu der Seite.

 

[hinsen2k]

AW: image icon vor h3 Titel per css. nur wie?

die seite habe ich bisher nur lokal am testen....ist noch nicht online...brauchst du ne datei aus dem template? oder sogar mein ganzes template?

 

[CJDesign]

AW: image icon vor h3 Titel per css. nur wie?

Hallo hinsen,

also zunächst einmal grundsätzlich zu deiner Frage:
Das Einbinden der Hintergrundgrafik machst du prinzipiell schon richtig. Jedoch musst du zum einrücken des Textes das "padding"-Tag verwenden. (in deinem Falle "padding-left". [margin=Außenabstand, padding=Innenabstand]

Nun zu deiner Frage zwecks der Modulklassen suffix:
Wenn du einem Modul in Joomla eine Klassensuffix zuweist, so wird diese im Code übernommen und du kannst sie gezielt mittels CSS ansprechen. zu beachten ist hierbei, dass sich der neue Objektname aus "bestehender Bezeichnung" + der von dir angegebenen suffix bildet.

Bsp: Wir geben die Modul-Klassen-Suffix "_stern" an. Somit entsteht im code ein div element mit der klasse
class="moduletable_stern"
(deshalb verwende ich persönlich immer eine suffix mit unterstrich beginnend")

somit müsste dein css richtig lauten:

.moduletable_stern h3{
background-image: url ...usw
}

sprich: "formatierung für alle h3-Elemente, welche sich in einem div der klasse moduletable_stern befinden"

Hoffe das hilft dir weiter.

Gruß
CJD

EDIT:

...mit padding und co komme ich nicht weiter, da dann auch der stern verschoben wird.

Sehe ich nicht so. Mit margin verschiebst du wie gesagt das gesamte Objekt, mit Padding erzeugst du einen "Innenabstand". für padding sollte es gehen [getestet]
Könnte wenn überhaupt an der zusätzlichen Positions-angabe für die hintergrundgrafik liegen, welche ich aber auch sehr überflüssig finde. wenns wirklich nicht geht, mach die Positionierung weg und versuchs erneut mit padding - geht immer