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??
sharaWhy dont you just use the position:absolute theory... make your entire image then, you just do the position absolute example:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"your_file.gif" style="position:absolute;top:3px;left3px;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" style="position:absolute;top:4px;left:150px;">Hello</a>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.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 (<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->)" />
<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...I would challenge anyone out there to rewrite the above code without using any HTML tables.
Here's the source & images...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.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...
Impressive, most impressive...
...and it validates!
Thanks, though as you see by the code, it wasn't too overly complicated... 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.
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??
sharaWhy dont you just use the position:absolute theory... make your entire image then, you just do the position absolute example:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"your_file.gif" style="position:absolute;top:3px;left3px;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" style="position:absolute;top:4px;left:150px;">Hello</a>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.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 (<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->)" />
<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...I would challenge anyone out there to rewrite the above code without using any HTML tables.
Here's the source & images...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.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...
Impressive, most impressive......and it validates!
Thanks, though as you see by the code, it wasn't too overly complicated... 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.