July 17th, 2004, 04:21 PM
|
 |
Thanks Johnny Hart (BC) R.I.P.
|
|
Join Date: May 2003
Location: Dallas
|
|
Have you looked at this in Moz or Opera. Without really getting into your code, I'd say you're depending on IE's buggy behavior.
The footer is right where you put it, right under the header. Your content and left sections do not exist in the flow since they are AP elements.
Try this very stripped down code. If it does what you want, add content and stylings one item at a time and test (use Moz as the testbed—you can fix what IE breaks later). If something breaks the page, you'll know what did it. If you can't figure it out why it broke, you'll have a specific problem to bring to the forum.
Pay particular attention to the nesting of the elements. You may put things in the divs I've coded, but don't mess with the structure until you fully grok what's going on.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator"
content="HTML Tidy for Linux/x86 (vers 1st March 2002), see www.w3.org" />
<meta name="editor" content="Emacs 21" />
<meta name="author" content="Gary Turner" />
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1" />
<title>Wigan YAC</title>
<style type="text/css">
/*<![CDATA[*/
html, body, #container {
min-height: 100%;
height: 100%; /*using an IE bug*/
}
html>body, html>body #container { /*correcting for modern browsers*/
height: auto;
}
html, body {
margin: 0;
padding: 0;
color: black;
background-color: #86a083; /*don't waste bandwidth */
}
#container { /*this holds the whole page*/
position: absolute;
width: 600px;
top: 0;
left: 50%;
margin-left: -300px; /*these center an AP element*/
}
#footer {
position: absolute;
bottom: 0;
background-color: #f2f2f2;
width: 100%;
text-align: center;
border: 1px solid black;
}
#main { /*this holds all the content excluding the footer*/
position: relative; /*required, in order to hold positioned elements*/
margin-bottom: 3em;
height: auto;
}
/*Everything above is critical where positioning is concerned*/
#banner {
border: 1px solid black;
/*no background image--background stuff is not content*/
background-color: #f2f2f2;
}
#banner h1 {
margin: 0; /*IE has a brain-fart if this isn't done*/
}
#leftcol {
position: absolute;
left: 0; /*wouldn't be necessary but for IE*/
width: 147px;
background-color: #f2f2f2;
border: 1px solid black;
}
#content {
margin-left: 150px;
padding: 5px;
background-color: #f2f2f2;
border: 1px solid black;
}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<div id="main">
<div id="banner">
<h1><img src="images/header.png" width="598"
height="100"alt="Wigan YAC--The Official Site" /></h1>
</div><!-- end banner -->
<div id="leftcol">
<p>All the nav and login stuff go here</p>
</div><!-- end leftcol -->
<div id="content">
<p>For some reason you've decided to use tables to control
the layout in this section. So just dump the table right in.</p>
<!-- uncomment the next part to illustrate a long content area -->
<!-- <p>more …</p> <p>more …</p> <p>more …</p>
<p>more …</p> <p>more …</p> <p>more …</p>
<p>more …</p> <p>more …</p> <p>more …</p>
<p>more …</p> <p>more …</p> <p>more …</p>
<p>more …</p> <p>more …</p> <p>more …</p>
<p>more …</p> -->
</div><!-- end content -->
</div><!-- end main -->
<div id="footer">
<p>Looks best at 600×450 or larger in a modern
browser. It has been dumbed down enough for Internet Explorer.</p>
</div<!-- end footer -->
</div><!-- end container -->
</body>
</html>
cheers,
gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.
My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.
|
Dev Shed Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
