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?
Expand|Select|Wrap|Line Numbers
- <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>