Hallo,
ich habe eine Webpage in Joomla erstellt.
Nun möchte ich jedem Menüpunk eine eigenes Hintergundbild zuweisen, die Menüpunkte haben eine eigene Itemid aber ich weiß nicht wie ich das im CSS definieren kann.
Hier mal der Quellcode des Menüs:
...
...
und hier das CSS des Menüs:
....
#wrap #topmenu {
background-image: url(../images/menu.png);
background-repeat: no-repeat;
height: 30px;
padding-top: 10px;
padding-bottom: 8px;
padding-right: 25px;
padding-left: 25px;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#wrap #topmenu a {
text-decoration: none;
display: block;
float: left;
margin-right: 5px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
margin-top: 3px;
color: #000000;
border: 1px dashed #D6BD32;
}
#wrap #topmenu a:visited,active {
text-decoration: none;
display: block;
float: left;
margin-right: 5px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
margin-top: 3px;
color: #000000;
border: 1px dashed #D6BD32;
}
#wrap #topmenu a:hover {
text-decoration: none;
display: block;
float: left;
margin-right: 5px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
margin-top: 3px;
color: #000000;
border: 1px dashed #000000;
background-image: url(../images/menubg.png);
background-repeat: repeat-x;
}
#wrap #topmenu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#wrap #topmenu li {
display: inline;
}
#wrap #topmenu .active a {
text-decoration: none;
display: block;
float: left;
margin-right: 5px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
margin-top: 3px;
color: #000000;
border: 1px dashed #999999;
background-image: url(../images/menubg.png);
background-repeat: repeat-x;
}
#wrap #topmenu .active a:visited,active {
text-decoration: none;
display: block;
float: left;
margin-right: 5px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
margin-top: 3px;
color: #000000;
border: 1px dashed #999999;
background-image: url(../images/menubg.png);
background-repeat: repeat-x;
}
....
Kann mir jemand zeigen wie ich die einzelnen Buttons im CSS über die Itemid anspreche und ein jeweils anderes Hintergrundbild zuweisen kann?
Vielen Dank :)
