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

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.
0
chcw
Asked:
chcw
3 Solutions
 
Scott Fell, EE MVEDeveloperCommented:
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 HansenCommented:
Tables are not really the way to do this.

Look at the attached example
t49.html
header.jpg
social-sprite.png
0
 
Chris StanyonCommented:
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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