Hi I am new to this forum.
My question is that the footer of my website has a pretty complex layout that I can’t figure out.
I provide a JPG of the layout and the html and CSS so you can understand what I mean.
Thanks very much,
It would be great if someone helps me with this,
Camaalot
We have had a couple of threads recently looking at footers - have you had a look at those to see if they answer your question? Especially seeing as you haven’t actually asked a question that we can answer yet…
Looking at your drawing you could do something roughly like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="../Scripts/CSS/footer2.css" />
<style type="text/css">
#footer_main {
width: 940px;
margin: auto;
border: 1px solid #666;
background:#eaeaea url(../../_Images/footer-border.png) no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
padding:10px;
overflow:hidden;/* clear floats*/
text-align:left;
}
#footer_main h4 {
width: 450px;
text-indent: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #333;
margin:0;
}
.recommend {
float: left;
width: 450px;
overflow:hidden;
}
#footer_main ul {
width: 450px;
font-size: 14px;
border-bottom: 1px solid #333;
list-style:none;
margin:0;
padding:0 0 5px;
}
#footer_main li {
display:inline
}
#footer_main li strong, #footer_main li a {
display:inline-block;
width:200px;
text-decoration:none;
color:#000;
padding:20px 5px 5px;
border-top:1px solid #333;
}
#footer_main li.first strong, #footer_main li.first a {
border-top:none
}
#footer_main li strong {
margin-right:30px;
text-align:right;
}
#footer_main li a {
margin-right:-10px
}
#footer_main .contact {
float: right;
width: 450px;
text-indent: 5px;
}
fieldset, form, legend {
border:none;
margin:0;
padding:0;
}
#footer_main legend b,
#footer_main legend{
position:absolute;
left:-999em;
top:-999em
}
#footer_main label {
display:inline-block;
width:150px;
padding:5px 10px 5px 0;
text-align:right;
}
#footer_main input {
width:200px;
}
.contact form {
padding:1px 0 15px;
border:1px solid #666;
margin:15px 0 5px;
}
</style>
</head>
<body>
<div id="footer_main">
<div class="recommend">
<h4>We recommend you : </h4>
<ul>
<li class="first"><strong>Affiliates websites :</strong> <a href="#">www.affiliates.com</a></li>
<li><strong>sponsors websites :</strong> <a href="#">www.sponsors.com</a></li>
<li><strong>Affiliates websites :</strong> <a href="#">www.interest.com</a></li>
</ul>
</div>
<div class="contact">
<h4>Contact Us :</h4>
<form id="form1" name="form1" method="post" action="">
<fieldset>
<legend><b>Contact Form details</b></legend>
<br />
<label for="name">Name :</label>
<input type="text" name="name" id="name" />
<br />
<label for="address">Address :</label>
<input type="text" name="address" id="address" />
<br />
</fieldset>
</form>
</div>
</div>
</body>
</html>
Can you just post the code here? That’ll be faster then us waiting for the stuff to be approved 
Also, a link to the site would be best because we can just copy the code/images
Hi,
I am sorry for not replying, I was busy trying to solve my own problem.
And, here it is. I succeeded i making this footer working.
You can go to this address if you want to take a look : http://www.ageac.ca/_Fr/index_fr.html.
What I did is this:
First : I wanted two separate columns. “NOUS VOUS RECOMMANDONS” and ÉCRIVEZ-NOUS. That was easy enough. Two <div> floating left.
To be sure that these columns will keep same aspect and distance in every browsers, I inserted another <div> in between called spacer.
Second : The most complicated part was to create 3 columns and 6 rows under the “NOUS VOUS RECOMMANDONS” column.
Even if I tried to float the <div>, they would always fall underneath one another, making the “table” crappy.
Actually, I repeated what I did above :Two <div> floating left with a spacer <div> in between.
I hope I am clear enough. I am not to good at explaining stuff like this. But I’m sure that if you look at the HTML and CSS, you’ll understand.
I know I have yet to organize the styling much better, t5hat is coming pretty soon.
Thank you guys trying to help me, trying to figure out what I meant, even though my question was lousy. tup:
Thank you again.
Camaalot
P.S. I’ll try next time to write a real question.:
Your footer looks quite different depending on which browser I view it in. Also, there are a few validation errors. Maybe you should give Paul’s suggestion a try.
Hi,
I’ve tested the footer on the latest versions of IE, Fx, Chrome, Opera and Safari and it works great. What version did you view it with so I can fix the problems.
Also, I’m pretty sure that there’s bugs if you view it with IE6. But the question is : Is it worth paying attention to IE6 anymore ? Some say that it is a lost cause, so !
Concerning validation errors, what are Paul’s suggestions and how can I use them.
By the way I’ve been on W3c site and the validator found nothing.
Thanks
Camaalot
Hi again.
Forget about Paul’s suggestions. I found them up a few threads.
camaalot
Hey Paul,
I owe you many thanks, I’ve never thought of using unordered lists. It makes things much simpler.
I’ll get back to you soon.
Thanks again,:tup:
camaalot
Hi again,
I been working on Paul’s style.
There’s a problem : what if there’s more than one link ? The <ul>, doesn’t work.
Camaalot