how to get table cell to ask like thumbnails [Archive]

Click to See Complete Forum and Search --> : how to get table cell to ask like thumbnails

carpetpaul

11-06-2004, 03:15 AM

I need to try to make a grid of table cells behave live thumbnails do in windows xp, if you open a page of thumbnails, then stretch and narrow the viewable area, the thumbs just rearange, but still maintain the square shape.
I've tried the 'percentage of browser' and also definind table cells using pixels, I've found that use pixel helps, it does maintain the shape but it still does not arrange the actual table in relation to the shape and size of the viewable window, is there any way to do this ? thanks - Paul

Here's my code :-

<html>
<head>
<title>Photo's</title>
</head>
<BODY BGCOLOR="#CCFFCC">

<table border='1'width='600'height='120'>
<tr>

<td width='120'height='120'align="center"> <IMG

SRC="chairs_thumb.jpg" width="90" height="67">

 Test cell 1</td>

<td width='120'height='120'align="center">  Test cell

2</td>

<td width='120'height='120'align="center">  Test cell

3</td>

<td width='120'height='120'align="center">  Test cell

4</td>

<td width='120'height='120'align="center">  Test cell

5</td>

</tr>
</table>

</body>
</html>

Fang

11-06-2004, 04:00 AM

Just place all images in a <div>, they will arrange themselves.
No need for tables.

BonRouge

11-06-2004, 08:08 AM

You could try something like this:

css:

ul {list-style-type:none;}
li {
float: left;
margin:10px 10px;
}
li p {
text-align: center;
}
html :

<ul> <li><img src="pic1.jpg" alt=""/>Text</li>
<li><img src="pic2.jpg" alt=""/>Text</li>
<li><img src="pic3.jpg" alt=""/>Text</li>
<li><img src="pic4.jpg" alt=""/>Text</li>
<li><img src="pic5.jpg" alt=""/>Text</li>
<li><img src="pic6.jpg" alt=""/>Text</li>
<li><img src="pic7.jpg" alt=""/>Text</li>
</ul>

carpetpaul

11-06-2004, 01:15 PM

as I've only been learning html on and off for a few months, ths css example above just looks like chinese, I've absoloutely no idea what any of that means, I'm sure I'll learn soon, but I want to get my first site up and running as simply as possible, after that I'll explore css in more detail.

Surely the html code above just 'lists' the images, I need them across the browser roughly full screen and then able to scroll down through 7 or 8 levels of thumb type images.

The table method suited me (apart from the browser not 'auto arranging them based on browser viewable width), as I (as a novice) could easily add text directly beneath each image.

could you give me an expample of using the <div> tag, does this enable me to have my layout of approx 7 thumbs wide by 7 or 8 levels of thumbs vertically ?

Any example, most appreciated - thanks - Paul

BonRouge

11-06-2004, 01:21 PM

Ok. The code above IS an example.

Have a look here (http://cheers-sendai.com/gallery.htm) - this is a small example of that code in practice. Change the size of your browser (make the width smaller) and see how the pictures react. View the source and you'll see that the code is the same as in the example I posted.

Please let me know if you're still confused.

carpetpaul

11-06-2004, 02:51 PM

I'm constantly comfused, I suppose it's part of learning, but yes, the page you mention operates exactly as I would like, would you mind if I borrowed this part of your code ? - please see near the bottom of this post do I need this extra bit(was immediately above <style type ...etc)

<style type="text/css">
ul {list-style-type:none;}
li {
float: left;
margin:10px 10px;
}
li p {
text-align: center;
}
</style>

</head>

<body>
<ul>
<li><img src="myimage.jpg" alt=""/>piture label</li>
<li><img src="myimage.jpg" alt=""/>picture label</li>
<li><img src="myimage.jpg" alt=""/>picture label</li>
<li><img src="myimage.jpg" alt=""/>picture label</li>
<li><img src="myimage.jpg" alt=""/>picture label</li>
<li><img src="myimage.jpg" alt=""/>picture label</li>
<li><img src="myimage.jpg" alt=""/>picture label
</li>
</ul>
</body>
</html>

----------do I need this bit :-

charset=shift_jis" />

----------what does this do ????

:) THANKYOU FOR ALL YOUR HELP, THIS IS MUCH SHORTER CODE TOO, I WILL CONSULT MY WEB DESIGN BOOKS TO GET IT STRAIGHT IN MY MIND HOW IT THE CSS BIT WORKS:)

Fang

11-06-2004, 03:20 PM

You do need the style, but not the shift_jis".
Use:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
charset (http://www.w3.org/International/O-charset-lang.html)