...

View Full Version : how to set an image as a table right corner



ebookz
11-18-2012, 04: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 :
http://i.imgur.com/Ws74Q.png
In this example u can see a "Details" image set to table right corner...
thanks in advanced..:thumbsup::thumbsup:

sunfighter
11-18-2012, 05: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, 01:45 PM
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, 08:09 PM
Hi there ebookz,


...need an example code...

Check out the attachment to find it. ;)


coothead

sunfighter
11-18-2012, 10: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.



<!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, 09:17 AM
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....:thumbsup::thumbsup::thumbsup::thumbsup:

ebookz
11-19-2012, 09:23 AM
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.



<!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...:thumbsup::thumbsup:

coothead
11-19-2012, 09:31 AM
No problem, you're very welcome. ;)



coothead

sunfighter
11-19-2012, 02:05 PM
Thank you



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum