How to center text under picture and add links

Geo77 · Joined: 02 May 2008 Posts: 2

Hello there,

1)did I code this correctly to center the text under the pic?

2)how do I add the links to the names and the pics?

3)how do I add more space between the two rows?

4)if you look at the 4th pic to the right of each row, you will see that the pic is cut off (smaller). Is there a way that I can quickly resize the pic via html as opposed to the time-consuming method of resizing the pic in photoshop?

Here is my site:

http://www.votingforrewards.com/jj/main/jj/%7Bkeyword%7D/?a=12376&b=6&c1=

This is my code:

Straystudio · Joined: 14 Apr 2008 Posts: 238 Location: Nord Italy

<center> might want its </center> even though, I prefer:

<td align="center">name3</td>

valign="top/middle/bottom" as well if needing, if cell's height grows and content floats.

Links: <a href="">text or image</a>

this open a page (web page, file .html .htm .php ...):
<td align="center"><a href="http://www.htmlcodetutorial.com/help/index.php" target="_blank">name3</a></td>

this open an image (.jpg .jpeg .gif .png ...):
<td align="center"><a href="http://www.votingforrewards.com/jj/phsmallest.jpg" target="_blank">name3</a></td>

remove target="_blank" if You want it not to open in a new window
add style="text-decoration: none;" if You want the linking text not to be underlined.

Done for image-link:

<a href=""><img src="URL" /></a>

<img border="0" src="URL" /> to prevent the picture from getting surrounded by a blue/violet line; it happens to show that that image opens a page.

<img height="" width="" src="URL" />

and the User's browser will do its best to show the image as resized, based on values You enter. Works pixel or % percentuage.
% in one dimension only also can do, the other following as automatically proportioned.
Percentuage refers to the space allowed by the upper Element (table-cell or div) containing the img tag; does not refer to the original size of the image itself.

The 4th pic is cut off by a limiting size of a wrapping div
I would check at the very beginning of the body for:
<div id="wrap">
<div id="box">
changing their widths in Your imported CSS file:
http://www.votingforrewards.com/jj/style.css

from width:500px; to width:550px; or more.

Here a piece where:

body { font-family:Helvetica, Arial, Geneva, sans-serif; font-size:12px; background:#0000FF url(images/bbg.png) repeat-x; color:#666; }
#wrap { width:500px; margin:20px auto; padding:0; }
a:hover { text-decoration:none; color:#666; border:none; cursor:pointer; }
#box { background:#fff; border:8px solid #fff; width:500px; table-layout:fixed; margin:0 auto; padding:0; }
#top { background:#f1efe7; height:26px; line-height:26px; margin:0 auto; padding:0 5px; }
#header { background:#000000; height:100px; line-height:26px; margin:5px auto; padding:0 5px; }

Corey Bryant · Posted: Sat May 03, 2008 7:40 am

If you give your <td> a width you can use the style

Geo77 · Joined: 02 May 2008 Posts: 2

Thanks so much you guys for the help.

The advice was great!