I am trying to create a film strip of thumbnails in a photo gallery type page.
I have an idea to create a div with all the thumbnails in it and then use another div to contain that so it can be shaped to where I want the strip to fit. (For example I don't necessarily want the strip to be flush with either side of the browser window). I have been experimenting and found something that is almost right but I need some help with the following points:
1) The following code renders as I would expect it to on Opera(9.01) and IE6 but not Firefox (1.5.0.6). In firefox the right hand side of the strip dissapears off the side of the browser and causes a horizontal scrollbar. How can I fix this in FF so it looks the same as in IE and O?
2) I want to be able to offset the thumbnails by a pixel amount such that I can use java script to "scroll" through them. I tried using left: -100px in the imageBoxInside but this doesn't work... Any suggestions?
-
<style type="text/css">
-
#container
-
{
-
background-color: yellow;
-
width: 100%;
-
height: 100px;
-
text-align: center;
-
margin: 30px;
-
padding: 0px;
-
border: 0px;
-
}
-
-
#imageBox
-
{
-
background-color: black;
-
margin-left: 0;
-
margin-right: 0;
-
width: 100%;
-
border: 1px #000 solid;
-
overflow: hidden;
-
}
-
-
#imageBoxInside
-
{
-
width: 2500px;
-
left: -100px
-
}
-
-
#imageBox img
-
{
-
backcolour: black;
-
float: left;
-
padding: 0px;
-
margin-left: 10px;
-
margin-right: 10px;
-
margin-top: 5px;
-
margin-bottom: 5px;
-
}
-
-
#imageBox br
-
{
-
clear: both;
-
}
-
-
</style>
-
</head>
-
<body>
-
<div id="container">
-
<div id="imageBox">
-
<div id="imageBoxInside">
-
<img src="thumb1001.jpg" height="85px" />
-
<img src="thumb1002.jpg" height="85px" />
-
<img src="thumb1003.jpg" height="85px" />
-
<img src="thumb1004.jpg" height="85px" />
-
<img src="thumb1005.jpg" height="85px" />
-
<img src="thumb1006.jpg" height="85px" />
-
<img src="thumb1007.jpg" height="85px" />
-
<img src="thumb1008.jpg" height="85px" />
-
<img src="thumb1009.jpg" height="85px" />
-
<img src="thumb1010.jpg" height="85px" />
-
<img src="thumb1011.jpg" height="85px" />
-
<img src="thumb1012.jpg" height="85px" />
-
<img src="thumb1013.jpg" height="85px" />
-
<img src="thumb1014.jpg" height="85px" />
-
<img src="thumb1015.jpg" height="85px" />
-
<img src="thumb1016.jpg" height="85px" />
-
<img src="thumb1017.jpg" height="85px" />
-
<img src="thumb1018.jpg" height="85px" />
-
<br />
-
</div>
-
</div>
-
</div>
-
</body>
-