Border

[maxh]

I have an image with text under it. Both are links, but not the same link. Is there a way to put a border around both that does not extended the entire width of the page, but only surrounds the image and text (with a small margin)?

[mmcspadden]

A fairly simple way to do that would be to put them in a table, and define the border size and margins in a CSS stylesheet.

<table><tr><td><img src="yourpic.jpg"></td><td><a href="site.html">Your Text</a></td></tr></table>

You could toss something like that into your html, then use a CSS style sheet to define the borders. This website has a really nice interactive table builder that lets you see what the table would look like and shows you the code. It shows the code using an internal css sheet. I personally like to keep my css externally out of my HTML and PHP. but that's just me. http://www.somacon.com/p141.php

[rzea]

The concept of Tables is to be used when there's tabular data to display, like a registration or contact us forms, product or price lists, etc., not to define the layout of the page.In other words, what you want can perfectly be done with CSS.First put the image and the link inside a DIV, for example:HTML:

<div id="image-and-link">   <a href="your image link here" title="Here's the image link"><img src="image.jpg" alt="Description of the image" width="110" height="100" title="Title of the image" /></a>	  <br />   <a href="your text link here" title="Here's the text link">Here's the text link</a></div>

CSS:

#image-and-link {  width:100px; /* Use the maximum width from either the image or the text link */  margin:5px; /* This gives the container of the image and the link a margin of 5px so the DIV doesn't touch anything around it */  border:#000 1px solid; /* This is the border of the container, which is what I understood you want */}#image-and-link img,#image-and-link a {  margin:2px; /* This is a small margin space of 2px so the image and the text don't touch each other */  }

Hope this helps.Let us know.

[mmcspadden]

Ricardo's idea is definitely the better way to go

[maxh]

It works, but now I've lost the alignment.

[Synook]

Umm what does your current code look like?

[maxh]

It's in a pile of JS for image randomization, but here's the template of what spits out:

<div style="text-align: center; width: 475px; border: double;"><a href="LINK_FOLLOWS_TO"><img src="IMAGE" style="border: 0" width="468" height="60" alt="DESCRIPTION" /></a><div style="font-size: x-small; margin: 2px;"><a href="viewall">View all</a></div></div>