Add four social buttons over an image

My question is attached as question.jpg since dp does not permit me to add HTML codes. The screenshot of what I want is also attached as socialbuttons.jpg. Thanks

 

1) STOP using tables for layout, this isn't 1997.

2) change that design to something that can actually be fluid or semi-fluid in width -- something having three fixed sized images cannot do.

3) So far all I see are presentational images, which means NONE of them have any business in your markup as IMG tags.

4) I fail to see any attempt at using HTML tags PROPERLY in terms of semantics.

5) Since it's a list of social icons, I'd put them in UL/LI, float the UL right, and use a negative top margin to ride them up over the h1 and it's background since...

6) as a H1 is the heading underwhich all sections of the page are subsections, the logical choice (no matter what some of the re-re ***tards out there will try to tell you) for the h1 is the banner image -- which should PROBABLY be built using gilder-levin or some other form of gracefully degrading image replacement method.

Your markup is decade and a half out of date trash, that wasn't even the proper way of doing things THEN. You need to throw it out and start over -- likewise if you are going to care about accessibility, and try to add later the modern concept of responsive layout, your images are NOT conducive to doing so.

Your HTML should probably look something more like this:

<!--
	Empty spans are image replacement sandbags, do not remove
-->

<div id="top" class="widthWrapper">

	<h1>
		Site Title
		<small>TagLine</small>
		<span></span>
	</h1>

	<form action="#" method="get" id="search">
		<fieldset>
			<label for="searchTerm">Site Search</label>
			<input type="text" name="q" id="searchTerm />
			<input type="image" src="images/submit.png" alt="submit" />
		</fieldset>
	</form>

	<ul id="socialLinks">
		<li class="facebook">
			<a href="#">Facebook<span></span></a>
		</li>
		<li class="twitter">
			<a href="#">Twitter<span></span></a>
		</li>
		<li class="googlePlus">
			<a href="#">Google+<span></span></a>
		</li>
			<li class="linkedIn">
			<a href="#">LinkedIn<span></span></a>
		</li>
	</ul>

Code (markup):

EVERYTHING else being done there belongs in the CSS... assuming it should be done at all given that what I'm seeing of the design is already treading into "not viable for web deployment" concepts, likely caused by "But I can do it in photoshop" nonsense.