setting size within a table

[spdwrench]

Ok I dont know the exact terminology of what I am trying to do...

 

basicly I am displaying 10 images in a table

 

I need each image width to be 100 pixels even if the actual image is a bit less

 

how do I set the width of the area the image is in to 100 even if the image is 80 the extra space should be filled with the background color...

 

I'm sure there is a simple way to make each image inside a field be a certain width

 

please anyone give me an idea?

 

Paul

 

[micah1701]

<table>

<tr>

<td width="100" bgcolor="#336699">

  <img src="your_image.jpg" width="80" height="50">

</td>

</tr>

</table>

[spdwrench]

this almost works...

 

it sets the image into 100 pixel square but it the next image goes under the previous

 

I need the images to line up side by side not top to bottom

 

this makes the block I need but I need them to continue left to right in the table

 

???

 

how can I achieve this?

 

Paul

[ToonMariner]

don't size the images...

 

this is a job for an unordered list...

 

<ul id="imglist">
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
</ul>

 

Now you need to know what the max size of your images will be AND include the height and witdh values... THEN some css..

 

ul#imglist li
{
list-style-type: none;
float: left;
margin: 0 0.2em 0.2em 0;
width: 100px;
height: #maxheight of images#;
}

ul#imglist li img
{
margin: auto;
}

[sneamia]

To go along with instructions you requested:

<style>
td {
  width:100px;
  text-align:center;
}

td img {
  display:inline;
}
</style>

 

<table>
  <tr>
    <td><img src="..." alt="..." /></td>
    <td><img src="..." alt="..." /></td>
    <td><img src="..." alt="..." /></td>
    <td><img src="..." alt="..." /></td>
    <td><img src="..." alt="..." /></td>
    <td><img src="..." alt="..." /></td>
    <td><img src="..." alt="..." /></td>
    <td><img src="..." alt="..." /></td>
    <td><img src="..." alt="..." /></td>
    <td><img src="..." alt="..." /></td>
  </tr>
</table>

 

That's one way to do it.  And I believe it should work.

[ToonMariner]

allthose images wold be on one line - the advantage of floating lists is that they will fill the space available and then start a new line - so fluid widths can be achieved easily.

[sneamia]

allthose images wold be on one line - the advantage of floating lists is that they will fill the space available and then start a new line - so fluid widths can be achieved easily.

 

Yes, except I did what he asked.  I'm assuming he knows what's best for his site, and if he provides more specifics, then we can optimize and tune for display purposes.

[ToonMariner]

asssuming what somebody knows is best for their site is dangerous - think about it 10 pics all 100px wide is not always going to display very well....

 

All we can do is instead of giving out any old crap is to impart our knowledge of the web and how dynamic it needs to be to help people produce better sites.  It may well be that what we offer not only serves the purpose they need but also serves other situations too with no need for alteration to and code. The alternative is giving one set of code for each situation - which is not good at all.

 

This is a forum to help peopl improve their skill as a web developer and as such we shoud offer the most robust solutions possible...

[spdwrench]

Thanks to both of you... for both methods... I don't want to start any arguments both both methods seem very usefull... and this is a batch of pics on one page only...

 

thanks for both the ideas...

 

oh yea I don't know whats best for my site

 

Paul

[sneamia]

Ok, would you mind giving us an idea of what's going on on that page?  A direct link would be best.