Ich habe mit einem Spry Akkordeon die Navigation auf meiner Seite erstellt.
Jetzt habe ich das Problem, dass das Hintergrundbild wenn die Aktuelle Kategorie offen ist Rot bleiben soll.
Ich habe das mit der Klasse ".AccordionPanelTab_studioOpen" Versucht. das Hat aber nicht funktioniert.
Damit ihr auch verstehen könnt, was ich meine hier mein code: (nur die Navi)
HTML:
CSS:
hoffe mir kann da jemand helfen :)
Jetzt habe ich das Problem, dass das Hintergrundbild wenn die Aktuelle Kategorie offen ist Rot bleiben soll.
Ich habe das mit der Klasse ".AccordionPanelTab_studioOpen" Versucht. das Hat aber nicht funktioniert.
Damit ihr auch verstehen könnt, was ich meine hier mein code: (nur die Navi)
HTML:
Code:
<div id="navi">
<div id="navi_akkordeon" class="Accordion">
<div class="AccordionPanel">
<div class="AccordionPanelTab_studio"></div>
<div class="AccordionPanelContent">
<ul>
<li><a class="li_infos" href="#"></a></li>
<li><a class="li_details" href="#"></a></li>
<li><a class="li_360" href="#"></a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab_solo"></div>
<div class="AccordionPanelContent">
<ul>
<li><a class="li_infos" href="#"></a></li>
<li><a class="li_details" href="#"></a></li>
<li><a class="li_360" href="#"></a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab_tour"></div>
<div class="AccordionPanelContent">
<ul>
<li><a class="li_infos" href="#"></a></li>
<li><a class="li_details" href="#"></a></li>
<li><a class="li_360" href="#"></a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab_bildergalerie"></div>
<div class="AccordionPanelContent_bildergalerie">
<ul>
<li><a class="li_infos" href="#"></a></li>
<li><a class="li_details" href="#"></a></li>
<li><a class="li_360" href="#"></a></li>
</ul>
</div>
CSS:
Code:
@charset "UTF-8";
.Accordion {
overflow: hidden;
}
.AccordionPanel {
margin: 0px;
padding: 0px;
}
#navi {
margin: 0px;
padding: 0px;
height: 200px;
width: 182px;
top: 57px;
position: relative;
}
#navi ul {
height: 110px;
width: 190px;
margin: 0px;
padding: 0px;
text-align: center;
position: relative;
}
#navi ul li {
height: 30px;
width: 190px;
margin: 0px;
padding: 0px;
}
#navi ul li a {
height: 30px;
width: 190px;
margin: 0px;
padding: 0px;
display: block;
float: right;
}
#navi a.li_infos {
background-image: url(../images/infos.png);
background-repeat: no-repeat;
background-position: center center;
height: 30px;
width: 190px;
margin: 0px;
padding: 0px;
}
#navi .li_details {
background-image: url(../images/details.png);
background-repeat: no-repeat;
background-position: center center;
height: 30px;
width: 190px;
}
#navi .li_360 {
background-image: url(../images/360.png);
background-repeat: no-repeat;
background-position: center center;
height: 30px;
width: 190px;
}
#navi a.li_infos:hover {
background-image: url(../images/infos_over.png);
background-repeat: no-repeat;
background-position: center center;
height: 30px;
width: 190px;
margin: 0px;
padding: 0px;
}
#navi .li_details:hover {
background-image: url(../images/details_over.png);
background-repeat: no-repeat;
background-position: center center;
height: 30px;
width: 190px;
}
#navi .li_360:hover {
background-image: url(../images/360_over.png);
background-repeat: no-repeat;
background-position: center center;
height: 30px;
width: 190px;
}
.AccordionPanelTab {
margin: 0px;
padding: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
}
.AccordionPanelTab_studio {
margin: 0px;
padding: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background-image: url(../../images/studio.png);
background-repeat: no-repeat;
background-position: left top;
height: 35px;
width: 182px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #050505;
}
.AccordionPanelTab_solo {
margin: 0px;
padding: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background-image: url(../../images/solo.png);
background-repeat: no-repeat;
background-position: left top;
height: 35px;
width: 182px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #050505;
}
.AccordionPanelTab_tour {
margin: 0px;
padding: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background-image: url(../../images/tour.png);
background-repeat: no-repeat;
background-position: left top;
height: 35px;
width: 182px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #050505;
}
.AccordionPanelTab_bildergalerie {
margin: 0px;
padding: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background-image: url(../../images/bildergalerie.png);
background-repeat: no-repeat;
background-position: left top;
height: 35px;
width: 182px;
}
.AccordionPanelContent {
overflow: hidden;
margin: 0px;
padding: 0px;
height: 90px;
width: 182px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #050505;
background-image: url(../../images/content_verlauf_oben.png);
background-repeat: repeat-x;
background-position: left top;
background-color: #302c2d;
}
.AccordionPanelContent_bildergalerie {
overflow: hidden;
margin: 0px;
padding: 0px;
height: 0px;
width: 0px;
}
.AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
}
.AccordionPanelTabHover {
color: #555555;
}
.AccordionPanelTab_studio {
color: #555555;
background-image:url(../../images/studio.png)
}
.AccordionPanelTab_studio:Hover {
color: #555555;
background-image: url(../../images/studio_over.png);
}
.AccordionPanelTab_solo:Hover {
color: #555555;
background-image: url(../../images/solo_over.png);
}
.AccordionPanelTab_tour:Hover {
color: #555555;
background-image: url(../../images/tour_over.png);
}
.AccordionPanelTab_bildergalerie:Hover {
color: #555555;
background-image: url(../../images/bildergalerie_over.png);
}
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
}
.AccordionFocused .AccordionPanelTab {
background-color: #3399FF;
}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #33CCFF;
}
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
}
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
}
}
hoffe mir kann da jemand helfen :)