Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    33
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Smile 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 :

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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,601
    Thanks
    24
    Thanked 646 Times in 645 Posts
    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.

  • Users who have thanked sunfighter for this post:

    ebookz (11-18-2012)

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    33
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    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?????

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there ebookz,

    ...need an example code...
    Check out the attachment to find it.


    coothead
    Attached Files Attached Files

  • Users who have thanked coothead for this post:

    ebookz (11-19-2012)

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,601
    Thanks
    24
    Thanked 646 Times in 645 Posts
    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>

  • Users who have thanked sunfighter for this post:

    ebookz (11-19-2012)

  • #6
    New Coder
    Join Date
    Nov 2012
    Posts
    33
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by coothead View Post
    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....
    Last edited by ebookz; 11-19-2012 at 09:24 AM.

  • #7
    New Coder
    Join Date
    Nov 2012
    Posts
    33
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Thumbs up thanks

    Quote Originally Posted by sunfighter View Post
    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...

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts

    No problem, you're very welcome.


    coothead

  • #9
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,601
    Thanks
    24
    Thanked 646 Times in 645 Posts
    Thank you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •