html - Let list go out of screen bounds -
i'm making stuff using jquery. have, example, bunch of images in list. horizontal list (so every image displayed left right). list big 9 of 30 images displayed in page (depending on youre screen resolution). i'm using jquery slide left right (if youre mouse on de left side of screen, scrolls left , vice versa).
to working, list wrapped in div. div uses width of 999999px. images can go width of 999999px until next row of images displayed. because list automatically lists horizontal until next image doesn't fit page anymore, next image displayed in new row. 3x3 'table' when i'm not using div. when i'm putting div around whole thing width of 999999px, list horizontal 999999px , after makes new row.
my question is: there easier way perform this?
can set width to: width:infinite;
or that? or doing whole thing wrong?
hopefully i've made self clear in average english. in advance!
html:
<div id="images"> <ul id="listimages"> <li><img src="img/set1/1.jpg"/></li> <li><img src="img/set1/2.jpg"/></li> <li><img src="img/set1/3.jpg"/></li> <li><img src="img/set1/4.jpg"/></li> <li><img src="img/set1/5.jpg"/></li> <li><img src="img/set1/6.jpg"/></li> <li><img src="img/set1/7.jpg"/></li> <li><img src="img/set1/8.jpg"/></li> <li><img src="img/set1/9.jpg"/></li> <li><img src="img/set1/10.jpg"/></li> <li><img src="img/set1/11.jpg"/></li> <li><img src="img/set1/12.jpg"/></li> </ul> </div>
css:
body { background: black; color:white; } #images{ float:left; } ul#listimages{ width:100%; list-style-type:none; overflow: hidden; } ul#listimages li { display: block; float: left; } ul#listimages img { height:200px; width:400px; }
that simplest way it.
note browsers (read: chrome) have trouble enormously wide elements; should set elements aren't visible display: none
.
Comments
Post a Comment