Spry accordion - div above Tab - positioning moves wrong ?

Question

Hi,
The next point in my site is the text above/in every Tab.
The Tab images fades/appears and the text may not fade/appear.
So I made a div above the Tab, but of course the text of the second Tab is moving down (becouse the content appears) and is not anymore at the correct position.
Can someone help me (Arnout or Ben, you now my case)
Again thanks!
Carla

Answer 1

Hi again,
Step1
In mh1archtecten.css, remove the red coloured code and insert the green
.AccordionPanelTab h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    margin-top: -50px;
    margin-left: 50px;
.tab1_tekst {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    width: 138px;
    padding-left: 20px;
    padding-top: 80px;
    z-index: 3000;
    background-repeat: no-repeat;
    position: absolute;
    left: 100px;
    top: 270px;
.tab2_tekst {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    width: 138px;
    padding-left: 20px;
    padding-top: 80px;
    z-index: 3000;
    background-repeat: no-repeat;
    position: absolute;
    left: 120px;
    top: 534px;
.tab3_tekst {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    width: 138px;
    padding-left: 20px;
    padding-top: 80px;
    z-index: 3000;
    background-repeat: no-repeat;
    position: absolute;
    left: 122px;
    top: 1242px;
Step 2
Remove the red coloured code and insert the green.
  <div id="Accordion1" class="Accordion">
    <div class="AccordionPanel">
      <div class="AccordionPanelTab"><span>Tag 1</span>
        <div class="tab_fade"><img src="images/01-signage/banners/01-00-qpark-banner.jpg" alt="Q-Park" name="tab0" width="700" height="120" id="tab0" onclick="MM_effectAppearFade(this, 1000, 100, 30, true)" />
          <div class="tab2_tekst">Q-Park</div>
          <h3>Q-Park</h3>
        </div>
      </div>
      <div class="AccordionPanelContent">
        <div class="MasterDetail">
          <div spry:region="dsqpark1" class="MasterContainer">
            <div class="MasterColumn" spry:repeat="dsqpark1" spry:setrow="dsqpark1" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected">{Thumbs_50_x_50}</div>
          </div>
          <div class="DetailContainer" id="content0" spry:detailregion="dsqpark1">
            <div class="DetailColumn">{Foto_700_x_400}</div>
          </div>
          <br style="clear:both" />
        </div>
      </div>
    </div>
    <div class="AccordionPanel">
      <div class="AccordionPanelTab"><span>Tag 2</span>
        <div class="tab_fade"><img src="images/01-signage/banners/01-01-qpark-banner.jpg" alt="Q-Park" name="tab1" width="700" height="120" id="tab1" onclick="MM_effectAppearFade(this, 1000, 100, 30, true)" />
          <div class="tab1_tekst">Q-Park</div>
         <h3>Q-Park</h3>
        </div>
      </div>
      <div class="AccordionPanelContent">
        <div class="MasterDetail">
          <div spry:region="dsqpark2" class="MasterContainer">
            <div class="MasterColumn" spry:repeat="dsqpark2" spry:setrow="dsqpark2" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected">{Thumbs_50_x_50}</div>
          </div>
          <div class="DetailContainer" id="content1" spry:detailregion="dsqpark2">
            <div class="DetailColumn" id="content1">{Foto_700_x_400}</div>
          </div>
          <br style="clear:both" />
        </div>
      </div>
    </div>
    <div class="AccordionPanel">
      <div class="AccordionPanelTab">
        <img src="images/01-signage/banners/01-02-groenmetropool-banner.jpg" alt="Groenmetropool Kreis Aachen" name="tab2" width="700" height="120" id="tab2" onclick="MM_effectAppearFade(this, 1000, 100, 30, true)" />
       <span>Tag 3</span>
        <h3>Whatever you want</h3>
        </div>
        <div class="AccordionPanelContent">
          <div class="MasterDetail">
            <div spry:region="dsgroenmetropool" class="MasterContainer">
              <div class="MasterColumn" spry:repeat="dsgroenmetropool" spry:setrow="dsgroenmetropool" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected">{Thumbs_50_x_50}</div>
            </div>
            <div class="DetailContainer" id="content2" spry:detailregion="dsgroenmetropool">
              <div class="DetailColumn" id="content2">{Foto_700_x_400}</div>
            </div>
          <br style="clear:both" />
        </div>
       </div>
    </div>
  </div>
I hope this helps.
Ben