Login | Register | FAQ
Anonymous

Strech image in table column

+ Post a reply

2 posts Page 1 of 1


Strech image in table column

by tqmd1 » Wed Nov 09, 2011 8:17 am

Dear Experts

I have following codes
Code: Select all
<html>
<head><h1>Image and data in table column</h1></head>

<style type="text/css">

.bg   {widht:100%;height:100%}
.al   {text-align:center;}


</style>

<body>

<table width="50%" height="100px" border="1" cellpadding='0' cellspacing="0">
   <tr>
      <td widht="25%" background="DREAM.JPG" tabindex="2" title="The Code Project"><h3 class="al">Hello</h3></td>      

      <td widht="25%" bgcolor=pink><h3>world</h3></td>
      
   </tr>
</table>

</body>
</html>


In column I want to stretch the image that is shown in attached file

Please help

Attachments

  1. DREAM3.JPG (20.19 KiB) Downloaded 4672 times

User avatar

tqmd1

  • Posts: 51
  • Joined: Fri Oct 28, 2011 11:05 am

Re: Strech image in table column

by atik » Wed Nov 09, 2011 5:22 pm

you can solve this problem by two method.
First, using background image as it is here but you need to re-size it by using image editor like photoshop as your desired level.
Second use the code bellow
Code: Select all

    <html><head></head><body><h1>Image and data in table column</h1>

    <style type="text/css">
* {
        padding: 0;
        margin: 0;
    }
    .bg   {widht:100%;height:100%}
    .al   {text-align:center;}
  img#image_dream {
  height: 98px;
  position: absolute;
  top: 38px;
  width: 200px;
}
    .first_td {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 200px;
}
    table, table tr, table tr td {
        overflow: hidden;
    }
    .first_td h3 {
  position: absolute;
  width: 100px;
  z-index: 500;
}
   
    </style>

   

    <table width="400px" height="100px" cellspacing="0" cellpadding="0" border="1" style="margin-left: 20px;">
       <tbody><tr style="">
           <td background="DREAM.JPG" title="The Code Project" tabindex="2" widht="200px" class="first_td"><h3 class="al">Hello</h3><img id="image_dream" src="DREAM.JPG"></td> 
          <td bgcolor="pink" widht="200px"><h3 style="margin-left: 74px;">world</h3></td>
       </tr>
    </tbody></table>
    </body>
</html>
User avatar

atik

  • Posts: 471
  • Joined: Mon Oct 17, 2011 4:55 pm


+ Post a reply

Page 1 of 1

cron