Bill,

What about treating this as a list object instead of a table? It might
be a bit of work/thought to set up initially but would certainly be much
easier to maintain especially when you have to reorder items.

The code/layout would essentially by fixed and easily replicated for
each new entry and you could then VERY easily move items around in list
for alphabetical ordering and could easily bump items from one column to
the next to address balancing the page layout.

Obviously the pseudo code below is short on specific details, but I
think it gets the idea across.

Best of luck,
Daniel

-------------

<ul id="column 1 fixed width align or float left">
        <li>
                <div with fixed width, displayed as block in-line>Last,
first<br/>email</div>
                <div with fixed width, displayed as block in-line>image
1</div>
                <div with fixed width>image 2</div>
        </li>
        <li>
                <div with fixed width, displayed as block in-line>Last,
first<br/>email</div>
                <div with fixed width, displayed as block in-line>image
1</div>
                <div with fixed width>image 2</div>
        </li>
        <li>
                <div with fixed width, displayed as block in-line>Last,
first<br/>email</div>
                <div with fixed width, displayed as block in-line>image
1</div>
                <div with fixed width>image 2</div>
        </li>
</ul> *

<ul id="column 2 fixed width align or float right"> *
        <li>
                <div with fixed width, displayed as block in-line>Last,
first<br/>email</div>
                <div with fixed width, displayed as block in-line>image
1</div>
                <div with fixed width>image 2</div>
        </li>
        <li>
                <div with fixed width, displayed as block in-line>Last,
first<br/>email</div>
                <div with fixed width, displayed as block in-line>image
1</div>
                <div with fixed width>image 2</div>
        </li>
        <li>
                <div with fixed width, displayed as block in-line>Last,
first<br/>email</div>
                <div with fixed width, displayed as block in-line>image
1</div>
                <div with fixed width>image 2</div>
        </li>
</ul> 

*If you are (very) concerned about semantic structure, instead of
breaking this into two separate un-ordered lists, you could wrap the
first and second half of the lists in divs that break them into columns.







-----Original Message-----
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of bill scheider
Sent: Monday, March 23, 2009 1:37 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] tabled thumbnail gallery to css?

Hi all

I volunteered for a non profit who recently lost their web person to do
some
updates on their website. The page in question can be found here:
http://www.oregonwca.org/gallery.html The gallery is a 7-col table
containing an artist's name, a thumbnail, a thumbnail, artist's name,
thumbnail, thumbnail. They want to retain that general layout of two
artists
and their thumbnails per line.

 

I'd like to re-code that page in css rather than a table. For one thing
it'd
be lots easier to retain the alphabetical order when adding or removing
a
new artist. The current code is certainly a mess and could certainly
benefit
from a cleansing:-)

 

Can someone point me in the direction of coding idea or solution for
this? I
suppose, strictly speaking, the info can be presented as a table of data
but
there's still the alphabetical order issue when adding or removing
artists.

 

All pointers are appreciated. TIA

Bill Scheider

______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to