?
Solved

Why will my footer not line up with the rest of the webpage

Posted on 2012-09-20
7
Medium Priority
?
319 Views
Last Modified: 2012-09-20
I am very new to coding but i am trying to learn html and css.

I am in the process of converting a website mockup into html/css.

I am having problems aligning my footer. It is appearing to the left of where I want it to be. I have attached my html/css code.

I though that as I have placed the footer within the wrapper it should sit directly under that.

Can anyone advice me please

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen">
</head>

<body>
<div id="wrapper">
  <div id="header"><img src="images/header.png" width="726" height="218" alt="Cutie Cutz Dog Grooming"></div>
<div id="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES & PRODUCTS</a></li>
<li><a href="#">COAT CARE</a></li>
<li><a href="#">PRICE GUIDE</a></li>
<li><a href="#">RAINBOW BRIDGE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div id="contentwrapper">
<div id="slideshow"><img src="images/slideshow.png" width="474" height="244" alt="dogs slideshow"></div>
<div id="welcome"><img src="images/welcome.png" width="236" height="244" alt="welcome"></div>

</div>
<div id="dogleft"></div>
<div id="message"></div>
<div id="footer"><img src="images/footer.png" width="1024" height="168" alt="footer"></div>
</div>
</body>
</html>

Open in new window


body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	margin: 0px;
	padding: 0px;
	line-height: 1.5em;
	background-repeat: no-repeat;
}
#wrapper {
	background-image: url(../images/background.png);
	background-position: center top;
	margin-right: auto;
	margin-left: auto;
	background-repeat: no-repeat;
	width: 1200px;
}
#header {
	margin: 0px 0px 0px 250px;
	position: relative;
	top: 5px;
}
#nav {
	background-repeat: repeat;
	background-position: left;
	margin: 0px 0px 0px 250px;
}
#nav ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#nav li	{
	float: left;
	background-repeat: repeat;
	background-image: url(../images/nav_background.png);
	margin-right: 1px;
	margin-left: 1px;
	padding: 12px 14px 8px;
}
#nav a:link,#nav a:visited{
	text-decoration: none;
	color: #8946b8;
	font-weight: bold;
}
#nav a:hover{
	color: #FFF;
	background-color: #fb73ed;
	padding: 12px 14px 8px;
	margin-right: 1px;
	margin-left: 1px;
}
#contentwrapper {
	clear: left;
}

#slideshow {
	float: left;
	margin-right: 0px;
	margin-top: 20px;
	margin-left: 250px;
}
#welcome {
	float: right;
	margin-top: 20px;
	margin-right: 220px;
}


#dogleft {
	float: left;
	position: relative;
	margin-left: 88px;

}


#message {
	float: left;
}
#dogright {
	position: relative;
	float: right;
	right: 175px;
}

#footer {
	
}

Open in new window

0
Comment
Question by:roy_batty
7 Comments
 
LVL 19

Expert Comment

by:Ken Butters
ID: 38417990
Looks like footer is displaying bottom center.

Attached a snapshot of what I see.

Note: I don't have your images... so image just shows placeholders.
Image.jpg
0
 
LVL 3

Expert Comment

by:Oliver Wastell
ID: 38418003
I've just been playing around with something similar and used the following:
http://www.beginnersguidetohtml.com/guides/css/layout/controlling-layout

Try the following in your CSS file:

