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

HILFE Hover Box verschiebt andere Div`s

R

rolli20up

Neues Mitglied
Hallo...

Hab viel gesucht und gegoogelt aber genau zu meinem Problem nix gefunden.

Hab in der Section zuerst nen Slider in nem Div... funktioniert. (Screenshot 1)
Darunter hab ich 9 Thumbnails, beim drüberfahren mit der Maus, erscheint rechts neben dem Slider-Div ein weiterer Div mit Details zu den Thumbnailbildern.... funktioniert teilweise...
Problem ist:
Bei den ersten 6 Thumbnails klappts. (Screenshot 2)
Die letzten drei verschiebt den Div mit den Details (Screenshot 3).
Das passiert in Firefox, Safari, Chrome.
Im IE klappts als Einziger komischerweise komplett...
Im Opera kommt zusätzlich das Problem, dass bei den ersten 6 Thumbnails die letzten 3 nach unten rücken (Screenshot 4).

Was mach ich falsch?

Bitte helft.

Danke

html-Code:
HTML: 
<section>
 <div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
        <img src="bilder/1n.png" data-transition="fade" alt="" />
        <img src="bilder/2n.png" data-transition="fade" alt="" />
        <img src="bilder/3n.png" data-transition="fade" alt="" />
        <img src="bilder/4n.png" data-transition="fade" alt="" />
        <img src="bilder/5n.png" data-transition="fade" alt="" />
    </div>
</div>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        pauseTime:6000,
        animSpeed:1500
    });
});
</script>
<div id="thumb" >
    <p>Für Details zeigen Sie bitte mit der Maus auf die Bilder.</p>
<div class="box"><a href="info.htm"><img src="bilder/schorisch-thumb.png"  width="100"  alt=""></a>
    <div>
    <h3>Kati Schorisch</h3>
    <p>Praxis-Inhaberin und Physiotherapeutin seit 2000.</p>
   <img src="bilder/schorisch-box.png" alt="">
    <p><strong>Schwerpunkte</strong></p>
    <ul>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
    </ul>
    </div>
</div>
<div class="box"><a href="info.htm"><img src="bilder/dennhardt-thumb.png"  width="100"  alt=""></a>
    <div>
    <h3>Kati Schorisch</h3>
    <p>Praxis-Inhaberin und Physiotherapeutin seit 2000.</p>
   <img src="bilder/dennhardt-box.png" alt="">
    <p><strong>Schwerpunkte</strong></p>
    <ul>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
    </ul>
    </div>
</div>
<div class="box"><a href="info.htm"><img src="bilder/krause-thumb.png"  width="100" alt=""></a>
    <div>
    <h3>Kati Schorisch</h3>
    <p>Praxis-Inhaberin und Physiotherapeutin seit 2000.</p>
    <img src="bilder/krause-box.png" alt="">
    <p><strong>Schwerpunkte</strong></p>
    <ul>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
    </ul>
    </div>
</div>
<div class="box"><a href="info.htm"><img src="bilder/kretschmar-thumb.png"   width="100" alt=""></a>
    <div>
    <h3>Kati Schorisch</h3>
    <p>Praxis-Inhaberin und Physiotherapeutin seit 2000.</p>
    <img src="bilder/kretschmar-box.png"alt="">
    <p><strong>Schwerpunkte</strong></p>
    <ul>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
    </ul>
    </div>
</div>
<div class="box"><a href="info.htm"><img src="bilder/melcher-thumb.png"  width="100"  alt=""></a>
    <div>
    <h3>Kati Schorisch</h3>
    <p>Praxis-Inhaberin und Physiotherapeutin seit 2000.</p>
    <img src="bilder/melcher-box.png" alt="">
    <p><strong>Schwerpunkte</strong></p>
    <ul>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
    </ul>
    </div>
</div>
<div class="box"><a href="info.htm"><img src="bilder/patzelt-thumb.png"  width="100"  alt=""></a>
    <div>
    <h3>Kati Schorisch</h3>
    <p>Praxis-Inhaberin und Physiotherapeutin seit 2000.</p>
    <img src="bilder/patzelt-box.png"  alt="">
    <p><strong>Schwerpunkte</strong></p>
    <ul>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
    </ul>
    </div>
</div>
<div class="box"><a href="info.htm"><img src="bilder/stolle-thumb.png" width="100"  alt=""></a>
    <div>
    <h3>Kati Schorisch</h3>
    <p>Praxis-Inhaberin und Physiotherapeutin seit 2000.</p>
    <img src="bilder/stolle-box.png" alt="">
    <p><strong>Schwerpunkte</strong></p>
    <ul>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
    </ul>
    </div>
</div>
<div class="box"><a href="info.htm"><img src="bilder/zech-thumb.png"  width="100"  alt=""></a>
    <div>
    <h3>Kati Schorisch</h3>
    <p>Praxis-Inhaberin und Physiotherapeutin seit 2000.</p>
    <img src="bilder/zech-box.png" alt="">
    <p><strong>Schwerpunkte</strong></p>
    <ul>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
    </ul>
    </div>
</div>
<div class="box"><a href="info.htm"><img src="bilder/palme-thumb.png"  width="100"  alt=""></a>
    <div>
    <h3>Kati Schorisch</h3>
    <p>Praxis-Inhaberin und Physiotherapeutin seit 2000.</p>
    <img src="bilder/palme-box.png"  alt="">
    <p><strong>Schwerpunkte</strong></p>
    <ul>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
     <li>Lorem ipsum dolor sit </li>
    </ul>
    </div>
</div>
</div>
</section>

CSS
Code: 
.box{
    height:80px;
    width:80px;
    display: inline;

}
.box img {

    margin-top: 10px;
}
.box div{
    display:none;
}
.box:hover div{
    float: right;
    background-image: url(bilder/hoverbox.png);
    margin-top: -513px;
    margin-right: 10px;
    display:block;
    height: 478px;
    width:237px;
}
.box:hover div h3{
        margin-top: 70px;
        padding-left: 20px;
}
.box:hover div p{
        padding-left: 20px;
        padding-top: 40px;
}
.box:hover div img{
    display: block;
    margin: 0 auto;

}
.box:hover div ul{
    padding-left: 20px;
}

#thumb p {
    margin: -25px 0 5px 6px;
}

#slider {
    width:673px;
    height:448px;
    margin:20px 0 0 0px;
    position:relative;
}
 

Anhänge

  • 1.jpg
    1.jpg
    17 KB · Aufrufe: 13
  • 2.jpg
    2.jpg
    18,7 KB · Aufrufe: 7
  • 3.jpg
    3.jpg
    19,2 KB · Aufrufe: 8
  • 4.jpg
    4.jpg
    19,3 KB · Aufrufe: 8
HAllo,

hast dir ja muühe gegeben mit den screen und code aber da man den fehler nur in Aktion sieht bräuchten wir schon ein Link.
Denn der fehler kann ja auch ausserhalb deines gezeigten codes liegen und online können wir das einfacher und schneller sehen.

Cheffchen
 
Ich würde in diesem Fall sogar mal zu absoluter Positionierung raten. Gib #thumb noch "position: relative;", dann kannst Du die per hover erscheinende Box per "position: absolute;" dort ausrichten wo sie hin soll.
 
Hallo,

genau würde ich auch tun.

ist das absicht das der Slider das Menü verdeckt aber war ja nicht deine Frage.

Cheffchen
 
Nee, das wäre Frage 2 geworden.
Die Inhalte der anderen Seiten schieben sich unter den Header.
Was mach ich beim Slider falsch?
Das mit der absoluten Positionierung versuch ich.

Danke
 
Hallo,

das ist einfach da der nivo slider mit z-index arbeiten muss.
Gebe dein header und nav einfach z-index:10; dürfte reichen.

Cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben