SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi shuling. Welcome to the forums.

    The first question to be asking here is why you are using tables for this? Tables are not the right tool for page layouts like this. If you post a screen shot fo what you are aiming for, we could suggest better ways to do this.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you.

    I just want 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.



    Quote Originally Posted by ralph.m View Post
    Hi shuling. Welcome to the forums.

    The first question to be asking here is why you are using tables for this? Tables are not the right tool for page layouts like this. If you post a screen shot fo what you are aiming for, we could suggest better ways to do this.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Tables are not the right tool for layout any more. As I say, post a screen shot and we'll suggest a better way. I would create a div with a background image, and in that div have a simple list of links. Much easier and better code.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure. Please see the attached image. Originally we have three images tiled as images/bannerlogo.jpg, images/bannermid.jpg and images/bannerright.jpg, now we want to add four social buttons over the bannerright.jpg. So I want to use div and put a small table(one row and four columns) over it.

    socialbuttons.jpg

    Quote Originally Posted by ralph.m View Post
    Tables are not the right tool for layout any more. As I say, post a screen shot and we'll suggest a better way. I would create a div with a background image, and in that div have a simple list of links. Much easier and better code.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by shuling View Post
    put a small table(one row and four columns) over it.
    You are still locked into table mode, though. Tables have no place in any of this.

    Firstly, have one container div for that whole section, and put one background image on it, rather than three separate images.

    Then one option is to give that container position: relative. Then place the social buttons into an unordered list. Give that UL position: absolute, and place it in the bottom right corner of the container. Float the LIs so that they sit horizontally. That's a much neater and simpler way to do this layout.

    Here's a simple example:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <title>header</title>
    	
    <style media="all">
    .header {width: 900px; height: 200px; background: #e7e7e7 url(bgimage.jpg); margin: 0 auto; position: relative;}
    .header ul {list-style: none; position: absolute; right: 20px; bottom: 10px; margin: 0;}
    .header li {float: left; margin-left: 20px;}
    </style>
    	
    </head>
    <body>
    
    <div class="header">
    	<ul>
    		<li><a href=""><img src="" width="40" height="40"></a></li>
    		<li><a href=""><img src="" width="40" height="40"></a></li>
    		<li><a href=""><img src="" width="40" height="40"></a></li>
    		<li><a href=""><img src="" width="40" height="40"></a></li>
    	</ul>
    </div>
    
    </body>
    </html>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

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