I’m currently having some issues with my site. Note: I am a total noob, and learned via youtube.
At the moment, I’m trying to get a sticky footer to work on my site, but nothing seems to work. I’ve read (and tried) this and several others for about 4-5 hours and my head is about to explode.
Here’s my code:
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(Images/Wallpapers/Index%20Background.jpg);
}
.twoColFixRtHdr #container {
width: 840px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.twoColFixRtHdr #header {
background: #DDDDDD;
padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
width: 840px;
}
.twoColFixRtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixRtHdr #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px;
background-color: #FFF;
}
.twoColFixRtHdr #mainContent {
margin: 0 250px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
border-color: #000;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #333;
border-left-color: #000;
}
.twoColFixRtHdr #footer {
padding: 0 0px 0 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.twoColFixRtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 0px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Cells And Systems Biology Student Union Home Page</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(Images/Wallpapers/Index%20Background.jpg);
}
.twoColFixRtHdr #container {
width: 840px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.twoColFixRtHdr #header {
background: #DDDDDD;
padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
width: 840px;
}
.twoColFixRtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixRtHdr #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px;
background-color: #FFF;
}
.twoColFixRtHdr #mainContent {
margin: 0 250px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
border-color: #000;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #333;
border-left-color: #000;
}
.twoColFixRtHdr #footer {
padding: 0 0px 0 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.twoColFixRtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 0px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body,td,th {
font-size: 90%;
}
.twoColFixRtHdr #container #mainContent p strong {
color: #30B174;
}
.twoColFixRtHdr #container #mainContent p strong {
color: #000;
}
.twoColFixRtHdr #container #mainContent p {
font-family: Verdana, Geneva, sans-serif;
}
.twoColFixRtHdr #container #mainContent p {
font-family: Verdana, Geneva, sans-serif;
}
.twoColFixRtHdr #container #mainContent h1 strong {
color: #0080FF;
}
.twoColFixRtHdr #container #mainContent p strong {
color: #0080FF;
}
.twoColFixRtHdr #container #mainContent div p strong {
color: #000;
}
.twoColFixRtHdr #container #mainContent div p {
font-family: Verdana, Geneva, sans-serif;
}
.twoColFixRtHdr #container #mainContent p strong {
color: #000;
}
-->
</style></head>
<body class="twoColFixRtHdr">
<div id="container"><img src="Images/Header Logo.jpg" width="200" height="100" alt="Header Logo" /><img src="Images/Flash.gif" width="639" height="100" alt="Flash" />
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><a href="index.html">Home</a></div>
</li>
<li>
<div align="center"><a href="AboutUs.html">About Us</a></div>
</li>
<li>
<div align="center"><a href="Events.html" class="MenuBarItemSubmenu">Events</a>
<ul>
<li><a href="PastEvents.html">Past Events</a></li>
</ul>
</div>
</li>
<li>
<div align="center"><a href="PastTests.html" class="MenuBarItemSubmenu">Past Tests</a>
<ul>
<li><a href="Submit.html">Submit To Us</a></li>
</ul>
</div>
</li>
<li>
<div align="center"><a href="Store.html" class="MenuBarItemSubmenu">Store</a>
<ul>
<li><a href="Hoodies.html">Hoodies</a></li>
</ul>
</div>
</li>
<li>
<div align="center"><a href="ExecTeam.html" class="MenuBarItemSubmenu">Exec Team</a>
<ul>
<li><a href="JoinExec.html">How To Join</a></li>
</ul>
</div>
</li>
<li>
<div align="center"><a href="ContactUs.html" class="MenuBarItemSubmenu">Contact Us</a>
<ul>
<li><a href="OfficeHours.html">Office Hours</a></li>
<li><a href="http://www.facebook.com/group.php?gid=11923336421">Facebook</a></li>
</ul>
</div>
</li>
</ul>
<div id="header">
<!-- end #header -->
</div>
<div id="sidebar1">
<script type="text/javascript">
// Google Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use
//Enter domain of site to search.
var domainroot="http://csbsu.csb.utoronto.ca"
function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}
</script>
<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
<p><b>Search This Website:</b><br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>
</form>
<h4><a href="OfficeHours.html" target="_parent">Office Hours</a></h4>
<h4><strong>Quicklinks<br />
</strong><em>. <a href="http://assu.ca/" target="_blank">ASSU </a><br />
. <a href="http://www.csb.utoronto.ca/" target="_blank">CSB Department</a><br />
. <a href="http://www.portalinfo.utoronto.ca/Page1138.aspx" target="_blank">Portal Blackboard</a><br />
. <a href="http://www.artsci.utoronto.ca/" target="_blank">U of T Art & Sci Faculty</a><br />
. <a href="http://community.uthub.com/" target="_blank">UT Hub</a></em></h4>
<h4>Get Involved!<br />
. <em><a href="http://www.facebook.com/#!/group.php?gid=11923336421" target="_blank">Join Our Facebook</a></em><br />
. <em><a href="JoinExec.html" target="_self">Join Our Team</a></em></h4>
<h4> </h4>
</div>
<div id="mainContent">
<h1> </h1>
<h1 align="center"><strong>Welcome to the CSBSU Website!</strong></h1>
<p align="center"><strong>This is the homepage of the Cells and Systems Biology Student Union at the University of Toronto. This website is dedicated to keeping undegraduate students up-to-date with current relevant events in the CSB department. </strong> </p>
<div>
<h2>Movie Night, Elections, And Hoodies!</h2>
<p>CSBSU would like to thank all those who attended our<strong> <em>Dinner With The Profs Night</em></strong> and <em><strong>Academic Seminar</strong></em>! Our execs feel that both events were excellent and lively, and we hope it was the same for those who came. </p>
<p>CSBSU's final event of the year is <em><strong>Movie Night</strong></em> (with elections!). If you are thinking about joining the union, or if you just want a break from all the studying you've (probably) been doing lately, drop by! For more information about joining the union, please see <a href="JoinExec.html" target="_self">here</a> (new information added!). </p>
<p><strong><em>Movie Night!</em></strong><br />
Location: TBA (Check back Friday)<br />
Time: April 7th, 2011, 6pm - 9pm<br />
Movie: Despicable Me (<a href="http://www.youtube.com/watch?v=tikthjwNUBw" target="_blank">Trailer</a>)</p>
<p>Hope to see you there!</p>
<p>Finally, for those who have purchased hoodies: your orders should be here within the week or at latest by next week. For those who still want hoodies: unfortunately, the next shipment doesn't come until September. Make sure you get one in the upcoming year! </p>
<p>P.S. It's the end of the year, and most midterms have been returned! Contribute to our <a href="Submit.html">past test archive</a> - photocopy/scan us your test, or lend it to us and we'll scan it and promptly return it to you, and receive a free prize! </p>
<h6><em>Posted: March 23, 2011</em></h6>
<p><img src="Images/Bar.png" width="549" height="50" alt="Bar" /></p>
<h2><strong>Dinner With The Pro</strong>fs</h2>
<p>CSBSU is hosting its annual <em><strong>Dinner With The Profs Night</strong></em> on March 3rd. This is an informal event to give students <em>the perfect opportunity</em> to get better acquainted with their professors. Come join your professors and peers for a light meal, drinks, and desserts. </p>
<p>Why should you come?<br />
- Opportunity to get reference letters for graduate/professional school.<br />
-
Opportunity to get into a research lab for the summer and/or next year.<br />
- Opportunity to get a volunteer position at a research lab.
<br />
- Discuss course options
and academia with your professors. <br />
- See what your profs are like, as human beings!
</p>
<p>Location: RW 010<br />
Time: March 3rd, 2011, 5pm - 7pm
</p>
<p>Hope to see you there! </p>
<h6><em>Posted: February 23, 2011</em></h6>
<p><img src="Images/Bar.png" width="549" height="50" alt="Bar" /></p>
<h2><strong>Happy New Year!</strong></h2>
<p>Hi everyone!
Welcome to our reinvented site - we hope it is pleasing on your eyes. First and foremost, a big thank you to all those who attended our Graduate School Information Seminar this past Tuesday - we hope it was informative! </p>
<p>The next point of issue to discuss is our upcoming <strong><em>Dinner With The Profs Night</em></strong>, which is our main event of the year. We're hoping that many of you decide to show up, and to accomodate everyone, we've tried to select a date that is relatively far from midterms/exams. </p>
<div id="surveyMonkeyInfo"><div><script src="http://www.surveymonkey.com/jsEmbed.aspx?sm=RJ33XYktltIboLeJv8c07g_3d_3d"> </script></div>Create your <a href="http://www.surveymonkey.com/">free online surveys</a> with SurveyMonkey, the world's leading questionnaire tool.</div>
<p>Good luck on your upcoming midterms!</p>
<h6><em>Posted: January 26, 2011 </em></h6>
<p align="center"></p>
<!-- end #mainContent -->
<br class="clearfloat" />
</div>
</div>
<div id="footer">
<p align="left"> </p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
Any help is greatly appreciated. >_>
P.S. - the spry menu also fails in IE7 - advice would also be great with respect to that.
Okay, first question: you’re making a sticky footer… where’s your height set on the body? I don’t see that anywhere (I’m a proponent of a version of Paul’s Sticky Footer you linked to in the first post). And no container min-height settings??
Basic setup of a sticky footer:
html, body {
height: 100%;
}
#container {
min-height: 100%;
}
* html #container {height: 100%;}/*IE6 and under*/
#someBoxInsideContainer {
padding-bottom: height-of-footer; /*Paul's version is a border on top of #header... you don't have either of these elements*/
}
#footer {
height: someheight;
margin-top: -footerheight;
}
Paul’s preferred version lately pulls up from the top instead of adding padding to the bottom, so you’d add the padding (or border in Paul’s version) to the top of header instead of padding on the bottom of some other element.
I see some code for IE5. Are you seriously supporting IE5? Or is that legacy from your dreamweaver?
HTML-wise, you correctly have the footer as a sibling of the container and a direct child of the body so that’s good, but you’ll need either a #header element on the top, or an element inside #container who contains the whole body/content section who can have some bottom padding (to keep the footer from ever covering up text at the very bottom).
Now the smallest page I could find was Events. When you say “sticky footer”, what exactly is the behaviour you want? If Events had a sticky footer, the white box would always be as tall as the user’s monitor/screen and the grey footer would be at the bottom (but on-screen without the user needing to scroll unless their screen was less tall than the content of that page).
P.S. - the spry menu also fails in IE7 - advice would also be great with respect to that.
I’ve never seen spry work in IE. Ever. I’ve taken two sites with nasty Sprys (which, like what you have now, don’t work at all in my browser because I should NOT have to run scripts just to access your navigation… that’s just mean) and simply changed them over to CSS-based dropdowns with some JS sprinkled for better keyboard usability.
(I said “simply” but that’s because that’s what I do. For you, it may not be simple. Besides using the awful dreamweaver, where are you at with coding and how much time do you want to invest in learning?)
As a note, the pages loaded unbearably slow for me, I think due to the ginormous flickering background images… maybe comment those out until you’re done working on the sticky footer? That way we can load the pages quickly while you’re coding.
.twoColFixRtHdr #container #MenuBar1 li a {
color: #FFF;
}
ul.MenuBarHorizontal{position:relative;zoom:1.0}
ul.MenuBarHorizontal li a {text-align:center}
ul.MenuBarHorizontal li:hover ul {top:2.2em!important;margin-top:0!important}
Here are the above changes in a cut down version of your page although it still needs a lot of tidying up but the point is to show the menu working and the footer working.
Unless you are using different format for different page then it is a waste of effort having to add .twoColFixRtHdr before every rule. It makes the code a mess and awkward to manage.
Also avoid things like this:
.twoColFixRtHdr #container #MenuBar1 div li a{}
IDs are unique and the element can be reached via #MenuBar a{}. Adding all that other stuff just gives massive specificity issues.
I have no background with web design - I don’t really understand a lot of the stuff you two are saying. The former web designer was forced to retire, and a member of the club union was volunteered to take over his position (aka me). My expertise in web design extends as far as dreamweaver + dreamweaver youtube tutorials. :sick:
With that in mind, I do really appreciate the help - if either of you would like to PM me your first initial and last names, I’ll be glad to add a mention of your contribution since this is a university run website.
THANK YOU SO MUCH! I don’t really understand what you’re trying to say - Dreamweaver does the coding for me. :sick: The site is great now, except that the banner image (which I inserted into the footer). I understand the footer is set to work with the grey bar, and I’ve tried changing some stuff around to get the image alligned properly, but my changes either did nothing or screwed up the site, so to minimize damage I’ve just left it as clean as possible. Any suggestions on how to fix the new footer issue?
Thanks again! And once again, if you want credit, just let me know your names and I’ll be happy to toss it on.
First thing that comes to my mind is, it’s not a great idea to lock up text in an image like that. The web is still text. Anyone who can’t, for whatever reason, load images, won’t get access to any of that information (and it’s really too much information to pack into alt text).
But, to get it in there:
you see that the image is 840px wide? But your footer you have 810px width set. How’s that supposed to work? : ) We don’t have TARDISes round these parts.
You’ll want to set the footer’s width to the 840 that the image has, just so it fits (that’s why the image is sitting off to the right: its left side is only able to start where the footer has “inside room”).
Then, notice the image’s height. It’s ginormous. So, set the footer’s height to be that tall… and make its negative top margin match that, and also the negative margin you have on the #container and the border of #headerimg. So long as they’re all the same number, you can set it to whatever you want. So make them match the image you want to fit in there.
If I were going to have my way, though, I’d probably do Gilder-Levin image replacement on that footer: stuff all the text into the appropriate tags in the footer, make the footer position: relative, add in an absolutely positioned span child who holds the background image right on top of the text. Anyone who can see the image, sees the image. Anyone who can’t, gets the text like normal. Win win.
If you’re interested in that, we can walk you though it.
Ooph, that’s rough… kinda describes my entry into web development a decade ago. Unfortunately:
Deserves a bigger frown smiley than this site supports – the problem with relying on tools like Dreamweaver to build a site does little but make you the tool… As a dearly departed friend of mine often said, the only thing about Dreamweaver that can be considered professional grade tools are the people who promote it’s use in the industry.
You’ve got presentational classes all over the place; heading orders that make no sense whatsoever, elements in heading tags that are in fact not even headings/starts of sections, empty heading tags, non-breaking spaces doing CSS’ job, outdated attribues like “ALIGN” that have no place in modern markup – all hallmarks of using a WYSIWYG, which believe it or not is making the site HARDER to work with, not easier.
Much less the broken/annoying flash thing at the top – do yourself and your visitors a favor and swing a huge axe at that like a Dwarf guarding the ring.
Even a simple line like this one:
<h1 align="center"><strong>Welcome to the CSBSU Website!</strong></h1>
Is such a waste of code, completely non-semantic, and outdated methodology…
Or this:
<h6><em>Posted: March 30, 2011</em></h6>
Why is that even in a heading tag? It’s not the start of a new section! (of course I’d probably move the date up to the top, perhaps as part of the ACTUAL heading for the section)… much less all the EM and STRONG either used in a redundant manner in other tags (like that H6) or together for no good reason (pretty much every bold/italic on the page).
Not your fault, it’s the tool you are trying to use. (personal note, I hate “welcome” text – waste of code)
I mean, you’re even saddled with that disastrous train wreck known as Spry menus – completely broken for me here on Opera on Win7.
Before I’d even TRY to address the problem that brought you here, I would suggest starting over by pitching Dreamweaver in the trash, and going with some new MODERN markup…
Which took me about ten minutes (not debugged, just a quick example) – still needs CSS to make the layout work, but it’s conceptually sound.
Every now and again I do a total rewrite for people with full documentation of what/why/how to help jump start someone on the road to “doing it the right way”. My plate is full this evening, but with the weekend coming up I may be able to squeeze in one such rewrite with full docs to at least give you a cleaner baseline to work from… or for you to at least be able to learn from as I explain the how/where/why of the choices I make when marking up a page.
Crusty: that’s awesome but only useful if the OP has time to spend learning how to read all that code (since s/he’ll have to made edits to it along the way).
Also a student page is going to have regular content updates. I seriously wonder if a bloated CMS would be better than using a bloated WYSIWYG, since a CMS with any kind of decent editor attached can keep added content from being too nasty or invalid.
To the OP: If you are interested in becoming a web nerd (and it does take a few years to really know stuff, but you can get the basics down in a few months), see if your library has Ian Lloyd’s Build Your Own Web Site the Right Way Using HTML and CSS. It’s a very basic book, but pretty much covers what you should know even before using something like DW.
