Dear list,
I'm building a mockup for a magazine with jquery. The carousel generates
a filmstrip in html (see below) on the page
http://tijdschriftei.nl/ (user is jasper, pass is EImagazine (caps!))
But, I want the filmstrip seperated, on the bottom of the page, and with
a grey background with width 100%.
However, I can't seem te seperate the strip from the rest. Any pointers?
Thanks,
Thijs
(html snippet:)
<div class="gallery"id="featurednews"style="visibility: visible; padding: 0px; position: relative; width: 798px; height:
557px;"><div style="width: 768px; height: 450px; position: absolute; overflow: hidden; top: 15px; left: 15px; display:
none;"class="panel"><img style="height: 449.25px; width: 768px; position: relative; top: 0.375px; left:
0px;"src="images/nr0_art1_p1-niv1
.jpg"><div style="position: absolute; z-index: 999; width: 748px; left: 0pt; bottom:
0px;"class="panel-overlay">
<div class="panel-text">text</div>
</div><div style="position: absolute; z-index: 998; width: 768px; left: 0pt; opacity: 0.7; bottom:
0px;"class="overlay-background"></div></div><div style="width: 768px; height: 450px; position: absolute; overflow: hidden;
top: 15px; left: 15px; display: block;"class="panel"><img style="height: 449.25px; width: 768px; position: relative; top: 0.375px;
left: 0px;"src
="images/nr0_art1_p2-niv1.jpg"><div style="position: absolute; z-index: 999; width: 748px; left:
0pt; bottom: 0px;"class="panel-overlay">
<h2>pagina2</h2>
<p>Temperinte interdum sempus odio urna eget curabitur semper convallis
nunc laoreet.<br>
<a href="#">Steun »</a></p>
</div><div style="position: absolute; z-index: 998; width: 768px; left: 0pt; opacity: 0.7; bottom:
0px;"class="overlay-background"></div></div><div style="width: 768px; height: 450px; position: absolute; overflow: hidden; top:
15px; left: 15px; display: none;"class="panel"><img style="height: 449.25px; width: 768px; position: relative; top: 0.375px; left:
0px;"src&
amp;
amp;
lt;
/span>="images/nr0_art1_p3-niv1.jpg"><div style="position: absolute; z-index: 999; width: 748px;
left: 0pt; bottom: 0px;"class="panel-overlay">
<h2>Pagina 3</h2>
<p>bla<a href="#"></a></p>
</div><div style="position: absolute; z-index: 998; width: 768px; left: 0pt; opacity: 0.7; bottom:
0px;"class="overlay-background"></div></div><div style="width: 768px; height: 450px; position: absolute; overflow: hidden; top:
15px; left: 15px; display: none;"class="panel"><img style="height: 449.25px; width: 768px; position: relative; top: 0.375px; left:
0px;"src&
amp;
amp;
lt;
/span>="images/nr0_art1_p4-niv1.jpg"><div style="position: absolute; z-index: 999; width: 748px;
left: 0pt; bottom: 0px;"class="panel-overlay">
<h2>Semvelit nonummy odio tempus</h2>
<p>Justolacus eger at pede felit in dictum sempus elit curabitur ipsum.
Ametpellentum.<br>
<a href="#">Continue Reading »</a></p>
</div><div style="position: absolute; z-index: 998; width: 768px; left: 0pt; opacity: 0.7; bottom:
0px;"class="overlay-background"></div></div><div style="width: 768px; height: 450px; position: absolute; overflow: hidden; top: 15px; left: 15px; display:
none;"class="panel"><img style="height: 358.4px; width: 768px; position: relative; top: 45.8px; left: 0px;"src="images/demo/5.gif"><div
style="position: absolute; z-index: 999; width: 748px; left: 0pt; bottom: 0px;"class="panel-overlay">
<h2>Pedefamet orci orci quisque</h2>
<p>Nonnam aenenasce morbi liberos malesuada risus id donec volutpat
estibulum curabitae.<br>
<a href="#">Continue Reading »</a></p>
</div><div style="position: absolute; z-index: 998; width: 768px; left: 0pt; opacity: 0.7; bottom:
0px;"class="overlay-background"></div></div><div style="position: absolute; overflow: hidden; top: 465px; left: 134px; width:
530px; height: 77px;"class="strip_wrapper"><ul class="filmstrip"style="visibility: visible; margin: 0pt;
list-style: none outside none; padding: 0pt; width: 535px; position: absolute; z-index:
900; top: 0px; left: 0px; height: 77px;">
<li style="float: left; position: relative; height: 62px; width: 102px; z-index: 901; padding: 0pt; cursor: pointer; margin-top: 15px;
margin-right: 5px;"class="frame"><div style="height: 60px; width: 100px; position: relative; top: 0px; left: 0px; overflow:
hidden;"class="img_wrap"><img style="opacity: 0.3; height: 60px; width: 102.571px; position: relative; top: 0px; left:
-1.28548px;"src="images/nr0_art1_p1-niv1.jpg"w
idth="1024"height="599"></div>
</li>
<li style="float: left; position: relative; height: 62px; width: 102px; z-index: 901; padding: 0pt; cursor: pointer; margin-top: 15px; margin-right:
5px;"class="frame current"><div style="height: 60px; width: 100px; position: relative; top: 0px; left: 0px; overflow:
hidden;"class="img_wrap"><img style="opacity: 1; height: 60px; width: 102.571px; position: relative; top: 0px; left:
-1.28548px;"src="images/nr0_art1_p2-niv1.jpg"width="1024"height="599"></div>
</li>
<li style="float: left; position: relative; height: 62px; width: 102px; z-index: 901; padding: 0pt; cursor: pointer; margin-top: 15px;
margin-right: 5px;"class="frame"><div style="height: 60px; width: 100px; position: relative; top: 0px; left: 0px; overflow:
hidden;"class="img_wrap"><img style="opacity: 0.3; height: 60px; width: 102.571px; position: relative; top: 0px; left:
-1.28548px;"src="images/nr0_art1_p3-niv1.jpg"w
idth="1024"height="599"></div>
</li>
<li style="float: left; position: relative; height: 62px; width: 102px; z-index: 901; padding: 0pt; cursor: pointer; margin-top: 15px;
margin-right: 5px;"class="frame"><div style="height: 60px; width: 100px; position: relative; top: 0px; left: 0px; overflow:
hidden;"class="img_wrap"><img style="opacity: 0.3; height: 60px; width: 102.571px; position: relative; top: 0px; left:
-1.28548px;"src="images/nr0_art1_p4-niv1.jpg"w
idth="1024"height="599"></div>
</li>
<li style="float: left; position: relative; height: 62px; width: 102px; z-index: 901; padding: 0pt; cursor: pointer; margin-top: 15px;
margin-right: 5px;"class="frame"><div style="height: 60px; width: 100px; position: relative; top: 0px; left: 0px; overflow:
hidden;"class="img_wrap"><img style="opacity: 0.3; height: 60px; width: 128.571px; position: relative; top: 0px; left:
-14.2857px;"src="images/demo/5.gif"alt=
""></div>
</li>
</ul></div><div style="position: absolute; z-index: 32666; opacity: 1; top: 0px; left: 0px; width: 798px; height: 557px; display: none;"class="loader"></div><div
style="position: absolute; z-index: 1000; width: 0px; font-size: 0px; line-height: 0%; border-width: 0px; border-style: solid; top: 480px; left: 292px; border-top: 0px solid transparent; border-right: 0px solid transparent;
border-left: 0px solid transparent;"class="pointer"></div><img style="position: absolute; cursor: pointer; top: 500px; right:
107px;"src="scripts/../images/galleryviewthemes/dark/next.gif"class="nav-next"><img style="position: absolute; cursor: pointer; top: 500px; left:
107px;"src="scripts/../images/galleryviewthemes/dark/prev.gif"class="nav-prev"></div>
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
