Footer Layout [Archive] - Dynamic Drive Forums

gemzilla

12-23-2013, 02:58 PM

The image below is the design for a footer, with links in top left, slogan top right, copyright bottom left and phone number bottom right. When I do this in html I can't get the objects on the bottom in the right place. I am trying to make a flexible screen so I don't want to be too specific with sizes.

5318

Below is the HTML and CSS I have done.

HTML

<div id="foot">

<div id="navigation">
<ul>
<li><a href="#">Home page</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Client access</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>

<div id="navigation">
<ul>
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
</ul>
</div>

<div id="navigation">
<ul>
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
</ul>
</div>

<div id="slogan">
Getting IT right for you and keeping you connected
</div>

<div id="copyright">
Website designed and developed by <a href="#">Kent Tec</a>
</div>

<div id="contact">
01843 232777
</div>

</div>

CSS

/*-------Footer------*/

#foot{
width:100%;
height: 200px;
overflow:hidden;
background-image:url(../images/footbg.jpg);
background-repeat:repeat-x;
}

/*--Links--*/

#navigation {
position:relative;
overflow:hidden;
width:150px;
height:auto;
float:left;
top:10px;
left:10px;
font-family:"Agency FB", Tahoma, Verdana, Arial;
font-size:16px;
}

#navigation ul {
width:100%;
height:auto;
margin:0;
padding:0;
list-style-type:none;
text-align:left;
}

#navigation ul li {
margin:0;
padding:0;
display:block;
height:30px;
line-height:25px;
}

#navigation ul li a {
text-decoration:none;
color:#000;
}

#navigation ul li a:hover {
color:#0033FF;
}

/*--Links--*/

#slogan {
float:right;
font-size:16px;
font-family:"Segoe Print", "MV Boli", "Lucida Calligraphy", "Freestyle Script", Script;
margin-top:10px;
width:500px;
text-align:right;
}

#copyright{
float:left;
font-family:"Agency FB", Tahoma, Verdana, Arial;
font-size:18px;
width:300px;
}

#contact {
float:right;
font-family:"Agency FB", Tahoma, Verdana, Arial;
font-size:24px;
color:#FFF;
width:200px;
text-align:right;
margin-top:125px;
}

/*-------Footer------*/

coothead

12-23-2013, 10:47 PM

Hi there gemzilla,

try it like this...

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>
#foot{
min-width:776px;
padding:10px;
overflow:hidden;
background-image:url(../images/footbg.jpg);
font-family:'agency fb',tahoma,verdana,arial,sans-serif;
}
.navigation {
overflow:hidden;
float:left;
margin:0 10px 10px 0;
padding:0 44px 0 0;
list-style-type:none;
font-size:16px;
}
.navigation li {
height:30px;
line-height:25px;
}
.navigation a {
text-decoration:none;
color:#000;
}
.navigation a:hover {
color:#fff;
}
#slogan {
float:right;
font-family:'segoe print','mv boli','lucida calligraphy','freestyle script',cursive;
font-size:16px;
}
#copyright {
clear:both;
float:left;
font-size:18px;
}
#copyright a {
color:#000;
}
#copyright a:hover {
color:#fff;
}
#contact {
float:right;
font-size:24px;
color:#fff;
}
</style>

</head>
<body>

<div id="foot">

<ul class="navigation">
<li><a href="#">Home page</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Client access</a></li>
<li><a href="#">Site Map</a></li>
</ul>
<ul class="navigation">
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
</ul>
<ul class="navigation">
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Service</a></li>
</ul>

<div id="slogan">Getting IT right for you and keeping you connected</div>

<div id="copyright">Website designed and developed by <a href="#">Kent Tec</a></div>

<div id="contact">01843 232777</div>

</div>

</body>
</html>

coothead