#footer {
      clear: both;
}
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 800 total points
ID: 38418050
You wrapper is 1200px and your footer 1024px.
Either change your footer width or add to the footer css
margin:0 auto;
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:Oliver Wastell
ID: 38418067
Here is the html for my website that I am working on (the url for the site is in the navigation element - the first indent):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Access Intelligent Services Limited - Bespoke Software Solutions - Nottingham</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Bespoke Software Nottingham, Database Consultancy, Database Development, Microsoft Access Development">
<META name="robots" content="all,follow,deep">
<META name="language" content="en">
<LINK rel="shortcut icon" href="http://www.access-database-solutions.co.uk/image/favourite.ico" type="image/ico">
<META name="description" content="We provide bespoke software solutions tailor made to meet the data management needs of your business.  A well designed software solution will improve the efficiency of your business processes saving your business both time and money.">
<LINK rel="stylesheet" type="text/css" media="screen" href="http://www.access-database-solutions.co.uk/css/aisStyle.css">
</head><body>
<div id="container">
<div id="header"></div><!--MAIN NAVIGATION START-->
<div id="navPrimary">
	<div class="cssnav"><a href="index.php"><img src="http://www.access-database-solutions.co.uk/images/buttonUp.gif" alt="HOME" /><span>HOME</span></a></div> 
	<div class="cssnav"><a href="databaseDevelopment.php"><img src="http://www.access-database-solutions.co.uk/images/buttonUp.gif" alt="DEVELOPMENT" /><span>DEVELOPMENT</span></a></div> 
	<div class="cssnav"><a href="contactAIS.php"><img src="http://www.access-database-solutions.co.uk/images/buttonUp.gif" alt="CONTACT US" /><span>CONTACT US</span></a></div> 
</div>
<!--MAIN NAVIGATION END-->  <DIV id="NavLeft">
  </DIV>
<!-- keyword comment-->
<div id="navSecondary"></div>
<div id="contentMain">
<h2>Access Intelligent Services</h2>
<h3>Bespoke Software Solutions and Database Development</h3>
<p>We provide bespoke software solutions tailor made to meet the data management needs of your business.</p>
<p>A well designed software solution will improve the efficiency of your business processes saving your business both time and money.</p>
<p>If you are not sure what a bespoke software solution could do for you or your business, Access Intelligent Services will happily offer a <strong>free review</strong> of your existing business systems and processes to identify opportunities to enhance the efficiency of your business through either improvements to your existing systems or through the implementation of a bespoke software solution.</p>
<p>So if your business is looking to reduce paperwork, improve accessibility to information when you need it and increase capacity, then <a href="contactAIS.php">contact us</a> to discuss your specific software requirements.</p>
<p>If you are not sure what you need, but have the feeling that there must be a better way of managing the data in your business, we’ll be happy to show you possible alternatives during a <strong>free consultation</strong>.  If you are new to database driven software solutions, you will be amazed at what is possible and the positive impact it could have on your business.</p>
</div>
<div id="contentRight"></div>

<!--FOOTER START-->
<div id="footer"><div id= "copyright">&copy;Access Intelligent Services Limited 2012</div></div>
<!--FOOTER END-->

</div>
</body>
</html>

Open in new window

and here is the css:
/* LAYOUT */
body {
	text-align: center;
	font-size: 85%;
	color:#222;
	background:#eee;
	font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	border: none;
	background-image: url('http://www.access-database-solutions.co.uk/images/wrapper.png');
	background-repeat: repeat-x;
	background-attachment: fixed;
	background-position: top left;
}
#container {
	width: 960px;
	margin: 0 auto;
	text-align: left;
	border: none;
	background:#fff;
}
#header {
	background-image:url("http://www.access-database-solutions.co.uk/images/headerimg.png");
	height:230px;
}
#navPrimary {
	background-image:url("http://www.access-database-solutions.co.uk/images/navPrimary.png");	
	height:42px;
}
#navSecondary {
	float: left;
	width: 192px;
	height:300px;
}
#contentMain {
	float: left;
	width: 576px;
}
#contentRight {
	float: left;
	width: 192px;
}
#footer {
	clear: both;
	background-image:url("http://www.access-database-solutions.co.uk/images/footer.png");
	height:25px;
}
#copyright {
	float:left;
	font-size: 0.8em;
	font-weight: bold;
	margin-top:0.5em;
	margin-bottom:0;
	margin-right:0;
	margin-left:0.5em;
	padding:0;
}

