CSS for image borders [Archive]

serpentpower

02-06-2007, 03:49 PM

Hi all,

I'm a newbie to CSS. I want to make a table thta has an image as a border. After searching for CSS codes on the web, I finally wrote this code:

#bordertable {
width:540px;
background:url(images/WebDesignImg/shri_chakraSpacer.jpg) repeat-x repeat-y;
}

The HTML Part is:

<div id="bordertable">

<table border="0" style="width:500px;margin-top:10px">
<tr><td>some stuff here</td></tr>
</table>

</div>

However it doesn't seem to work. How do I get the table to display a border correctly?
The width and height of my spacer image is 20 px.

Please help.
Thanks,
Sarah

HookedOnWinter

02-06-2007, 05:19 PM

Sarah,

There is actually CSS for borders...

<table style="border:#FF0000 medium solid">

what kind of image are you using? i don't know if it's possible to make the border an image...

Centauri

02-06-2007, 05:53 PM

If you set the width of your containing div to the same as the table, then apply a padding of same size as image, it will enlarge the div by the padding size all round. You also need to set a background on the table. See this <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>table borders</title>
<style type="text/css">

</style>
</head>

<body>
<div id="bordertable">
<table>
<tr>
<td>Some stuff here, which I certainly hope can be considered data or tabualr data, and not anything that could be considered layout ...... :)
</td>
</tr>
</table>
</div>
</body>
</html>

Cheers
Graeme

HookedOnWinter

02-06-2007, 05:54 PM

Graeme i love your "data"

wonshikee

02-06-2007, 06:00 PM

Hi all,

I'm a newbie to CSS. I want to make a table thta has an image as a border. After searching for CSS codes on the web, I finally wrote this code:

#bordertable {
width:540px;
background:url(images/WebDesignImg/shri_chakraSpacer.jpg) repeat-x repeat-y;
}

The HTML Part is:

<div id="bordertable">

<table border="0" style="width:500px;margin-top:10px">
<tr><td>some stuff here</td></tr>
</table>

</div>

However it doesn't seem to work. How do I get the table to display a border correctly?
The width and height of my spacer image is 20 px.

Please help.
Thanks,
Sarah

If you make the background image, as stated above, so that what is showing, is the border image you want, it would work.

serpentpower

02-06-2007, 06:12 PM

Thank you very much ! Now I have a neat looking webpage. My table has a beautiful image border in place of the standard solid line.
It looks really nice.

Thank you very much ! :)

serpentpower

02-07-2007, 10:16 AM

When I implemented the code by Graeme, I did get a beautiful table with an image as the border. However, I found that my image at the bottom of the table didn't show correctly. i.e. the image was cut into half. TO rectify it I added this little piece:

height:200px;

and the image shows correctly now.
The height and the width of the table / div must be multiples of the dimensions of the background image that is being used, so the image will display correctly.

:)