Page 1 of 1
Displaying pics in a table, line break problem.
Posted: Wed Mar 08, 2006 5:44 pm
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.
Posted: Wed Mar 08, 2006 5:53 pm
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?
Posted: Wed Mar 08, 2006 6:08 pm
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.
Posted: Wed Mar 08, 2006 7:02 pm
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.
Posted: Thu Mar 09, 2006 4:06 am
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;}
Posted: Thu Mar 09, 2006 10:52 pm
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.
Thanks for all the post on this topic.
Posted: Fri Mar 10, 2006 10:47 am
by darryladie
You're Welcome
