Help With My Evil Footer

chaos0822 · Joined: 02 Jan 2006 Posts: 7

I have tried numerous templates and such to get this style working. I am now at the last stage of cleaning up and adding footer, but I can't seem to get the footer to work Crying or Very sad

. The footer is supposed to be at the bottom of the page no matter how much content I have. Also, I don't want it fixed
either.

Please Help Me Thanks

/* CSS Document */

/*BODY*/

html {height:100%;}

BODY {
margin:20px;
padding:0;
background-color: rgb(186,235,229);
}

/*Classes*/

P.Bodytext {
text-align: left;
text-indent: 1.5em;
white-space: wrap;
position: relative;
color: rgb(0,59,207);
font-size: 5mm;
font-family: Arial, Impact;
top-margin: 10px;
}

DIV#Header {
position: absolute;
background: rgb(24,0,255);
border-style: outset;
border: 2px solid black;
height: 120px;
width: 90%;
min-width: 900px;
top: 25px;
left: 5%;
background-image: url(Images/Logo.jpg);
background-repeat: no-repeat;
background-align: bottom;
background-position: 72%;
}

DIV#SideBar {
position: absolute;
background: rgb(24,0,255);
border-style: outset;
border: 2px solid black;
top: 200px;
width: 150px;
height: 300px;
float:left;
z-index: 3;
left: 5%;
}

DIV#Body {
position: absolute;
border-style: outset;
border: 2px solid black;
width: 65%;
left: 5%;
right: 5%;
margin-left: 200px;
margin-right: 15px;
align: right;
top: 200px;
min-width: 700px;
}

A#Logo {
position: relative;
white-space: nowrap;
align: center;
color: blue;
font-family: "Monotype Corsiva", "Franklin Gothic Medium", "Book Antiqua";
font-size: 50pt;
border-style: none;
font-style: bold;
left: 7%;
}

P#SidebarText {
font-size: 30px;
font-family: "Monotype Corsiva", "Franklin Gothic Medium", "Book Antiqua";
color: yellow;
align: center;
text-align: center;
position: relative;
text-decoration: underline;
}

A.Side {
text-align: left;
color: yellow;
font-family: Comic Sans MS;
font-size: 18px;
white-space: nowrap;
left: 13px;
position: relative;
}

A.Side:Hover {
text-align: left;
color: orange;
font-family: Comic Sans MS;
font-size: 18px;
white-space: nowrap;
left: 13px;
position: relative;
}

#Container {
min-height:100%;
position:relative;
}

#Footer {
clear: both;
font-size: 12pt;
text-align: center;
width: 100%;
border-style: solid;
font-weight: bold;
background-color: #445669;
color: #fff;
position: relative;
left: 0;
bottom: 0;
}

P#Copyright {
font-size: 20px;
color: blue;
}

---------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>School</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="Style.css" MEDIA="ALL">
</HEAD>
<BODY>
<DIV ID="Container">
<DIV ID="SideBar">
<P ID="SidebarText">Site Map</P>
<A Class="Side" Href="Gaming.html">Gaming</A><BR>
<A Class="Side" Href="Airsoft.html">Airsoft</A><BR>
<A Class="Side" Href="Web Design.html">Web Design</A><BR>
<A Class="Side" Href="Other Stuff">Other Stuff</A><BR>
<A Class="Side" Href="Downloads.html">Downloads</A><BR>
<A Class="Side" Href="Links">Links</A><BR>
</DIV>
<DIV ID="Header">
<A ID="Logo" HREF="Index.html">Jacob's Website</A>
</DIV>
<DIV ID="Body">
<P Class="Bodytext">
Lorem ipsum dolor sit amet, ac est justo lorem magna, imperdiet in et vitae, auctor arcu pede lorem, sagittis praesent, neque aliquam feugiat. Volutpat ut pellentesque maecenas velit ad eget, justo lectus libero amet fames eget arcu, aenean volutpat cursus. Sed sed lobortis varius, congue justo convallis interdum magna sed, nec morbi lectus. Nulla imperdiet auctor commodo.</P><P Class="Bodytext">Bibendum arcu consectetuer ut parturient nulla tellus, interdum dictum sapien mauris, habitant at elit justo donec posuere. Platea vivamus mauris wisi orci tellus in, risus gravida, faucibus non justo scelerisque et.
</P>
</DIV>
<div id="Footer">
<P ID="Copyright">&copy 2005 Jacob's Website</P>
</DIV>
</DIV>
</BODY>
</HTML>

Corey Bryant · Posted: Mon Jan 02, 2006 2:27 pm

Check out Design with Cascading Style Sheets. Also take a look at Position is everything.

Using the positioning attribute can cause some heartache - usually it is better to let the elements land where they will. you can use the clear attribute to help you place the footer if you let the element fall in place.

Also keep in mind that HTML should be written in lowercase.

chaos0822 · Joined: 02 Jan 2006 Posts: 7

I am getting some interesting results by taking out positioning elements, and although the footer seems to be fixed, now the position of other elements are being screwed up and not a cross-browser compatible. I'll keep trying, but I would still like some more suggestions. If you see anything else to fix in the code please tell me because I am hoping to begin adding content this week.

P.S: Why should I use lower case for HTML tags. In all of my previous html experience it doesn't matter, and it seems to make tags easier to differentiate from id's or content doesn't it! Thanks

Corey Bryant · Posted: Mon Jan 02, 2006 7:09 pm

chaos0822 · Joined: 02 Jan 2006 Posts: 7

/* CSS Document */
/*FONTS*/

/*BODY*/

html {height:100%;}

BODY {
margin-left: 40px;
margin-right: 40px;
padding:0;
background-color: rgb(186,235,229);
}

/*Classes*/

