PDA

Click to See Complete Forum and Search --> : replace table corner with a image??

shanuragu
08-22-2003, 06:02 AM
Hi

Is it possible to replace four corners of a table with images to make it curved & also table border (top/bottom) with a image??
I heard that we can do this using CSS.

Any suggestion/solutions??

shara
Jonathan
08-26-2003, 09:48 PM
Why dont you just use the position:absolute theory... make your entire image then, you just do the position absolute example:

<img src="your_file.gif" style="position:absolute;top:3px;left3px;">
<a href="#" style="position:absolute;top:4px;left:150px;">Hello</a>
PeOfEo
08-28-2003, 11:04 PM
I aggree with johnathan, you can always just put one image in a cell and do all that colspan here there and everywhere to get images in courner cells, which is probably the most commonly used method, but using absolute positioning is move conveiniant and you may also want to go beyond by overlapping some text or something and use z-order, really the css allows you more freedom.
Josh
09-04-2003, 02:29 PM
Try this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="author" content="Joshua J Mallory (clonemaster@email.com)" />
<style type="text/css">
body {
background-color: #000000;
color: #ffffff;
}
.n_west {
background-image: url(n_west.gif);
background-repeat: no-repeat;
height: 10px;
width: 10px;
}
.north {
background-image: url(north.gif);
background-repeat: repeat-x;
height: 10px;
}
.n_east {
background-image: url(n_east.gif);
background-repeat: no-repeat;
height: 10px;
width: 10px;
}
.west {
background-image: url(west.gif);
background-repeat: repeat-y;
width: 10px;
}
.middle {
padding: 10px;
width: auto;
}
.east {
background-image: url(east.gif);
background-repeat: repeat-y;
width: 10px;
}
.s_west {
background-image: url(s_west.gif);
background-repeat: no-repeat;
height: 10px;
width: 10px;
}
.south {
background-image: url(south.gif);
background-repeat: repeat-x;
height: 10px;
}
.s_east {
background-image: url(s_east.gif);
background-repeat: no-repeat;
height: 10px;
width: 10px;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" summary="">
<tr>
<td class="n_west">
</td>
<td class="north">
</td>
<td class="n_east">
</td>
</tr>
<tr>
<td class="west">
</td>
<td class="middle">
<h1>table content</h1>
</td>
<td class="east">
</td>
</tr>
<tr>
<td class="s_west">
</td>
<td class="south">
</td>
<td class="s_east">
</td>
</tr>
</table>
</body>
</html>

Let me know if it works for you. View the screenshot...
Josh
09-05-2003, 06:09 PM
I would challenge anyone out there to rewrite the above code without using any HTML tables.

Here's the source & images...
PeOfEo
09-05-2003, 07:03 PM
Heh, just use a vml rounded rectangle. If I had the time I would take you up on your challenge, but I am about to watch a movie, But I used rounded courners on a hybrid layout on my site, Its only a hybrid due to ie bugs but, you get the idea.
pyro
09-05-2003, 10:22 PM
Took you up on it (though I used my own files, rather than downloading yours...) and was able to create rounded borders using valid HTML 4.01 Strict and valid CSS with no tables... :)
Josh
09-06-2003, 01:09 AM
Impressive, most impressive...
...and it validates! :cool:
pyro
09-06-2003, 07:17 AM
Thanks, though as you see by the code, it wasn't too overly complicated... :)
PeOfEo
09-06-2003, 07:15 PM
The table method is more complicated. I would have to say css would be a hundred times easier then tables to use for layout, but then ie sucks so I have to do twice as much work in the end as I would if ie would read code like opera or mozilla.