Originally Posted by
shuling
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>
Reply With Quote
Bookmarks