Hi there<br /><br /><br />I'm having a bit of a mental block regarding lists today and so thought I'd post a thread in the hope someonw can help me out...<br /><br />I've got lots of tiny sqaure thumbnails I want to list in the footer of my site and want it to look like this:<br /><br />Click to view attachment<br /><br />I want it to be a list and can't figure out how to do it.<br /><br />Any ideas?<br /><br /><br />E<br /><br />p.s. I know I'm going to kick myself when someone tells me.<!--content-->
it's OK, I think I've figured it out now...<!--content-->
float or inline LI elements?<!--content-->
set the UL to be a block element of width 236px, and each LI to be display block, float left, and the images with a bit of padding/margin.<!--content-->
I did it like this:<br /><br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><ul class="imglist"><br />Â Â Â Â <li><a href=http://www.webdesignerforum.co.uk/lofiversion/index.php/"#"><img src="" /></a></li><br />Â Â Â Â <li><a href=http://www.webdesignerforum.co.uk/lofiversion/index.php/"#"><img src="" /></a></li><br />Â Â Â Â <li><a href=http://www.webdesignerforum.co.uk/lofiversion/index.php/"#"><img src="" /></a></li><br />Â Â Â Â <li><a href=http://www.webdesignerforum.co.uk/lofiversion/index.php/"#"><img src="" /></a></li><br /></ul><!--c2--></div><!--ec2--><br /><br />and the CSS is:<br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->ul.imglist {<br />Â Â Â Â margin: 0px 20px 20px 20px;<br />Â Â Â Â padding: 0;<br />}<br /><br />.imglist li {<br />Â Â Â Â display: inline;<br />Â Â Â Â list-style-type: none;<br />}<!--c2--></div><!--ec2--><br /><br />is that the best way to do it?<!--content-->
I'd say so.<br />Only time you need to float them is if you need to add width, height or padding to the LI elements; as you then need a block element to do so. But floating required you to clear the floats, display: inline; is less hassle.<!--content-->
ah, i figure the margin around the image was added by the CSS, but if it is added in the image creation stage, then inline display is fine.<!--content-->
either, post a linky, that looks well cool.<br /><br />they say the devil is in the detail, and I like that <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/wink.gif" style="vertical-align:middle" emoid="
" border="0" alt="wink.gif" /><!--content-->
it's OK, I think I've figured it out now...<!--content-->
float or inline LI elements?<!--content-->
set the UL to be a block element of width 236px, and each LI to be display block, float left, and the images with a bit of padding/margin.<!--content-->
I did it like this:<br /><br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><ul class="imglist"><br />Â Â Â Â <li><a href=http://www.webdesignerforum.co.uk/lofiversion/index.php/"#"><img src="" /></a></li><br />Â Â Â Â <li><a href=http://www.webdesignerforum.co.uk/lofiversion/index.php/"#"><img src="" /></a></li><br />Â Â Â Â <li><a href=http://www.webdesignerforum.co.uk/lofiversion/index.php/"#"><img src="" /></a></li><br />Â Â Â Â <li><a href=http://www.webdesignerforum.co.uk/lofiversion/index.php/"#"><img src="" /></a></li><br /></ul><!--c2--></div><!--ec2--><br /><br />and the CSS is:<br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->ul.imglist {<br />Â Â Â Â margin: 0px 20px 20px 20px;<br />Â Â Â Â padding: 0;<br />}<br /><br />.imglist li {<br />Â Â Â Â display: inline;<br />Â Â Â Â list-style-type: none;<br />}<!--c2--></div><!--ec2--><br /><br />is that the best way to do it?<!--content-->
I'd say so.<br />Only time you need to float them is if you need to add width, height or padding to the LI elements; as you then need a block element to do so. But floating required you to clear the floats, display: inline; is less hassle.<!--content-->
ah, i figure the margin around the image was added by the CSS, but if it is added in the image creation stage, then inline display is fine.<!--content-->
either, post a linky, that looks well cool.<br /><br />they say the devil is in the detail, and I like that <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/wink.gif" style="vertical-align:middle" emoid="
" border="0" alt="wink.gif" /><!--content-->