Seite 1 von 1
CSS-Frage
Verfasst: 19.06.2012, 18:02
von 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?
Verfasst: 19.06.2012, 18:54
von 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 {
display: block;
height: 25px;
width: 146px;
background-color:#4870CE;
color:#FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
margin-bottom: 1px;
padding-left: 4px;
padding-top: 2px;
margin-top: 0px;
}
.menu a:hover {
display: block;
height: 25px;
width: 146px;
background-color:#4870CE;
color:#FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
text-decoration: underline;
margin-bottom: 1px;
padding-left: 4px;
padding-top: 2px;
margin-top: 0px;
}
.item-501 a {
list-style-type : none;
display : block;
height : 21px;
width : 146px;
font-size : 9pt;
background-color : #6d91e7;
color : #ffffff;
font-weight : bold;
text-decoration : none;
}
.item-501 a:hover {
height : 21px;
width : 146px;
font-size : 9pt;
background-color : #6d91e7;
text-decoration : underline;
}
.item-502 a {
list-style-type : none;
display : block;
height : 21px;
width : 146px;
font-size : 9pt;
background-color : #6d91e7;
color : #ffffff;
font-weight : bold;
text-decoration : none;
}
.item-502 a:hover {
height : 21px;
width : 146px;
font-size : 9pt;
background-color : #6d91e7;
text-decoration : underline;
}
Das ist aber eine ziemlich Aufwendige Lösung. Kann man das anders lösen?
Verfasst: 19.06.2012, 19:33
von 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
Verfasst: 19.06.2012, 20:37
von x-drive
Hi Monika TS,
Danke Dir!
Es hat geklappt!
Verfasst: 19.06.2012, 21:05
von 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 {...}
Verfasst: 19.06.2012, 22:10
von MonikaTS
x-drive hat geschrieben: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
