/    Sign up×
Community /Pin to ProfileBookmark

replace table corner with a image??

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

to post a comment
CSS

9 Comments(s)

Copy linkTweet thisAlerts:
@JonathanAug 27.2003 — Why dont you just use the position:absolute theory... make your entire image then, you just do the position absolute example:
<i>
</i>&lt;img src="your_file.gif" style="position:absolute;top:3px;left3px;"&gt;
&lt;a href="#" style="position:absolute;top:4px;left:150px;"&gt;Hello&lt;/a&gt;
Copy linkTweet thisAlerts:
@PeOfEoAug 29.2003 — 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.
Copy linkTweet thisAlerts:
@JoshSep 04.2003 — Try this...
[code=php]
<!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 ([email protected])" />
<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>
[/code]

Let me know if it works for you. View the screenshot...

[upl-file uuid=93cd0345-b961-4312-a12a-65af93cb0e6c size=9kB]screenshot.png[/upl-file]
Copy linkTweet thisAlerts:
@JoshSep 05.2003 — I would challenge anyone out there to rewrite the above code without using any HTML tables.

Here's the source & images...

[upl-file uuid=d7e4c284-2cf3-4a69-bf63-552a55b7fb2a size=11kB]josh_challenge.zip[/upl-file]
Copy linkTweet thisAlerts:
@PeOfEoSep 06.2003 — 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.
Copy linkTweet thisAlerts:
@pyroSep 06.2003 — 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... ?

[upl-file uuid=b668cf40-034d-48f1-8394-236df2b53a90 size=2kB]rounded_corners.zip[/upl-file]
Copy linkTweet thisAlerts:
@JoshSep 06.2003 — Impressive, most impressive...

...and it validates! ?
Copy linkTweet thisAlerts:
@pyroSep 06.2003 — Thanks, though as you see by the code, it wasn't too overly complicated... ?
Copy linkTweet thisAlerts:
@PeOfEoSep 07.2003 — 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.
×

Success!

Help @shanuragu spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...