I am currently doing the Bubble Under website from the book, my index page has the footer: <footer>Copyright 2011. All rights reserved. Site maintained by bob@bubbleunder.com</footer> displayed to the far left, just above the H1. All other pages display fine.
How do I fix this issue? I even put red borders around all elements to see the layout but, the footer was not attached to anything. Here is an image—
Hi, Deko_, welcome to the forums.
Your image/s are hidden until they have been approved… approval time varies.
While an image is sometimes helpful, a working page with a basic copy of the code that demonstrates the problem is ideal.
We routinely ask posters to read the Forum Posting Basics and post a working copy of the code that is causing the problem.
Thanks.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bubble Under— The diving club for the south-west UK</title>
<meta charset="utf-8"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/➥
html5.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Candal'
rel='stylesheet' type='text/css'>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header>
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Diving club for the south-west UK— Lets make a better splash!</p>
</div>
</header>
<div id="navigation">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="events.html">Club Events</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="gallery.html">Image Gallery</a></li>
</ul>
</nav>
</div> <!-- end of navigation div -->
<div id="bodycontent">
<h2>Welcome to our super-dooper Scuba site</h2>
<div class="aside">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBubble-Under%2F156732361048951%3Fsk%3Dwall&width=200&colorscheme=light&show_faces=true&stream=true&header=true&height=250" scrolling="no" frameborder="0" style="border:none;overflow:hidden; width:200px; height:250px;" allowTransparency="true"></iframe>
<a id="twitImageLink" href="http://www.twitter.com/bubbleunderclub">
<img src="http://twitter-badges.s3.amazonaws.com/follow_me-a.png"
alt="Follow bubbleunderclub on Twitter"/></a>
</div>
<img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills" id="homeImage" />
<p>Glad you could drop in and share some air with us! You've passed
your underwater navigation skills and successfully found your way to
the start point — or in this case, our home page.</p>
<p>All details of the group's diving activities, trips, and so on
will be available from the various pages on this site but, in
addition, we've got a Facebook page! If you're on Facebook, please
do check it out. All the updates we post on Facebook will also
appear here in this little box here on the right (so even if you're
not a Facebook fan, you can see our latest updates).</p>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 200,
height: 300,
theme: {
shell: {
background: '#061e52',
color: '#ffffff'
},
tweets: {
background: '#000084',
color: '#ffffff',
links: '#b8e6e1'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('bubbleunderclub').start();
</script>
</div>
<footer>Copyright 2011. All rights reserved. Site maintained by bob@bubbleunder.com</footer>
</div><!-- end of bodycontent -->
</body>
</html>
CSS (work in progress):
/*
CSS for Bubble Under site
*/
body {
font-family: Verndana, Helvetica, Arial, san-serif;
background-color: #e2edff;
line-height: 125%;
padding: 0;
margin: 0;
}
li {
font-size: small;
list-style-type: none;
}
p {
font-size: small;
color: navy;
}
#tagline p {
font-style: italic;
font-family: Georgia,Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
background: #bed8f3 url(backgrounds/tagline-fade.jpg) repeat-y
right;
}
em {
text-transform: uppercase;
}
h1, h2, h3 {
font-family: "Trebuchet MS", Helvetica,Arial, san-serif;
}
h1 {
font-size: x-large;
background-color: navy;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
background: navy url(backgrounds/header-bg.jpg) repeat-y right;
}
h2 {
color: navy;
font-size: 130%;
font-weight: normal;
padding-top: 15px;
font-family: 'Candal", arial, serif;
font-size:2em;
line-height:1;
}
h2, ul {
margin-top: 15px;
}
a {
font-weight: bold;
}
a: link {
color: black;
}
a: visited {
color: navy;
}
a: hover {
text-decoration: none;
color: white;
background-color: navy;
}
a: active {
color: aqua;
background-color: navy;
}
.fun {
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}
blockquote.fun {
font-style: italic;
}
nav a {
text-shadow:1px 2px 2px white, -1px -1px 2px white;
text-decoration: none;
}
nav a:hover, nav a:focus {
text-shadow: none;
}
nav {
width: 180px;
height: 484px;
background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
display: block;
/* Only for IE8 or less*/
}
nav ul {
margin:0;
padding-top: 15px;
}
header {
border-top: 3px solid #7da5d8;
display: block;
/* Only for IE8 or less */
}
img {
/* border: 15px solid white; */
border: 2px solid gray;
border-top-right-radius: 20px;
border-bottom-left-radius:20px;
}
.photocredit {
font-weight: normal;
color: gray;
}
figure {
display:block;
padding-bottom: 10px;
border-bottom: 1px solid navy;
margin-bottom: 20px;
}
figcaption {
display:block;
font-size: 65%;
font-weight: bold;
margin-top: 0;
width: 430px;
line-height: 1.4em;
}
figcaption span {
font-weight: normal;
color: gray;
}
figure img {
border: 15px solid white;
border-radius: 10px;
box-shadow: 10px 10px 20px black;
margin-bottom: 10px; /* added just to give the shadow some breathing space */
}
.galleryphoto {
padding-bottom: 20px;
border-bottom: 1px solid navy;
margin-bottom: 10px;
}
table.events {
border-collapse: collapse;
}
table.events th, table.events td {
padding: 4px;
border: 1px solid #000066;
}
table.events th {
font-size: x-small;
text-align: left;
background: #241374 url(backgrounds/header-bg.jpg);
color: #ffffff;
padding-top: 0;
padding-bottom: 0;
padding-left: 2px;
padding-right: 2px;
}
table.events td {
font-size: small;
background: #e2edff url(backgrounds/td.jpg) repeat-x top;
}
table.events caption {
color: #000066;
font-size: small;
text-align: left;
padding-bottom: 5px;
font-weight: bold;
}
form.contact feildset {
border: 2px solid navy;
padding: 10px;
}
form.contact legend {
font-weight: bold;
font-size: small;
color: navy;
padding: 5px;
}
form.contact fieldset {
border: 2px solid navy;
padding: 10px;
}
form.contact legend {
font-weight: bold;
font-size: small;
color: navy;
padding: 5px;
}
form.contact {
padding: 0;
margin: 0;
margin-top: -15px;
line-height: 150%
}
form.contact label {
font-weight: bold;
font-size: small;
color: blue;
}
form.contact label.fixedwidth {
display: block;
width: 240px;
float: left;
}
form.contact .buttonarea input {
background: navy;
color: white;
font-weight: bold;
padding: 5px;
border: 1px solid white;
}
form.contact .buttonarea {
text-align: center;
padding: 4px;
background-color: #0066ff;
}
#twitImageLink img {
border: none;
display: block;
margin: 15px 0;
}
#homeImage {
float:left;
margin:0 10px 10px 0;
}
/*
This section deals with the position of items on the screen.
It deals with absolute positioning - fixed x and y coordinates measured
from the top-left corner of the browser's content display.
*/
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 6.6em;
}
#bodycontent {
left: 200px;
}
#header {
width: 100%;
}
.aside {
float: right;
margin: 10px;
width: 200px
}
aside {
border:2px solid gray;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
}
aside {
display: block;
float: right;
margin: 10px;
padding: 10px;
width: 30%;
background: white;
font-style: italic;
color: gray;
}
aside blockquote {
font-size: 1.2em;
line-height: 1.4;
margin: 0 0 0.5em 0;
font-style: normal;
color: #006;
}
Hope that helps in finding the issue, Thanks!
Hi,
You didn’t mention which book you were following although it doesn’t really matter as not all members will have all the sitepoint books anyway.
You also didn’t say where you wanted the copyright message to appear only that it was in the wrong place 
Presently you are using absolute positioning for the left column and the main centre column so it is not possible to place a footer under both columns as absolute elements are removed from the flow and you cannot feasibly account for them.
You can place a footer after the content in the centre column or after the content in the left column but you will be unable to place the footer spanning the bottom of both columns.
In your page you have an error anyway as this code is not correct.
</script>
</div>
<footer>Copyright 2011. All rights reserved. Site maintained by bob@bubbleunder.com</footer>
[B]</div>
<!-- end of bodycontent -->
[/B]</body>
</html>
The last closing div is listed as the end of bodycontent but in fact that last closing div is a superfluous closing div as body content actually ends here.
</script>
[B]</div>
[/B]<footer>Copyright 2011. All rights reserved. Site maintained by bob@bubbleunder.com</footer>
That means that the footer is outside of bodycontent and thus slides up to the top of the page where the flow of the document actually is (after the header). If you move the footer inside bodycontent and set it to clear the float in that section then it will remain under the content in that middle section. It still will not be at the bottom of the page though.
Using absolute positioning for left and right columns is fine as long as you understand you can never have a footer or anything spanning both columns. I would however never ever use that method as it is too restrictive and you never know that down the line how the page will evolve and what you may want to add. The columns should have been constructed using a mixture of floats and static content with margins so that you can have a footer under both columns by just clearing the floats and putting everything back in the flow.
In my opinion the single most important aspect of css is maintaining the flow of the document in a natural manner and avoiding creating islands of content with absolute positioning that cannot react to content from its neighbours.
Lastly is is not a good idea to give your left column a fixed pixel height as you will never jn ow how much content some pages may have and indeed a user resizing their text will break out of your fixed pixel height left column. Let the content dictate the height and not some measurement that you think looks good :).
If you actually want a footer under both columns then you will need to change to a floated layout but you suggest that other pages are fine so I’m assuming you want the copyright inside the main column. If you need help changing to a floated layout then just shout and we’ll see what we can do.
Oh, the book I am following is Build Your Own Website The Right Way Using HTML & CSS, 3rd Edition Thats all it took was to move the footer out of the div, Thanks for the help!
I am also interested in this " floated layout" that you are talking about, sounds like the way to go for layouts. Wouldn’t mind a go at it.