/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
a:focus, a:hover {color:#000;}
a {color:#009;text-decoration:underline;}
blockquote {margin:1.5em;color:#666;font-style:italic;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
li ul, li ol {margin:0 1.5em;}
ul, ol {margin:0 1.5em 1.5em 1.5em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;}
thead th {background:#c3d9ff;}
th, td, caption {padding:4px 10px 4px 5px;}
tr.even td {background:#e5ecf9;}
tfoot {font-style:italic;}
caption {background:#eee;}
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide {display:none;}
.quiet {color:#666;}
.loud {color:#000;}
.highlight {background:#ff0;}
.added {background:#060;color:#fff;}
.removed {background:#900;color:#fff;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0;padding-right:0;}
.top {margin-top:0;padding-top:0;}
.bottom {margin-bottom:0;padding-bottom:0;}

/* NAVIGATION BUTTONS */
.cssnav
{
position: relative;
float: left;
font-family: arial, helvetica, sans-serif;
background: url(images/buttonDown.gif) no-repeat;
white-space: nowrap;
display: block;
width: 120px;
height: 27px;
margin: 0;
padding: 0;
overflow:hidden;/* for ie to hide extra height*/
}

.cssnav a
{
display: block;
color: #ffffff;
font-size: 11px;
width: 120px;
height: 27px;
float: left;
text-decoration: none;
font-weight: bold;
overflow:hidden;/* for ie to hide extra height*/
}

.cssnav a:hover {
color: #000000;
}

.cssnav img
{
width: 120px;
height: 27px;
border: 0
}

* html a:hover
{
visibility:visible
}

.cssnav a:hover img
{
visibility:hidden
}

.cssnav span
{
position: absolute;
left: 0;
top: 6px;
text-align: center;
width: 120px;
cursor: pointer;
} 
/* END OF NAVIGATION */

Open in new window

0
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 1200 total points
ID: 38418391
Your almost there. Your footer is in the right place, and is the full width. It's just the content (the image) that's not. If you add a background-color to your footer div you'll see what I mean. Either change the size of the image to match the footer (1200px), or set your #footer to text-align:center - depending on what else you intend to do with it.

You should also add clear:both to the #footer, and probably add overflow:hidden to the
#contentwrapper

Otherwise - good job - nice, clean, structured code.

Little piece of advice - seeing as though you're using an HTML5 DOCTYPE, why not use the HTML5 Elements instead of the DIVs - <header>, <nav>, <footer> etc. :)

<div id="wrapper">
   <header>
      <img src="images/header.png" width="726" height="218" alt="Cutie Cutz Dog Grooming">
   </header>
   <nav>
      <ul>
         <li><a href="#">HOME</a></li>
         <li><a href="#">ABOUT US</a></li>
         <li><a href="#">SERVICES & PRODUCTS</a></li>
         <li><a href="#">COAT CARE</a></li>
         <li><a href="#">PRICE GUIDE</a></li>
         <li><a href="#">RAINBOW BRIDGE</a></li>
         <li><a href="#">CONTACT</a></li>
      </ul>
   </nav>
...
   <footer>
      This is your footer
   </footer>

Open in new window

Then just style them as a normal element:

header { margin: 0px 0px 0px 250px; position: relative; top: 5px; }
nav { background-repeat: repeat; background-position: left; margin: 0px 0px 0px 250px; }

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 38418409
Remove the float from copyright and add text-align:center
0
 
LVL 1

Author Closing Comment

by:roy_batty
ID: 38418470
Doh! I must have selected the wrong image when I inserted the footer. I have been messing around trying to get this working all week. Its my first attempt at converting a design provided to me in .psd to html/css.  Next job is to convert it for use as a joomla template.

I have been learning html/css on codeacademy. I feel fairly comfortable working directly on the code now whilst using dreamweaver. Its great to hear that I am coding cleanly though. I wasn't sure myself.  I real confidence boost.
Thanks. :)
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question