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
wenn mir einer helfen wuerde waere das wirklich super :)
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
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>
Code:
#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 :)