how to set an image as a table right corner

ebookz · 11-18-2012, 03:36 AM

how to set an image as a table corner??I want set a image for a table corner..how can I do it in html or css...??? example plzz visit following table to get an idea what I want :

In this example u can see a "Details" image set to table right corner...
thanks in advanced..

sunfighter · 11-18-2012, 04:31 AM

Could be done a number of ways. I would use an image for the details banner with transparent background. Position it absolutely to place it in the corner(table should be positioned absolutely also so they stay together) and use z-index to place the banner in front.

ebookz · 11-18-2012, 12:45 PM

Quote:

Originally Posted by sunfighter

Could be done a number of ways. I would use an image for the details banner with transparent background. Position it absolutely to place it in the corner(table should be positioned absolutely also so they stay together) and use z-index to place the banner in front.

need an example code?????

coothead · 11-18-2012, 07:09 PM

Hi there ebookz,

Quote:

...need an example code...

Check out the attachment to find it.

coothead

sunfighter · 11-18-2012, 09:22 PM

I had to do a reset. I copied your image and enlarged it width wise and then made the back ground transparent. The image is on photo bucket, but is not cleaned up. You can get is and work with it yourself.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New document</title>
<style type="text/css">
html, body, div, span {
	margin: 0;
	padding: 0;
	border: 0;
}
.first{
	width: 220px;
	text-align:right;
	padding-right: 15px;
}
.second{
	text-align:left;
	padding-left: 15px;
}
table{
	margin-top: 25px;
}
#banner{
	position: absolute;
	top: 13px;
}
#container{
	width: 712px;
	height: 400px;
	margin: auto;
}
</style>
</head>

<body>
<div id="container">
	<table width="700" border="1">
	<tr><td class="first">Admission Date</td><td class="second">July 20, 2012</td></tr>
	<tr><td class="first">Date of Birth</td><td class="second">July 20, 2007</td></tr>
	<tr><td class="first">Blood Group</td><td class="second"></td></tr>
	<tr><td class="first">Gender</td><td class="second">Male</td></tr>
	<tr><td class="first">Nationality</td><td class="second">India</td></tr>
	<tr><td class="first">Language</td><td class="second"></td></tr>
	<tr><td class="first">Catagory</td><td class="second">Hispanic</td></tr>
	<tr><td class="first">Religion</td><td class="second"></td></tr>
	<tr><td class="first">Address</td><td class="second"></td></tr>
	<tr><td class="first">City</td><td class="second"></td></tr>
	<tr><td class="first">State</td><td class="second"></td></tr>
	<tr><td class="first">PIN Code</td><td class="second"></td></tr>
	</table>
	<img id="banner" src="http://i815.photobucket.com/albums/zz74/sunfighter41/detail.png" border="0" alt="Photobucket"></a>
</div>
</body>
</html>

ebookz · 11-19-2012, 08:17 AM

Quote:

Originally Posted by coothead

Hi there ebookz,
Check out the attachment to find it.

coothead

wow fantastic code.... thanks so much frnd...u r a really great coder...keep it up ur gud work....

ebookz · 11-19-2012, 08:23 AM

Quote:

Originally Posted by sunfighter

I had to do a reset. I copied your image and enlarged it width wise and then made the back ground transparent. The image is on photo bucket, but is not cleaned up. You can get is and work with it yourself.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New document</title>
<style type="text/css">
html, body, div, span {
	margin: 0;
	padding: 0;
	border: 0;
}
.first{
	width: 220px;
	text-align:right;
	padding-right: 15px;
}
.second{
	text-align:left;
	padding-left: 15px;
}
table{
	margin-top: 25px;
}
#banner{
	position: absolute;
	top: 13px;
}
#container{
	width: 712px;
	height: 400px;
	margin: auto;
}
</style>
</head>

<body>
<div id="container">
	<table width="700" border="1">
	<tr><td class="first">Admission Date</td><td class="second">July 20, 2012</td></tr>
	<tr><td class="first">Date of Birth</td><td class="second">July 20, 2007</td></tr>
	<tr><td class="first">Blood Group</td><td class="second"></td></tr>
	<tr><td class="first">Gender</td><td class="second">Male</td></tr>
	<tr><td class="first">Nationality</td><td class="second">India</td></tr>
	<tr><td class="first">Language</td><td class="second"></td></tr>
	<tr><td class="first">Catagory</td><td class="second">Hispanic</td></tr>
	<tr><td class="first">Religion</td><td class="second"></td></tr>
	<tr><td class="first">Address</td><td class="second"></td></tr>
	<tr><td class="first">City</td><td class="second"></td></tr>
	<tr><td class="first">State</td><td class="second"></td></tr>
	<tr><td class="first">PIN Code</td><td class="second"></td></tr>
	</table>
	<img id="banner" src="http://i815.photobucket.com/albums/zz74/sunfighter41/detail.png" border="0" alt="Photobucket"></a>
</div>
</body>
</html>

thanks frnd..u all are doing great job in this forum.....keep it up...

coothead · 11-19-2012, 08:31 AM

No problem, you're very welcome.

coothead

sunfighter · 11-19-2012, 01:05 PM

Thank you