[thelist] Simple Photo Gallery

M. Seyon evoltlist at delime.com
Mon Feb 20 17:04:39 CST 2006


Hi Rachell,

Just thought you might like to know that in both Opera and Firefox, the 
olive greenish background does not extend all the way down to the end of 
the list of images.

This is because of the float:left property on the LI elements, and because 
you don't have a clear:left afterwards in the containing div.

Something like this below will solve the problem (assuming the effect was 
not intentional in the first place).

<div id="container">
<ul id="photos">
<li class="photo">
<li class="photo">
</ul>
<div style="clear:left">&nbsp;</div>
</div>

regards.
-marc

Message from Rachell Coe (2/20/2006 02:50 PM)


>Here are examples of the way I've done it:
>http://www.kingestate.com/Media/Galleries/Harvest2005/index.htm and
>http://www.karenpidgeon.com/Prints.htm its basic css using the li.  Here is
>the code that makes it work on www.karenpidgeon.com:
>
>#thumbnail {
>         padding-top: 20px;
>         padding-bottom: 20px;
>         text-align: center;
>}
>#thumbnail ul {
>         margin: 0px;
>         padding: 0px;
>         clear: both;
>         position: static;
>         left: 0px;
>         display: inline;
>}
>#thumbnail li {
>         background-color: #000000;
>         float: left;
>         margin-top: 0px;
>         margin-right: 8px;
>         margin-bottom: 25px;
>         margin-left: 8px;
>         border: 1px solid #A16851;
>         text-align: center;
>         padding: 10px;
>         list-style-type:none;
>         position: relative;
>         font-weight: normal;
>         text-decoration: none;
>         color: #FFFFFF;
>         display: inline;
>}




More information about the thelist mailing list