• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 560
  • Last Modified:

Add a table over an image

I have a table with three images, its codes are:

<tr>
          <td><a href="/"><IMG SRC="images/bannerlogo.jpg" alt="logo" width="250" height="57" border="0"></a></td>
          <td rowspan="2"><IMG SRC="images/bannermid.jpg" alt="Header" width="249" height="113"></td>
          <td rowspan="2"><img src="images/bannerright.jpg" alt="Header" width="250" height="113">        
          </td>
</tr>

Now I want to put a tiny table over the third image, that is images/bannerright.jpg, so I try to rewrite by using div tag:

<tr>
          <td><a href="/"><IMG SRC="images/bannerlogo.jpg" alt="logo" width="250" height="57" border="0"></a></td>
          <td rowspan="2"><IMG SRC="images/bannermid.jpg" alt="Header" width="249" height="113"></td>
          <td rowspan="2">
                  <div style="position:relative;">
                      <img src="images/bannerright.jpg" alt="Header" width="250" height="113">
                          <div style="width:200px; height:200px; position:absolute; top:10px; left:10px;">
                      <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                      </tr>            
                    </div>
            </div>          
          </td>

</tr>

but this totally distort the layout at all. What is the problem with my codes?
0
chcw
Asked:
chcw
  • 2
2 Solutions
 
Chris StanyonCommented:
You could try setting your third image as a background image and then including the table

<tr>
          <td><a href="/"><IMG SRC="images/bannerlogo.jpg" alt="logo" width="250" height="57" border="0"></a></td>
          <td rowspan="2"><IMG SRC="images/bannermid.jpg" alt="Header" width="249" height="113"></td>
          <td rowspan="2" style="background: url(images/bannerright.jpg) no-repeat left top;">      
           <table><tr><td><td>...</tr></table>
           </td>
</tr>
0
 
COBOLdinosaurCommented:
Your layout gets distorted for two reasons.  The code changes the dimensions, because the div adds line feeds and the extra tr adds line feeds.  Overall the dimension end up a mess.

However the big problem is you are doing layout with a 20th century technique using tables. Therefore you are limited to 20th century capabilities.  If you play with it and adjust enough you should be able to get a good 1999 look.  

Or you can get rid of the table and use a modern CSS3 approach.

if you post a link we may be able to help you do that.  

Cd&
0
 
chcwAuthor Commented:
Sorry but I don't know table is a out-date technology.

What I want to do is to add the social buttons, such as facebook like button, google + button, LinkedIn button over the images/bannerright.jpg. So I think create a table(one row and 3 columens) over the image and then add the buttons into the table is a convenient way.
0
 
chcwAuthor Commented:
My question is not accurate enough.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now