Add four social buttons over an image

Screenshot of what I want to doI 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 four social buttons over the third image, that is images/bannerright.jpg, so I try to rewrite by using div tag to add a small table(one row and four columns, each columns for a social button):

<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>
<td>&nbsp;</td>
</tr>
</div>
</div>
</td>

</tr>

but this totally distort the layout at all. What is the problem with my codes?

Attached screenshot is what I want to do.
LVL 8
chcwAsked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
Changing from tables to DIVs is the way to go. As has already been mentioned several times - tables for layout is a bad idea!

Having said that, if you need a quick fix, than as I suggested in a previous post - set the background image of the TD using CSS and then insert your icons as <img> tags.

<td style="background:url(images/bannerright.jpg) no-repeat left top;">
     <img src="facebook.jpg" alt="Facebook" class="icon" />
     ...
     <img src="twitter.jpg" alt="Twitter" class="icon" />
</td>

Open in new window

You can then style your icons using CSS

img.icon { width:40px; height:40px; display:block; float:left; margin-right: 10px; }
0
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
It's hard to tell the real problem.  Can you post the code for your entire table.  In this case, it looks like it is possible you have left something out in trying to make the code smaller. Or perhaps there is just real problems with the code.  

To start with, no need to wrap table rows with divs.  

Also, in this bit of code you have not closed a 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>

Open in new window


If you are going to use a table layout, simply make the very top row one giant cell and place your header image there.  It may be easier to make your main image a background image, then the smaller images can be made relative.

However, you would be better off simply ditching the tables and just using divs.

<style>
#container {
	width: 960px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	background-color: #969;
}
body {
	margin-top: 0px;
}
#header {
	background-color: #990;
	height: 250px;
}
#main {
	background-color: #0CF;
	min-height: 500px;
	
}
#nav {
	background-color: #333;
	height: 75px;
}
</style>
<div id="container">
  <div id="header">
        
  </div>
    <div id="nav">
        
  </div>

          <div id="main">
         </div>
</div>

Open in new window


or maybe html5
http://www.designzzz.com/website-layout-tutorial-html-5-css-3/
<!Doctype html>
<html lang="en">
<head>
<title>Your Page title</title>
</head>
<body>
<!-- Define Header -->
<header>
</header>
<!-- End Header -->
<!-- Define Navigation/Menu -->
<nav>
</nav>
<!-- End Navigation -->
<!-- Main content area -->
<section>
</section>
<!-- End of Main content area -->
<!-- Sidebar -->
<aside>
</aside>
<!-- End Sidebar -->
<!-- Footer -->
<footer></footer>
<!-- End of Footer -->
</body>
</html>
0
 
Julian HansenConnect With a Mentor Commented:
Tables are not really the way to do this.

Look at the attached example
t49.html
header.jpg
social-sprite.png
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.