Web Design Forum  
 
Go Back   Web Design Forum > Web and Graphic Design > Web Design

Reply
 
LinkBack Thread Tools Display Modes
Old 08-20-2008, 03:20 PM   #1 (permalink)
New Member
 
Join Date: Jul 2008
Posts: 22
Default Flowing table cells

Hi. I would like to create a table (width="100%") where the cells would keep on 'flowing' to keep adding columns to the table until it needs to flow into the next row. These are used to hold images.

Simply, the concept is to mimic textarea where the words would keep flowing until it have to go to the next line. I want the similar concept to be used in the table.

So when the user changes screen sizes, the table would table up the entire screen and images would be taken from a directory and place into table cells until it reaches the end of the first row and flow onto the next.
thotheolh is offline   Reply With Quote
Old 08-20-2008, 11:00 PM   #2 (permalink)
Silver Member
 
adamblan's Avatar
 
Join Date: Aug 2008
Location: Lake Tahoe
Posts: 195
Default

#1 - Why tables? Use css divs instead

#2 - Depending on the level of complexity desired this effect could be done either server or client side, it's really up to you how you want it set up, but I think the best way would be to create an xml doc from db query, and display content based on that dataset...

#3 - Of course, you could always KIS and just float you images...
__________________
<ablank.us>
adamblan is offline   Reply With Quote
Old 08-22-2008, 04:58 AM   #3 (permalink)
New Member
 
Join Date: Jul 2008
Posts: 22
Default

May I know how do you do use CSS divs for the flowing table cells ?
thotheolh is offline   Reply With Quote
Old 08-22-2008, 05:22 AM   #4 (permalink)
Moderator
 
jnjc's Avatar
 
Join Date: Jun 2008
Posts: 365
Default

I think you may be over complicating things. Check out:

http://www.solasit.com.au/sandbox/webdesign/imgGallery/

Try resizing your browser and you should see the content wrap depending on the size of your browser window.

If you view the source all I have done is as follows:

<div class="gallery">
<img src="1.png"/>
<img src="2.png"/>
<img src="3.png"/>
<img src="4.png"/>
<img src="5.png"/>
<img src="6.png"/>
.....
</div>

and the style is applied only to the div as follows:

div.gallery {
width:90%;
height:50%;
overflow:auto;
margin:auto;
border: solid 1px #000;
}


If you need to be able to click on the images etc. then you will have to wrap them in a link or enclose them in a div (look at using float:right in your css).

HTH,
JC
jnjc is offline   Reply With Quote
Old 08-23-2008, 01:25 AM   #5 (permalink)
New Member
 
Join Date: Jul 2008
Posts: 22
Default

Thanks. Would look into the helpful codes
thotheolh is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


All times are GMT. The time now is 01:38 AM.


Computer Forum - TechZine - Webpage Design

 
Powered by vBulletin® Version 3.7.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.2.0 ©2008, Crawlability, Inc.