Hi Robert,
Your option looks great!
The funny thing is that when you get down to fine details of semantics, you
can argue about a range of different solutions to any problem - divs, dl's
and ul's could all be used successfully in creating image galleries.
Bottom line - we should all be striving to avoid options that are obviously
un-sematic (is that a word?). This would include using dl's and blockquotes
for indenting, stying <p>'s to look like headings (this used to be one of my
tricks before I saw the light)... Basically avoiding the use of any element
that has no meaning or incorrect meaning if the CSS is not present.
:)
Russ
>
> I was searching the web for a good way to do a thumbnail gallery and
> came across the discussion on this list between Russ Weakley and Justin
> French. I came up with this alternative to the ways that they wrote
> about (Russ - each image in its own DL, Justing - each image in its own
> DIV).
>
> What I did was to make it a plain UL with the gallery class applied to
> the UL, and the image and description being in a LI, which is floated.
>
> It looks to me like less markup in the HTML portion, but a little more
> in the CSS.
>
> Here's the code (using the same content as used by them):
>
> <style type="text/css" media="screen">
> body
> {
> margin: 20px;
> padding: 0;
> font: 90% arial, sans-serif;
> background-color: #fff;
> }
>
> ul.gallery
> {
> list-style: none;
> margin-left: 0;
> padding-left: 0;
> }
>
> .gallery li
> {
> border: 1px solid #000;
> background-color: #ddd;
> width: 102px;
> text-align: center;
> padding: 10px;
> float: left;
> margin-right: 1em;
> }
>
> li img
> {
> display: block;
> border: 1px solid #000;
> width: 100px;
> height: 100px;
> }
>
> li a
> {
> display: block;
> font-weight: bold;
> margin: 5px 0 3px 0;
> }
>
> </style>
> </head>
> <body>
> <h1>Unordered list for image gallery</h1>
> <ul class="gallery">
> <li>
> <img src="flower.jpg" alt="">
> <a href="#">Title here</a>
> Description here
> </li>
> <li>
> <img src="flower.jpg" alt="">
> <a href="#">Title here</a>
> Description here
> </li>
> <li class="gallery">
> <img src="flower.jpg" alt="">
> <a href="#">Title here</a>
> Description here
> </li>
> </ul>
> </body>
>
*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************
