Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I am creating a "grid" of images:
1 2 3    or   1 2
4 5 6         3 4
              5 6

I can use this grid to display only images.
Or I also can display a title and price under the image.

I will make each item float left and then clear the container.

Should I use DIVs or UL/LI for the markup?

I am not using tables because I will have an option to change the number of
columns so when that option is selected I will only change the class applied.

Thank You,

Re: DIVs or UL/LI

Shapper wrote:

Quoted text here. Click to load it

As this is essentially a list of images belonging together, you should use a
UL element, and child LI elements which float.  The image caption, if any,
should be in a grandchild DIV element.

[When one thinks about it, many items of a Web site are better arranged in
(unordered) lists.  Weblication, the CMS I am currently developing for and
with, makes extensive use of this by providing the ability for the developer
to define list templates in XSLT (to transform XML object data, and format
the result with CSS), that the user can choose from to have different ways
to display the same data.  I find that a quite genial, but perhaps not
unique, approach.]
Quoted text here. Click to load it


Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.

Re: DIVs or UL/LI

Quoted text here. Click to load it

<DIV>  There's no strong reason to use <LI>.  OTOH, you could (but
shouldn't) even use <P> (or <SPAN>, or <ABBR>, or some other quite
inappropriate tag) and it would work perfectly well - nothing you're
trying to do here is going to be affected by browser behaviour
dependencies on specific tags.

It's a good idea to not use <TABLE>, but you can (and should) then do
this by using <DIV> and CSS float to let the floating elements decide
how many of them should fit onto a row automatically.

Re: DIVs or UL/LI

Quoted text here. Click to load it

Perhaps better to use in-line blocks since captions are involved,
if true flexibility is required.

As for whether to use a list element, there is often, perhaps too
often, some sort of argument for lists since so much of what we
do is listing stuff. We list arguments, we list points, we list
images that have some sort of theme (or not)... Anyway, it is
impossible to tell without knowing the real context and you won't
get that from a shnapper.


Re: DIVs or UL/LI

Quoted text here. Click to load it
Quoted text here. Click to load it

This is what I have done using CSS. The CSS is an external script I
call into the various pages and it will give you X columns and rows
based on the viewer screen setting.
You can see it here: http://urban.davidfisher.biz/Mississauga/AbsoluteWorld =
go to 2010 year

On my 24" screen I get 10 columns and 2 rows and have seen it down to
4 columns and 5 rows on 15". I use 150x112 for the photos and various
size for the text

If you make the photo size smaller, you will get more.

On the HTML page I have this code and setup:
            <!-- Begin 20 Photo Layout and Data -->
                            <div id=3D"thumbnav" style=3D"text-align:
center;"> <!-- thumbnails -->
                                    <div class=3D"landscape"><a
                                         (Number of photos)
                                    <div class=3D"landscape"><a
                            </div>      <!--  /thumbnail -->
                                        <!-- End 20 Photo Layout and
Data -->
The CSS call landscape: <link rel=3D"stylesheet" type=3D"text/css"
href=3D"http://css.davidfisher.biz/csslayout/landscape.css " />

div#thumbnav {max-width: 100%;}
div.thumbnav {max-width: 100%;}
div.photo {
  max-width: 100%;

div.thumbnave {max-width: 100%;}

div.landscape {
    display: inline-block;
    vertical-align: top;
    width: 153px;
    margin: 5px 5px 30px;
    padding: 7px;
    text-align: left;
    border: 1px solid #e7e7e7;
    border-top: 4px solid black;
    overflow: hidden;
    color: #FFFF00;

/* this style was cut-and-paste from another site (Bootnic)
(http://bootnic.bounceme.net/TemporaryPages/inlineBlock.php )
then the class names were changed*/
div.landscape, x:-moz-any-link {
    display: -moz-inline-box;

.landscape a img {
    border: 2px solid white;

.landscape a img:hover {
    border: 2px solid #477cc8;

.landscape p {
    margin: 0;
    padding-bottom: .5em;
    font-size: .8em;
    color: #424242;
-moz-inline-box to support older mozilla user agents
extra div also required
div.landscape, x:-moz-any-link {
    display: -moz-inline-box;

reset for FF3
div.landscape, x:-moz-any-link, x:default {
    display: inline-block;

       /*<!--  html, body    {height: 100%; width: 100%; margin: 0;
padding: 0; border: 0;
    color: #708090;
   background: #33CCFF;

    }  --> */

.thetable        {
    position: relative;
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    clear: both;
    border-spacing: 0; /* required by Opera 6 */

Site Timeline