Bild wird nicht mehr angezeigt

[ruffy]

Hey Leute :)

Ich habe folgendes Problem. Ich habe ein div in welchem 10 bilder angeordnet sind. bzw sind das thumbnails. Fahre ich mit der Maus über eins der thumbnails wird das bild links daneben in richtiger größe angezeigt. Nun wollte ich aber MEHR fotos in dem div unterbringen und habe es deswegen scrollbar gemacht. aber sobald die scrollbar implementiert ist wird das große bild NICHT mehr angezeigt.

dann habe ich gemerkt das das div auch horizontal scrollbar gemacht wurde und gesehen, das das bild zwar angezeigt wird ABER in dem selber und nicht mehr daneben. dann dachte ich okay dann mache ich das div nur VERTIKAL scrollbar dann wirds wieder daneben angezeigt.

wird es aber leider nicht =( ich habe neben dem div , welches die bilder enthält , welches aber bisher nur dazu da ist ein grosses rechteck zu sein welches sich farblich vom hintergrund abghebt.

kann ich irgendwie sagen das das große original bild IN DIESEM div angezeigt wird ?

hier ist mein code und ein bild wie das ganze aussieht =)


html

<div class="produkttextdiv">

<p > Trilux bietet eine Vielfalt an Leuchten für den Innenbereich an. Für den Innenbereich gibt es in etwa 10 verschiedene
Kategorien in denen man die Leuchten aufteilt. Man unterscheidet zwischen Lichtbandleuchten und Lichtleisten, Anbau- und Hängeleuchten,
Stand und Wandleuchten, Leuchten höherer Schutzart ( Sporthallen), Downlights, Strahlern und vielen weiteren.
</p>

</div>

<div id="gallerycontaineroutdoor">

<a class="thumbnail" href="#thumb"><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" width="100px" height="66px" border="0" /><span><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" width="100px" height="66px" border="0" /><span><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" width="100px" height="75px" border="0" /><span><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" /><br />Sushi for dinner anyone?</span></a>

<a class="thumbnail" href="#thumb"><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" width="100px" height="70px" border="0" /><span><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" /><br />Run wild with horses.</span></a>
<br/>
<a class="thumbnail" href="#thumb"><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" width="100px" height="66px" border="0" /><span><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" width="100px" height="66px" border="0" /><span><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" width="100px" height="75px" border="0" /><span><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" /><br />Sushi for dinner anyone?</span></a>

<a class="thumbnail" href="#thumb"><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" width="100px" height="70px" border="0" /><span><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" /><br />Run wild with horses.</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" width="100px" height="75px" border="0" /><span><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" /><br />Sushi for dinner anyone?</span></a>

<a class="thumbnail" href="#thumb"><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" width="100px" height="70px" border="0" /><span><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" /><br />Run wild with horses.</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" width="100px" height="75px" border="0" /><span><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" /><br />Sushi for dinner anyone?</span></a>

<a class="thumbnail" href="#thumb"><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" width="100px" height="70px" border="0" /><span><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" /><br />Run wild with horses.</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" width="100px" height="75px" border="0" /><span><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" /><br />Sushi for dinner anyone?</span></a>

<a class="thumbnail" href="#thumb"><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" width="100px" height="70px" border="0" /><span><img src="267986_4dea20a71946489581c490997f8f63eb.jpg" /><br />Run wild with horses.</span></a>



</div>

<div id="grossesbilddiv2">


</div>

#gallerycontaineroutdoor{
       
       
position: relative;
padding-left:34px;
padding-top: 30px;
margin-left:200px;
margin-top:2px;
height:500px;
width: 250px;
background-color:#0F54DF;
overflow-y:auto;
overflow-x:auto;


}
       
       
       
#grossesbilddiv2{
   
   
   
    background-color:#A7A7A7;
    width:862px;
    height:530px;
    margin-left:490px;
    margin-top:-530px;
   
   
   
   
    }

wenn mir einer helfen wuerde waere das wirklich super :)

 

[threadi]

Der Quellcode passt irgendwie nicht zu deiner Beschreibung. Ich sehe nicht wie dort per Klick ein Bild in dem div angezeigt werden sollte. Vermutlich gehört dort mehr dazu als nur HTML und CSS, vermutlich noch JavaScript. Wenn Du uns nicht einen Link zur Seite zeigst auf der man sich das anschauen kann, wird dir vermutlich niemand helfen können.

 

[ruffy]

von einem klick habe ich nichts erwaehnt :) aber ja Sie haben recht ich habe tatsächlich etwas css code vergessen . das das bild angezeigt wird ist ein hover effekt sry :)

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
margin-left:100px;
background-color:#969696;
padding: 5px;
left: 500px;;
border: 1px dashed gray;
visibility:hidden;
color: black;
text-decoration: none;

}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}


#grossesbilddiv{
   
   
   
    background-color:#A7A7A7;
    width:862px;
    height:530px;
    margin-left:490px;
    margin-top:-530px;
   
   
   
   
    }