CSS-Frage

[x-drive]

Hallo zusammen,

für die Website https://clipproject.info/freecartoons/ versuche ich gerade Menu zu gestalten.

Ich möchte gern, dass der Link "Animals Cartoons" andere Hintergrundfarbe sowie abweichende Höhe des Blocks bekommt. Dafür habe ich in CMS (Joomla) die Option "CSS-Style für Links" den Class "rubrics" definiert und in CSS-Datei folgende Attribute gesetzt.

Code: Alles auswählen

.rubrics a {
list-style-type : none;
display : block;
height : 21px;
width : 146px;
background-color : #6d91e7;
color : #ffffff;
font-family : Arial, Helvetica, sans-serif;
font-size : 9pt;
font-weight : bold;
text-decoration : none;
margin-bottom : 1px;
padding-left : 4px;
padding-top : 2px;
margin-top : 0;
}
.rubrics a:hover {
display : block;
height : 21px;
width : 146px;
background-color : #6d91e7;
color : #ffffff;
font-family : Arial, Helvetica, sans-serif;
font-size : 9pt;
font-weight : bold;
text-decoration : underline;
margin-bottom : 1px;
padding-left : 4px;
padding-top : 2px;
margin-top : 0;
}

Es funktioniert aber nicht. Was mache ich denn falsch?

[x-drive]

Hi,

inzwischen habe folgende Lösung gefunden. Da Joomla für jeden neuen Link eine neue Klasse definiert "item-501", "item-502", "item-503" etc., habe ich in der CSS-Datei mehrere entsprechende Klassen angelegt:

Code: Alles auswählen

/HTML CODE/

<ul class="menu">

<li class="item-494"><a href="LINK_1" >Home</a></li>
<li class="item-502"><a href="LINK_2" title="Free Cliparts" >Clipart Gallery</a></li>
<li class="item-501"><a class="rubrics" href="LINK_3" title="Animals Cartoons free">Animals Cartoons</a></li>
<li class="item-502"><a class="rubrics" href="LINK_4l" title="Animals Cartoons free">Animals Cartoons</a></li>

</ul>

/END HTML CODE/


.menu a &#123;
display&#58; block;
height&#58; 25px;
width&#58; 146px;
background-color&#58;#4870CE;
color&#58;#FFFFFF;
font-family&#58; Arial, Helvetica, sans-serif;
font-size&#58; 10pt;
font-weight&#58; bold;
text-decoration&#58; none;
margin-bottom&#58; 1px;
padding-left&#58; 4px;
padding-top&#58; 2px;
margin-top&#58; 0px;
&#125;

.menu a&#58;hover &#123;
display&#58; block;
height&#58; 25px;
width&#58; 146px;
background-color&#58;#4870CE;
color&#58;#FFFFFF;
font-family&#58; Arial, Helvetica, sans-serif;
font-size&#58; 10pt;
font-weight&#58; bold;
text-decoration&#58; underline;
margin-bottom&#58; 1px;
padding-left&#58; 4px;
padding-top&#58; 2px;
margin-top&#58; 0px;
&#125;

.item-501 a &#123;
list-style-type &#58; none;
display &#58; block;
height &#58; 21px;
width &#58; 146px;
font-size &#58; 9pt;
background-color &#58; #6d91e7;
color &#58; #ffffff;
font-weight &#58; bold;
text-decoration &#58; none;
&#125;

.item-501 a&#58;hover &#123;
height &#58; 21px;
width &#58; 146px;
font-size &#58; 9pt;
background-color &#58; #6d91e7;
text-decoration &#58; underline;
&#125;

.item-502 a &#123;
list-style-type &#58; none;
display &#58; block;
height &#58; 21px;
width &#58; 146px;
font-size &#58; 9pt;
background-color &#58; #6d91e7;
color &#58; #ffffff;
font-weight &#58; bold;
text-decoration &#58; none;
&#125;

.item-502 a&#58;hover &#123;
height &#58; 21px;
width &#58; 146px;
font-size &#58; 9pt;
background-color &#58; #6d91e7;
text-decoration &#58; underline;
&#125;

Das ist aber eine ziemlich Aufwendige Lösung. Kann man das anders lösen?

[MonikaTS]

ich sehe bei dem Link keinen Link Animal Cartoon vielleich tbin ich blind

wenn du viele css Klassen hast, die aber alle gleich aussehen sollen , dann kannst du sie mit einem Koma getrennt zusammenfassen

.item-501 a,
.item-502 a{ deine Angaben }

somitkannst du , wenn sich das erweitert einfach oben dran nochmals eine css klasse schreiben und aber auf das Koma nicht vergessen,

für mehr Hilfe tät ich die Animals Cartoons als Link finden müssen, außer das reicht schon mal

[x-drive]

Hi Monika TS,

Danke Dir!

Es hat geklappt!

[madi]

wenn du nicht nicht jede klasse einzeln auflisten willst, kannst du es auch so schreiben:

ul.menu a.rubrics {...}
ul.menu a.rubrics:hover {...}

[MonikaTS]

Hi Monika TS,

Danke Dir!

Es hat geklappt!

super - damit spart man nicht nur copy&paste, sondern auch bites&bytes in der CSS
außerdem kannst du so auch irr einfach Änderungen machen

und das geht mit allen Klassen und IDs -

viel Freud an deinen speziellen Links