• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Spry Akkordeon Hintergrundbild des Offenen Panels

E

eli93

Neues Mitglied
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:
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 :)
 
Werbung:
Hallo,

verstehe gerade nicht mit welchem Akkordeon du die Navigation erstellt hast, aber wenn ich deinen gelieferten Code(der miserabel ist) bei mir mal ausprobiere, erscheinen nur drei Schwarze Kästen.

Ich weiss da die Bilder fehlen, die du da eingebaut hast, aber so wird das mit der Hilfe nichts, zumal ich nicht genau verstehe, was du genau willst.

Zu welchem Ergebnis soll die Navigation denn führen. Als Test, Hausaufgabe oder zu einer funktionierenden Webseite später mal?
Wäre gut wenn du deinen HTML-Code mal erklären könntest.
 
Natürlich geht das nicht das ist ja auch nur HTML und CSS. Da ist kein Java Script dabei. Weiterhin ist das wie geschrieben NUR die Navi das dürfte auch ein grund sein wieso du das nicht einfach anzeigen kannst. Wenn dir Spry Akkoridon nix sagt wirst du mir da wohl auch nicht helfen können.



Was genau soll daran Miserabel sein?
 
Werbung:
Da ist kein Java Script dabei.
Zum Vergrößern anklicken....
Wenn Javascript zwingend für die Lösung deines Problems notwendig ist musst du das mit angeben und dann im Javascript-Forum posten.

Weiterhin ist das wie geschrieben NUR die Navi das dürfte auch ein grund sein wieso du das nicht einfach anzeigen kannst.
Zum Vergrößern anklicken....
Nein ist es nicht.

Wenn dir Spry Akkoridon nix sagt wirst du mir da wohl auch nicht helfen können.
Zum Vergrößern anklicken....
Das Forum hier beschäftigt sich mit HTML-Problemen jeglicher Art, da spielt das Hilfsmittel mit dem der Code erstellt wurde nur eine untergeordnete Rolle.

Auf meine anderen Fragen bist du leider auch nicht eingegangen, aber eventuell reichen meine Kenntnisse diesmal nicht aus um dir zu helfen und dann hast du natürlich recht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben