PDA

View Full Version : Position for center and footer - can't get it right.



utboatfanatic
Nov 18th, 2006, 03:19 PM
I've got two CSS books open in front of me and I still can't understand what I am doing wrong. Two problems with this: in IE, the footers go to the bottom of the page but the entire page is on the left side. I thought I was setting my container up to center when my browser is wide. In Firefox, my footers just won't seem to go to the bottom of the page.. I've read multiple posts saying Firefox is doing it right, so obviously I am doing it wrong...

Also, for the navigation, content and rightads, is this the most logical way to lay out what amounts to three columns? At this point, I am SO tempted to just put a stupid table back in!!

_Aerospace_Eng_
Nov 18th, 2006, 04:05 PM
Look up clearing floats in your book. If you can't find that then those books aren't that great. This line here

<?xml version="1.0" encoding="iso-8859-1"?>
is putting IE into quirks mode causing it not to center the layout, get rid of it.

Add this before your div with class="bottomgoogle"

<div class="clearfoot">&nbsp;</div>
then try this for your CSS

/* Master Style Sheet for Redrock Outdoors */
/* Created by Applied Integration Inc. */
/* www.appliedintegratation.net */
/* Colors used: */
/* FFFFFF = White */
/* 787465 = Dark Grey */
/* 303030 = Real Dark Grey - Almost Black */
/* 603913 = Dark Brown */
/* 754C24 = Brown */
/* 8C6239 = Mid Brown */
/* A67C52 = Mid Light Brown */
/* C69C6D = Light Brown */
/* Set basic body and form properties */
/* Sets background to white and zero margins */
* {
margin:0;
padding:0;
}

html, body {
background:#FFF;
font:11px/14px tahoma, arial, helvetica, sans-serif;
color:#787465;
height:100%;
}

/* Set the colors and text options for links */
/* Regular link is dark brown */
/* Visited link is light brown */
/* Hover is mid brown */
/* Active is dark brown no underline */
a:link {
color:#603913;
text-decoration:underline;
}

a:visited {
color:#C69C6D;
text-decoration:underline;
}

a:hover {
color:#8C6239;
text-decoration:underline;
text-decoration:strong;
}

a:active {
color:#603913;
text-decoration:none;
text-decoration:strong;
}

/* Set h1 - h6 properties */
/* h1 - Color dark brown - align left */
/* h2 - Color dark brown - align center */
/* h3 - Color mid brown - left - no margin */
/* h4 - Color light brown - left - no margin */
h1,h2,h3,h4 {
font:11px/14px tahoma, arial, helvetica, sans-serif;
}

h1,h2 {
color:#603913;
font-weight:strong;
}

h2 {
text-align:center;
}

h3 {
color:#8C6239;
}

h4 {
color:#C69C6D;
}

/* Set major divisions properties */
.container {
position:relative;
width:960px;
min-height:100%;
margin:auto;
background:#F60;
}
/*Hide from IE Mac\*/
* html #container {
height:100%; /* IE6 doesn't understand min-height but treats height the same way*/
}
/*End Hide*/
/* Topmost element - will be corporate logo area */
.banner {
height:140px;
background:#FF0;
}

/* Horizontal navigation trail */
.breadcrumb {
height:1.5em;
background:#CCC;
line-height:1.5em;
}

/* Left side navigation table block */
.navigation {
width:200px;
background:red;
float:left;
}

#level1,#level2,#level3 {
list-style-type:none;
line-height:20px;
}

#level1 {
margin:5px;
}

#level2 {
margin:10px;
}

#level3 {
margin:15px;
}

/* Main area for the content on pages */
.content {
float:left;
width:560px;
background:maroon;
}

/* Right side column for google ads and such */
.rightads {
width:200px;
background:green;
float:left;
}

/* Bottom of the page - Wide google ads */
/* This is supposed to site on top of footer */
.bottomgoogle {
position:absolute;
bottom:48px;
height:62px;
width:468px;
left:50%;
margin-left:-234px;
background:green;
}

/* Bottom of the page - privacy, copyright etc */
.footer {
position:absolute;
bottom:0;
height:44px;
width:960px;
background:silver;
}

/* To clear any floats - IE should like it */
.clearfoot {
height:110px;
/*height of .bottomgoogle plus bottom: #px value*/
clear:both;
overflow:hidden;
background:#00F;
}

.clear {
clear:both;
font-size:0;
line-height:0px;
}
Most layouts require little or NO absolute positioning.

I let the document flow naturally meaning I used no absolute positioning on the header, I used none on the breadcrumb. I didn't use positioning on the columns either.

I did use it on the footer and bottom google ads.

I floated the columns to the left but once I did this I needed to clear them which is where the div with class="clearfoot" comes in.

I put background colors on the different classes because borders actually count for overall width, this way background colors don't effect width.

Also since you are coding in XHTML, link tags need to be self closed meaning this

<link rel="stylesheet" type="text/css" href="style.css">
should be this

<link rel="stylesheet" type="text/css" href="style.css" />

Same goes for images except you also need an alt attribute so this

<img border="0" src="images/blueme1.jpg" width="235" height="106">
would become this

<img border="0" src="images/blueme1.jpg" width="235" height="106" alt="" />

A good tool to use are the HTML Validator (http://validator.w3.org) and the CSS Validator (http://jigsaw.w3.org/css-validator). They check for any coding errors you might have.

utboatfanatic
Nov 18th, 2006, 05:08 PM
This appears to have done the trick.

The books I am looking at do cover the float and the clear ("Learn CSS in 24 hours" & "CSS for web designers only"), it just didn't make sense to me and I wasn't getting things to lay next to each other - although I gave up on the float a while back and stuck in the absolute positions on the nav, content and right side stuff. Good thing there are you helpful souls for those times when reading the text over and over just doesn't make it any more clear.

Also, this is probably a stupid thing to do, but I sometimes open the pages in Frontpage and sometimes in Dreamweaver, and the latter of the two is where I got the document type from.

As I've been poking around, I've seen lot's of references to validating my code, but I sort of thought that I should get it where it appears to be working first, then try to validate it. I hadn't really thought about using it to help me fix the quirky stuff.

Thanks a TON!!

---- Till my next stupid question!