P.Bodytext {
text-align: left;
text-indent: 1.5em;
white-space: wrap;
color: rgb(0,59,207);
font-size: 5mm;
font-family: Arial, Impact;
top-margin: 10px;
}

DIV#Header {
background: rgb(24,0,255);
border-style: outset;
border: 2px solid black;
height: 120px;
width: 90%;
min-width: 900px;
top: 25px;
left: 5%;
background-image: url(Images/Logo.jpg);
background-repeat: no-repeat;
background-align: bottom;
background-position: 72%;
}

DIV#SideBar {
background: rgb(24,0,255);
border-style: outset;
border: 2px solid black;
margin-top: 20px;
width: 150px;
height: 300px;
float:left;
z-index: 3;
left: 5%;
}

DIV#Body {
border-style: outset;
border: 2px solid black;
width: 65%;
left: 5%;
right: 5%;
margin-left: 200px;
margin-right: 15px;
align: right;
top: 220px;
min-width: 700px;
margin-top: 20px;
}

A#Logo {
white-space: nowrap;
align: center;
color: blue;
font-family: "Monotype Corsiva", "Franklin Gothic Medium", "Book Antiqua";
font-size: 50pt;
border-style: none;
font-style: bold;
margin-left: 50px
}

P#SidebarText {
font-size: 30px;
font-family: "Monotype Corsiva", "Franklin Gothic Medium", "Book Antiqua";
color: yellow;
align: center;
text-align: center;
position: relative;
text-decoration: underline;
}

A.Side {
text-align: left;
color: yellow;
font-family: Comic Sans MS;
font-size: 18px;
white-space: nowrap;
left: 13px;
position: relative;
}

A.Side:Hover {
text-align: left;
color: orange;
font-family: Comic Sans MS;
font-size: 18px;
white-space: nowrap;
left: 13px;
position: relative;
}

#Container {
min-height:100%;
}

#Footer {
clear: both;
font-size: 12pt;
text-align: center;
width: 100%;
border-style: solid;
font-weight: bold;
background-color: #445669;
color: #fff;
left: 0;
bottom: 0;
}

P#Copyright {
font-size: 20px;
color: blue;
}

-------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>School</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" media="all">
</head>
<body>
<div id="Container">
<div id="Header">
<a id="Logo" HREF="Index.html">Jacob's Website</A>
</div>
<div id="SideBar">
<p id="SidebarText">Site Map</p>
<a class="Side" href="Gaming.html">Gaming</A><BR>
<a class="Side" href="Airsoft.html">Airsoft</A><BR>
<a class="Side" href="Web Design.html">Web Design</A><BR>
<a class="Side" href="Other Stuff">Other Stuff</A><BR>
<a class="Side" href="Downloads.html">Downloads</A><BR>
<a class="Side" href="Links">Links</A><BR>
</div>
<div id="Body">
<p class="Bodytext">
Lorem ipsum dolor sit amet, ac est justo lorem magna, imperdiet in et vitae, auctor arcu pede lorem, sagittis praesent, neque aliquam feugiat. Volutpat ut pellentesque maecenas velit ad eget, justo lectus libero amet fames eget arcu, aenean volutpat cursus. Sed sed lobortis varius, congue justo convallis interdum magna sed, nec morbi lectus. Nulla imperdiet auctor commodo.</P><P Class="Bodytext">Bibendum arcu consectetuer ut parturient nulla tellus, interdum dictum sapien mauris, habitant at elit justo donec posuere. Platea vivamus mauris wisi orci tellus in, risus gravida, faucibus non justo scelerisque et.
</p>
</div>
<div id="Footer">
<p id="Copyright">&copy 2005 Jacob's Website</p>
</div>
</div>
</BODY>
</HTML>
---------------------------------------------------------------------
Alright, now I have footer and things pretty well aligned, but now I am having trouble with IE acting like the page is fluid, while Firefox is completely non scalable. I am at a loss as to what to do about this, and which I like better. Do you think fluid or non fluid scalability will be bett for it. Also, if you don't mind, and if you can, please check this with your browser too so I can get a good feeling for what browser support I will need to add. Thanks and keep the comments coming.

P.S.: Does the HTML lowercase tags look better now (did I go overboard or not do enough). Sorry I am not a big XHTML nut, but I am hoping that it will be for my next project.

Corey Bryant · Posted: Tue Jan 03, 2006 4:18 am

You really do not have to be a big XHTML nut, it's just that it is the next version and starting to write lower case now, will be better for you.

For the fluid information, check out Fixed v. Fluid - Round 1 (of many, I'm sure). I usually do fixed, but some prefer fluid.

chaos0822 · Joined: 02 Jan 2006 Posts: 7

Now, my next question is how can I use a min-width element in IE, or if there is an alternative. It works very well in Mozilla Firefox, but everything in IE resizes way too much. By the way, that article was interesting about Fixed vs. Fluid, but I am going to have to go with a mix of both, which is why I am asking about min-widths.

Corey Bryant · Posted: Tue Jan 03, 2006 8:46 am

Check out [url=http://www.mezzoblue.com/archives/2004/02/25/sidestepping/]Side-stepping IE[/url

chaos0822 · Joined: 02 Jan 2006 Posts: 7

That wasn't so helpful as I don't want to make the body/window size always the same... Actually, what I was thinking was a sidebar margin kinda thing on the right and left margins. It would scale to a certain point and then disappear like magic. That way, everyones browser would look the same, and no one would need to scroll too much. Another thing that crossed my mind was a search bar. If you know how I can do this with CSS or straight HTML great please share.

Corey Bryant · Posted: Tue Jan 03, 2006 9:23 am

Actually talk to the guys / gals over there at IWDN - they are very familiar with the quirks mode of IE