Hi,
Following is my code for a footer. I want the "twitter" image to be on the same horizontal line and to the right of the caption "Join Us on Facebook". In other words I want the twitter caption (followed by the line "Join the conversation today!") to be raised. The two ways I can do this is to use a negative margin-top or absolute positioning. Neither solution makes for a good fluid page and so I'm looking for something different. I wonder if anyone has a good solution. (Sorry, unable to upload images but dimensions are given in code.) All help will be greatly appreciated.
Following is my code for a footer. I want the "twitter" image to be on the same horizontal line and to the right of the caption "Join Us on Facebook". In other words I want the twitter caption (followed by the line "Join the conversation today!") to be raised. The two ways I can do this is to use a negative margin-top or absolute positioning. Neither solution makes for a good fluid page and so I'm looking for something different. I wonder if anyone has a good solution. (Sorry, unable to upload images but dimensions are given in code.) All help will be greatly appreciated.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<title>Test Page</title>
<style type="text/css">
h5, p {
margin:0;
padding:0
}
img { border:none }
a{color:#000;text-decoration:none}
a:hover { text-decoration: underline; }
body {
color:#000;
font-family:Verdana, Geneva, sans-serif;
}
#wrap {
min-width: 71.08em;
margin:auto;
overflow:hidden;
}
#footer
{ padding: 0.5em 0 2em 0.1em;
min-width: 71.08em;
border-top: 0.06em solid #000;
border-bottom: 0.06em solid #000;
background-color: #473C8B;
font-family: "Sans-serif", Arial;
color: #FFFFFF;
}
#footer h5
{ font-size: 1.06em;
letter-spacing: 0.07em;
margin: 0.5em 0 0.5em 0;
}
#footer p
{ font-size: 0.79em;
line-height: 150%;
word-spacing: 0.5em;
letter-spacing: 0.1em;
}
img.facebook
{ float: left;
margin-right: 0.8em;
}
a.facebook
{ color: #FFFFFF;
text-decoration: underline;
}
.List1, .List2
{ margin: 0.5em 0.5em;
height: 8.13em;
float: left;
border-right: 0.12em dotted;
list-style: none;
}
.List1
{ width: 15.88em;
}
.List2
{ width: 12.88em;
margin-right: 3em;
}
.List1 li.title, .List2 li.title
{ font-size: 1.02em;
font-weight: bold;
color: #FFFFFF;
margin-bottom: 0.5em;
}
.List1 li a, .List2 li a
{ font-family: arial, verdana, sans-serif;
font-size: 0.79em;
color: #FFFFFF;
letter-spacing: 0.1em;
}
div.img
{ padding-right: 0;
padding-bottom: 0;
width: auto;
float: right;
text-align: center;
}
div.img img
{ display: inline;
margin: 3px;
}
div.desc
{ text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
a.twitter, a.twitter:hover
{ color: #FFFFFF;
}
</style>
</head>
<body>
<div id="wrap">
<div id="footer">
<ul class="List1">
<li class="title">This is my special drctry<br></li>
<li><a href="#">Directory A</a></li>
<li><a href="#">Directory B</a></li>
<li><a href="#">Directory C</a></li>
<li><a href="#">Directory D</a></li>
<li><a href="#">Directory E</a></li>
</ul>
<ul class="List2">
<li class="title">More Info<br></li>
<li><a href="#">Add Your Site</a></li>
<li><a href="#">Advertise on our site</a></li>
<li><a href="#">Complaints</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<h1>Join Us on Facebook</h1>
<p>
<img src="facebook.png" alt="facebook" width="80" height="80" class="facebook">
Join us on <a class="facebook" href="#">Facebook</a> -
</br>you can meet us, write</br> reviews and join the</br>
discussion</p>
<div class="img">
<a target="_blank" href="#"><img src="twitter.png"
alt="twitter" width="80" height="16" /></a>
<div class="desc"><a class="twitter" href="#">
Join the conversation today!</a></div>
</div>
</div>
</div>
</body>
</html>