CodingForums.com - how to set an image as a table right corner

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - how to set an image as a table right corner (http://www.codingforums.com/showthread.php?t=282482)

how to set an image as a table right corner

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:

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.

Quote:

Originally Posted by sunfighter (Post 1292941)

need an example code?????

Hi there ebookz,

Quote:

...need an example code...

Check out the attachment to find it. ;)

coothead

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>

Quote:

Originally Posted by coothead (Post 1293027)

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:

Quote:

Originally Posted by sunfighter (Post 1293037)

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

No problem, you're very welcome. ;)

coothead