rounded corners and borders

C

chez

Hi, take a look at www.margies.com.au I would like the square main table to
be shaped as the logo, the 2 rounded corners, thick and crisp

I am using layout tables, when using the corners, I'm just finding it,
fiddly, thin and not easy at all.... if I attempt to use an image, this is
really tricky and I feel I need to put an image in each corner due to the
border I'm trying to achieve is now down lower in the image, rather than the
actual border...(only a fraction) but surley thats not the way to go.... only
other thing I can think of is a background image, but the download time would
be annoying.....

Any ideas anyone !!

I'm a newieish....no courses, teaching myself........since 2003 mind you !
 
K

Kevin Spencer

Hi chez,

You do indeed need to use a table to do this, as rounded corners require the
use of images. The basics are that you need 6 images, one for each corner,
one for the top and bottom, and one for the sides. You will need a table
with 9 cells, 1 in the center for content, 4 corner cells, and 1 each for
top, bottom, and each side.

The images should be at least 20 pixels in size, to avoid issues with the
default line-height style. In the following example, I created images using
20 pixels. The "TB" (top/bottom) image is 20X20, with a horizontal line in
the center. The "Sides" (left and right sides) image is 20X20, with a
vertical line in the center. Each of the corners is 20X20, with a curve that
extends from the center of one side to the center of the adjoining side,
depending on which corner (UL, UR, LL, LR) it is for. The idea is that when
these images are put into the border cells of the table, they will fit
together seamlessly. The best way to create them is to either use some
imaging software to create a rectangle with curved corners and slice it into
9 sections (the center is unused), or to find a web page that has such
images in it (for rounded corners), and get the images from that web page.

In the example below, I used a style sheet to handle the styling of the
table and cells. The table's "border-collapse" style is set to "collapse" so
that there will be no borders between the cells. Each cell has a "padding"
style of "0 px" (0 pixels) to prevent the normal padding from being added
around the contents of the cell. This is necessary for some browsers,
despite the fact that the cells are sized to the size of the background
images. The corner cells are styled with a width and height of 20 pixels,
and the background images are set to not repeat. The top and bottom cells
use the "TB.gif" image, and the height only is set to 20 pixels. The
background images in these cells is set to "repeat-x" to allow the
background image to tile horizontally. The left and right cells use the
"Sides.gif" image, and the width only is set to 20 pixels. The background
images in these cells is set to "repeat-y" to allow the background image to
tile vertically.

The tables width is set to 500 pixels, which is arbitrary, and the left and
right margins are set to "auto," which will cause the table to be centered
in the page. This is also arbitrary, but probably what you want. The
contents of the table go in the center cell. Because the height of the table
is not set, whatever you put into that center cell will stretch the table
downward, and the tiling of the backgrounds in the sides will cause the
lines to seem to stretch to fit.

Remember to add the style sheet to the head portion of your page. The table
can go anywhere.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled 1</title>
<style type="text/css">
..UL
{
width: 20px;
height: 20px;
background-image: url('images/UL.gif');
background-repeat: no-repeat;
}
..LL
{
width: 20px;
height: 20px;
background-image: url('images/LL.gif');
background-repeat: no-repeat;
}
..borderTable
{
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
table-layout: fixed;
width: 500px;
margin-right: auto;
margin-left: auto;
}
..borderTable * td {
padding:0px;
}
..TB
{
background-image: url('images/TB.gif');
background-repeat: repeat-x;
height: 20px;
}
..UR
{
background-image: url('images/UR.gif');
background-repeat: no-repeat;
width: 20px;
height: 20px;
}
..Sides
{
background-image: url('images/Sides.gif');
background-repeat: repeat-y;
width: 20px;
}
..LR
{
background-image: url('images/LR.gif');
background-repeat: no-repeat;
width: 20px;
height: 20px;
}
</style>
</head>

<body>

<table class="borderTable">
<tr>
<td class="UL">&nbsp;</td>
<td class="TB">&nbsp;</td>
<td class="UR">&nbsp;</td>
</tr>
<tr>
<td class="Sides">&nbsp;</td>
<td>
Put any content in this cell, including layout tables, paragraphs,
what-have-you.
</td>
<td class="Sides">&nbsp;</td>
</tr>
<tr>
<td class="LL">&nbsp;</td>
<td class="TB">&nbsp;</td>
<td class="LR">&nbsp;</td>
</tr>
</table>
</body>

</html>

--
HTH,

Kevin Spencer
Microsoft MVP

DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net
 
K

Kevin Spencer

That demonstration of using divs to do rounded corners is an excellent
example of why I recommend using tables for tabular data. While it is
possible to use divs for practically anything, it is not always a good idea.

--
HTH,

Kevin Spencer
Microsoft MVP

DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net
 

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

Top