digg_guy
06-09-2008, 11:19 AM
Ok here is what I want to do.
I have a div tag that sort of mimics the behavior of a iFrame. I want the images inside the div to line up horizontally and after they exceed the width of the parent div to make the div scroll horizontally. I was successful in doing this but I need a better way. What I did was set another div inside the parent div and set its width to a huge amount. The on problem with this is the width is to excessive and images will be continuously added so at some point you would have to adjust the width to suit the videos Below is the CSS I used to get it to work
#thumb_content{
width:1000px;
overflow:auto;
}
#thumb_src {
margin:30px 10px -100px 0; /*I need the large negative bottom margin because the div produced a huge gap between its bottom border and the top of the footer*/
border:1px solid #6A6C69;
height:120px;
width:100%;
overflow:auto;
/* background:#fff;*/
}
#thumb_src ul{
float:left;
margin:10px;
padding:none;
border:10px solid #5E3020;
border-top:none;
overflow:auto;
}
#thumb_src li{
float:left;
display:inline;
list-style:none;
margin:0 10px 0 0;
}
Here is the HTML
<div id="thumb_src">
<div id="thumb_content">
<!--These will be dynamically added in later -->
<ul>
<li><img src="images/thumbnails/genique.jpg" alt="A video of Alyson" onClick="loadFLV('videos/genique.flv')"/></li>
<li><img src="images/thumbnails/david.jpg" alt="A video of Alyson" onClick="loadFLV('videos/david.flv')"/></li>
<li><img src="images/thumbnails/justin.jpg" alt="A video of Alyson" onClick="loadFLV('videos/justin.flv')"/></li>
<li><img src="images/thumbnails/jenny.jpg" alt="A video of Alyson" onClick="loadFLV('videos/jenny.flv')"/></li>
<li><img src="images/thumbnails/laura.jpg" alt="A video of Alyson" onClick="loadFLV('videos/laura.flv')"/></li>
<li><img src="images/thumbnails/alyson.jpg" alt="A video of Alyson" onClick="loadFLV('videos/alyson.flv')"/></li>
<li><img src="images/thumbnails/patrick.jpg" alt="A video of Alyson" onClick="loadFLV('videos/patrick.flv')"/></li>
</ul>
</div>
</div>
The images should sort of look like this
========================
|image 1 | | image2 | |image 3 | |im=
========================
*With a Horizontal Scroll bar here to see more images
**the = represents the DIV
Thanks for the help guys
I have a div tag that sort of mimics the behavior of a iFrame. I want the images inside the div to line up horizontally and after they exceed the width of the parent div to make the div scroll horizontally. I was successful in doing this but I need a better way. What I did was set another div inside the parent div and set its width to a huge amount. The on problem with this is the width is to excessive and images will be continuously added so at some point you would have to adjust the width to suit the videos Below is the CSS I used to get it to work
#thumb_content{
width:1000px;
overflow:auto;
}
#thumb_src {
margin:30px 10px -100px 0; /*I need the large negative bottom margin because the div produced a huge gap between its bottom border and the top of the footer*/
border:1px solid #6A6C69;
height:120px;
width:100%;
overflow:auto;
/* background:#fff;*/
}
#thumb_src ul{
float:left;
margin:10px;
padding:none;
border:10px solid #5E3020;
border-top:none;
overflow:auto;
}
#thumb_src li{
float:left;
display:inline;
list-style:none;
margin:0 10px 0 0;
}
Here is the HTML
<div id="thumb_src">
<div id="thumb_content">
<!--These will be dynamically added in later -->
<ul>
<li><img src="images/thumbnails/genique.jpg" alt="A video of Alyson" onClick="loadFLV('videos/genique.flv')"/></li>
<li><img src="images/thumbnails/david.jpg" alt="A video of Alyson" onClick="loadFLV('videos/david.flv')"/></li>
<li><img src="images/thumbnails/justin.jpg" alt="A video of Alyson" onClick="loadFLV('videos/justin.flv')"/></li>
<li><img src="images/thumbnails/jenny.jpg" alt="A video of Alyson" onClick="loadFLV('videos/jenny.flv')"/></li>
<li><img src="images/thumbnails/laura.jpg" alt="A video of Alyson" onClick="loadFLV('videos/laura.flv')"/></li>
<li><img src="images/thumbnails/alyson.jpg" alt="A video of Alyson" onClick="loadFLV('videos/alyson.flv')"/></li>
<li><img src="images/thumbnails/patrick.jpg" alt="A video of Alyson" onClick="loadFLV('videos/patrick.flv')"/></li>
</ul>
</div>
</div>
The images should sort of look like this
========================
|image 1 | | image2 | |image 3 | |im=
========================
*With a Horizontal Scroll bar here to see more images
**the = represents the DIV
Thanks for the help guys