Displaying pics in a table, line break problem.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Displaying pics in a table, line break problem.

Post by JellyFish »

I hava a table that is 200 pixels wide. I have a database full of pictures that rang between 20 - 30 pixels wide, that I want to display in the table without adding to the width of that table. how would I display the pictures horizontally within the table without resizing the table, but just breaking when the string of pics get to long for the width of the table? Any help on this topic is appreciated.

Thanks.
darryladie
Forum Commoner
Posts: 62
Joined: Thu Mar 02, 2006 6:14 pm
Location: East Sussex, UK

Post by darryladie »

I'm pretty sure you could use CSS, maybe an overflow property or white-space, I'm not too sure, why not use a <ul>within a <div> with a set width and display the <li> pictures inline?
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

That might work but although I wouldn't know cause I don't know how to do so. But if I put spaces between the pics it does do want I need it to do, but then agian I don't like the fact that there are big spaces between the pics so if there's a way to make the space width 1 pixel, through css or something, I could do this. If you'd like to explain in more detail want you meant darryl I'm very much open to the fact.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

I think I got something to work. I used css to:
H1 {
word-spacing: -10px;
}
make everything in h1 heading -10px width, thus making each space in my picture string invisable. I just googled css and I got this from a site so I'm wondering and I'm going to try some other attributes, as you may call them, other then H1. If anyone can suggest one that is uncommonly used so that I can't stumble upon a problem if using h1 sizes, as I'm assuming.
darryladie
Forum Commoner
Posts: 62
Joined: Thu Mar 02, 2006 6:14 pm
Location: East Sussex, UK

Post by darryladie »

What I was suggesting was this, you add your pictures like so:

Code: Select all

<ul>
<li><img src="bleh.gif alt="bleh" /></li>
<li><img src="bleh2.gif alt="bleh2" /></li>
<li><img src="bleh3.gif alt="bleh3" /></li>
<li><img src="bleh4.gif alt="bleh4" /></li>
<li><img src="bleh5.gif alt="bleh5" /></li>
<li><img src="bleh6.gif alt="bleh6" /></li>
</ul>
The CSS to do what you wanted would then be:

Code: Select all

ul{ margin: 0; padding: 0;}
ul li	{ display: inline; list-style-type: none; margin: 0; padding: 0;}
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Thanks darryl. I put:
#clearspaces {
word-spacing: -4px;
}
That way I just include the ID element in in my table and I can just put spaces in between each img but the spaces won't be visable. :D

Thanks for all the post on this topic.
darryladie
Forum Commoner
Posts: 62
Joined: Thu Mar 02, 2006 6:14 pm
Location: East Sussex, UK

Post by darryladie »

You're Welcome :D
Post Reply