line up images horizontally

S

shank

I must admit this CSS thingy is pretty cool. I finally have a validated page
in 4.01 while using CSS and getting rid of tables. That's 500 lines I had to
clean up. I'm still stuck on one issue though. I posted the code of my table
in question below. It has 6 JPEGs with a caption under each JPEG. How can I
use CSS to lose the outer table and the nested table, plus keep the same
layout? The layout is 3 photos over 3 photos with the captions under each
photo.

Ignore the CSS class attributes. I had them in there for fonts etc.

thanks!
-------------------------
<table class="tbcenter">
<tr>
<td class="tbcentertoprow">BE THE FIRST TO GET THE HITS!</td>
</tr>
<tr>
<td><table style="width:330px">
<tr>
<td style="width:33%; text-align:center">
<img src="images/pic1.jpg" style="width:75px; height:75px; border:0px"
alt=""></td>
<td style="width:33%; text-align:center">
<img src="images/pic2.jpg" style="width:75px; height:75px; border:0px"
alt=""></td>
<td style="width:33%; text-align:center">
<img src="images/pic3.jpg" style="width:75px; height:75px; border:0px"
alt=""></td>
</tr>
<tr align="center" valign="middle">
<td class="photocaptions">PIC1</td>
<td class="photocaptions">PIC2</td>
<td class="photocaptions">PIC3</td>
</tr>
<tr align="center" valign="middle">
<td style="width:33%; text-align:center">
<img src="images/pic4.jpg" style="width:75px; height:75px; border:0px"
alt=""></td>
<td style="width:33%; text-align:center">
<img src="images/pic5.jpg" style="width:75px; height:75px; border:0px"
alt=""></td>
<td style="width:33%; text-align:center">
<img src="images/pic6.jpg" style="width:75px; height:75px; border:0px"
alt=""></td>
</tr>
<tr align="center" valign="middle">
<td class="photocaptions">PIC4</td>
<td class="photocaptions">PIC5</td>
<td class="photocaptions">PIC6</td>
</tr>
</table>
/td>
</tr>
</table>
 
A

Adrienne

I must admit this CSS thingy is pretty cool. I finally have a validated
page in 4.01 while using CSS and getting rid of tables. That's 500
lines I had to clean up. I'm still stuck on one issue though. I posted
the code of my table in question below. It has 6 JPEGs with a caption
under each JPEG. How can I use CSS to lose the outer table and the
nested table, plus keep the same layout? The layout is 3 photos over 3
photos with the captions under each photo.

Ignore the CSS class attributes. I had them in there for fonts etc.

thanks!
-------------------------
<table class="tbcenter"> <tr>
<td class="tbcentertoprow">BE THE FIRST TO GET THE HITS!</td> </tr> <tr>
<td><table style="width:330px"> <tr>
<td style="width:33%; text-align:center"> <img src="images/pic1.jpg"
style="width:75px; height:75px; border:0px" alt=""></td> <td
style="width:33%; text-align:center"> <img src="images/pic2.jpg"
style="width:75px; height:75px; border:0px" alt=""></td> <td
style="width:33%; text-align:center"> <img src="images/pic3.jpg"
style="width:75px; height:75px; border:0px" alt=""></td> </tr> <tr
align="center" valign="middle"> <td class="photocaptions">PIC1</td>
<td class="photocaptions">PIC2</td>
<td class="photocaptions">PIC3</td> </tr>
<tr align="center" valign="middle">
<td style="width:33%; text-align:center"> <img src="images/pic4.jpg"
style="width:75px; height:75px; border:0px" alt=""></td> <td
style="width:33%; text-align:center"> <img src="images/pic5.jpg"
style="width:75px; height:75px; border:0px" alt=""></td> <td
style="width:33%; text-align:center"> <img src="images/pic6.jpg"
style="width:75px; height:75px; border:0px" alt=""></td> </tr> <tr
align="center" valign="middle"> <td class="photocaptions">PIC4</td>
<td class="photocaptions">PIC5</td>
<td class="photocaptions">PIC6</td> </tr> </table> /td> </tr> </table>

Have a look at http://www.two-time.com/ . The site is in development, but
the thumbnails are doing basically what you want to do. There are no
tables, CSS only. The only link that isn't working is the About Rona link
(waiting for bio on client), but the site can give you an idea of what can
be done without tables.
 
B

Beauregard T. Shagnasty

shank pounced upon this pigeonhole and pronounced:
Very cool and VERY easy!!!
thanks!

And, if you remove the narrow width of: #container{width:265px;}
your thumbnails will float the full browser window width. <g>
 
B

brucie


the clock in the logo should show a time on the right side of the
face. left side == going back. right side == going forward. just like
you wouldn't have a logo with and arrow pointing left (unless you
really wanted to). 4 o'clock is good.
 
B

Beauregard T. Shagnasty

brucie pounced upon this pigeonhole and pronounced:
the clock in the logo should show a time on the right side of the
face. left side == going back. right side == going forward. just like
you wouldn't have a logo with and arrow pointing left (unless you
really wanted to). 4 o'clock is good.

Aren't all pictures of watches and clocks supposed to show 10:10 ? <g>

Some advertising thingy... most pleasing...
 
B

brucie

Aren't all pictures of watches and clocks supposed to show 10:10 ? <g>

its known as 1010. there are also some other common times. they're
times used that supposedly make pictures of clocks/watches more
pleasing and symmetrical (and just happen to make the makers logo
fully visible). you don't want pleasing and symmetrical on a logo if
it gives the impression of pointing backwards.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top