SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with sticky footer!

    Hi everyone,

    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:
    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;
    }
    No matter how I modify it, it either:
    1. doesn't work.
    2. screws up horribly.
    3. 1 and 2.

    Help would be greatly appreciated.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi csbsu_it. Welcome to SitePoint.

    You'd best post the whole page (html and all), as CSS alone is not much use. Preferably, post a live link.

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the welcome!

    Here's the website: Cells And Systems Biology Student Union Home Page

    I am using Dreamweaver CS4.

    Here's the code for index.html:

    Code:
    <!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 &amp; 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>&nbsp;</h4>
      </div>
      <div id="mainContent">
        <h1>&nbsp; </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.

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Any help is greatly appreciated. >_>
    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:
    Code:
    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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi, Stomme has answered all the questions so here is the actual code you will need to get the footer working in your page.

    (These rules follow your original as they modify some rules)

    Code:
    html, body {
        height:100%;
        margin:0;
        padding:0;
    }
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
    #container:after {
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    .twoColFixRtHdr #container {
        clear:both;
        min-height:100%;
        border-top:none;
        border-bottom:none;
        margin-top:-39px;
    }
    * html.twoColFixRtHdr #container {
        height:100%
    }
    .twoColFixRtHdr #footer{
        clear:both;
        height:38px;
        border:1px solid #000;
        border-top:none;
        width:810px;
        margin:auto;
    }
    #headertop{
        width:100%;
        border-top:39px solid #000;
        overflow:hidden;
    }
    #headertop img{float:left}
    Then add the headertop to the html:

    Code:
    <div id="container">
        <div id="headertop"><img src="http://csbsu.csb.utoronto.ca/Images/Header Logo.jpg" width="200" height="100" alt="Header Logo" /><img src="http://csbsu.csb.utoronto.ca/Images/Flash.gif" width="639" height="100" alt="Flash" /></div>
        <ul id="MenuBar1" class="MenuBarHorizontal">

    Then move the footer outside of the maincontainer:

    Code:
        <!-- end #container -->
    </div>
    <div id="footer">
        <p> CSBSU Copyright 2011</p>
        <!-- end #footer -->
    </div>
    <script type="text/javascript"> etc.....
    To get the spry working in IE7 then first remove that extra div from the html.

    Code:
        <ul id="MenuBar1" class="MenuBarHorizontal">
            <li> <a href="index.html">Home</a> </li>
            <li> <a href="AboutUs.html">About Us</a> </li>
            <li> <a href="Events.html" class="MenuBarItemSubmenu">Events</a>
                <ul>
                    <li><a href="PastEvents.html">Past Events</a></li>
                </ul>
            </li>
            <li> <a href="PastTests.html" class="MenuBarItemSubmenu">Past Tests</a>
                <ul>
                    <li><a href="Submit.html">Submit To Us</a></li>
                </ul>
            </li>
            <li> <a href="Store.html" class="MenuBarItemSubmenu">Store</a>
                <ul>
                    <li><a href="Hoodies.html">Hoodies</a></li>
                </ul>
            </li>
            <li> <a href="ExecTeam.html" class="MenuBarItemSubmenu">Exec Team</a>
                <ul>
                    <li><a href="JoinExec.html">How To Join</a></li>
                </ul>
            </li>
            <li> <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>
            </li>
        </ul>

    Then add this code:

    Code:
    .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.

    Code:
    <!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;
        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:#666 url(http://csbsu.csb.utoronto.ca/Images/Wallpapers/Index%20Background.jpg) repat fixed 0 0;
    }
    .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 */
    }
    .twoColFixRtHdr #footer {
        padding: 0 10px 0 20px; /* 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: 10px 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="http://csbsu.csb.utoronto.ca/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    
    /*******************************************************************************
    
     LAYOUT INFORMATION: describes box model, positioning, z-order
    
     *******************************************************************************/
    
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
        left: auto;
        background:#3e7ce2;
        height:2.2em
    }
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive {
        z-index: 1000;
    }
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 8.3em;
        float: left;
    }
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        width: 8.2em;
        position: absolute;
        left: -1000em;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
        left: auto;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li {
        width: 8.2em;
    }
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul {
        position: absolute;
        margin: 0 0 0 95%;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
        left: auto;
        top: 0;
    }
    /*******************************************************************************
    
     DESIGN INFORMATION: describes color scheme, borders, fonts
    
     *******************************************************************************/
    
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul {
        border: 1px solid #CCC;
    }
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a {
        display: block;
        cursor: pointer;
        background-color: #EEE;
        padding: 0.5em 0.75em;
        color: #333;
        text-decoration: none;
        background-image: url(http://csbsu.csb.utoronto.ca/Images/Navigation%20Bar/MenuBar.gif);
        background-repeat: repeat;
    }
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
        color: #FFF;
        background-image: url(http://csbsu.csb.utoronto.ca/Images/Navigation%20Bar/MenuBarHover.gif);
    }
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
        background-color: #33C;
        color: #FFF;
    }
    /*******************************************************************************
    
     SUBMENU INDICATION: styles if there is a submenu under a given menu item
    
     *******************************************************************************/
    
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu {
        background-image: url(http://csbsu.csb.utoronto.ca/Images/Navigation%20Bar/MenuBar.gif);
        background-repeat: repeat;
        background-position: 95% 50%;
    }
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu {
        background-image: url(http://csbsu.csb.utoronto.ca/SpryAssets/SpryMenuBarRight.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
        background-image: url(http://csbsu.csb.utoronto.ca/Images/Navigation%20Bar/MenuBarHover.gif);
        background-repeat: repeat;
        background-position: 95% 50%;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
        background-image: url(http://csbsu.csb.utoronto.ca/SpryAssets/SpryMenuBarRightHover.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    /*******************************************************************************
    
     BROWSER HACKS: the hacks below should not be changed unless you are an expert
    
     *******************************************************************************/
    
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe {
        position: absolute;
        z-index: 1010;
     filter:alpha(opacity:0.1);
    }
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection {
    ul.MenuBarHorizontal li.MenuBarItemIE {
        display: inline;
        f\loat: left;
        background: #FFF;
    }
    }
    .twoColFixRtHdr #container #mainContent h1 strong {
        font-family: Verdana, Geneva, sans-serif;
    }
    .twoColFixRtHdr #container #mainContent h1 strong {
        font-family: Verdana, Geneva, sans-serif;
    }
    .twoColFixRtHdr #container #mainContent h1 strong {
        font-family: Verdana, Geneva, sans-serif;
    }
    .twoColFixRtHdr #container #MenuBar1 li a {
        color: #FFF;
    }
    </style>
    <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>
    <style type="text/css">
    html, body {
        height:100%;
        margiin:0;
        padding:0;
    }
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
    #container:after {
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    .twoColFixRtHdr #container {
        clear:both;
        min-height:100%;
        border-top:none;
        border-bottom:none;
        margin-top:-39px;
    }
    * html.twoColFixRtHdr #container {
        height:100%
    }
    .twoColFixRtHdr #footer{
        clear:both;
        height:38px;
        border:1px solid #000;
        border-top:none;
        width:810px;
        margin:auto;
    }
    #headertop{
        width:100%;
        border-top:39px solid #000;
        overflow:hidden;
    }
    #headertop img{float:left}
    
    .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}
    
    </style>
    </head>
    <body class="twoColFixRtHdr">
    <div id="container">
        <div id="headertop"><img src="http://csbsu.csb.utoronto.ca/Images/Header Logo.jpg" width="200" height="100" alt="Header Logo" /><img src="http://csbsu.csb.utoronto.ca/Images/Flash.gif" width="639" height="100" alt="Flash" /></div>
        <ul id="MenuBar1" class="MenuBarHorizontal">
            <li> <a href="index.html">Home</a> </li>
            <li> <a href="AboutUs.html">About Us</a> </li>
            <li> <a href="Events.html" class="MenuBarItemSubmenu">Events</a>
                <ul>
                    <li><a href="PastEvents.html">Past Events</a></li>
                </ul>
            </li>
            <li> <a href="PastTests.html" class="MenuBarItemSubmenu">Past Tests</a>
                <ul>
                    <li><a href="Submit.html">Submit To Us</a></li>
                </ul>
            </li>
            <li> <a href="Store.html" class="MenuBarItemSubmenu">Store</a>
                <ul>
                    <li><a href="Hoodies.html">Hoodies</a></li>
                </ul>
            </li>
            <li> <a href="ExecTeam.html" class="MenuBarItemSubmenu">Exec Team</a>
                <ul>
                    <li><a href="JoinExec.html">How To Join</a></li>
                </ul>
            </li>
            <li> <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>
            </li>
        </ul>
        <div id="header">
            <!-- end #header -->
        </div>
        <div id="sidebar1">
            <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 &amp; 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>&nbsp;</h4>
        </div>
        <div id="mainContent">
            <h1>&nbsp; </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>
            <h2>Movie Night, Elections, And Hoodies!</h2>
            <p>Good luck on your upcoming midterms!</p>
            <h6><em>Posted: January 26, 2011 </em></h6>
            <!-- end #mainContent -->
        </div>
        <!-- end #container -->
    </div>
    <div id="footer">
        <p> CSBSU Copyright 2011</p>
        <!-- end #footer -->
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>
    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:

    Code:
    .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.

    Hope that helps

  6. #6
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both for the help!

    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.

    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.

    Quote Originally Posted by Stomme poes View Post
    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??

    I actually tried adding this stuff in - when the page went chaotic, I undid my modifications.

    I see some code for IE5. Are you seriously supporting IE5? Or is that legacy from your dreamweaver?

    It's Dreamweaver.


    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?)

    Like I said, almost no prior knowledge. I'd be willing to learn, but the learning curve will probably be too steep for me.

    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.

    Done!
    Quote Originally Posted by Paul O'B View Post
    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:

    Code:
    .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.

    Hope that helps
    THANK YOU SO MUCH! I don't really understand what you're trying to say - Dreamweaver does the coding for me. 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.

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    You want the yellow image to be in the footer?

    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.

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csbsu_it View Post
    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.
    Ooph, that's rough... kinda describes my entry into web development a decade ago. Unfortunately:

    Quote Originally Posted by csbsu_it View Post
    Dreamweaver does the coding for me.
    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:
    Code:
    <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...

    Something like...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Cells And Systems Biology Student Union Home Page
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		<a href="/">
    			CSB <span>SU<span></span></span>
    		</a>
    	</h1>
    
    	<ul id="mainMenu">
    		<li>
    			<a href="index.html">Home</a>
    		</li><li>
    			<a href="AboutUs.html">About Us</a>
    		</li><li>
    			<a href="Events.html">Events</a>
    			<ul>
    				<li><a href="PastEvents.html">Past Events</a></li>
    				<li><a href="Gallery.html">Gallery</a></li>
    			</ul>
    		</li><li>
    			<a href="PastTests.html">Past Tests</a>
    			<ul>
    				<li><a href="Submit.html">Submit</a></li>
    			</ul>
    		</li><li>
    			<a href="Store.html">Store</a>
    			<ul>
    				<li><a href="Hoodies.html">Hoodies</a></li>
    			</ul>
    		</li><li>
    			<a href="ExecTeam.html">Exec Team</a>
    			<ul>
    				<li><a href="JoinExec.html">How To Join</a></li>
    			</ul>
    		</li><li>
    			<a href="ContactUs.html">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>
    		</li><li>
    			<a href="Opportunities.html">Opportunities</a>
    			<ul>
    				<li><a href="GetResearch.html">Research</a></li>
    				<li><a href="WorkStudy.html">Work Study</a></li>
    			</ul>
    		</li>
    	</ul>
    
    	<div id="sideBar">
    		<ul>
    			<li>
    				<a href="OfficeHours.html">Office Hours</a>
    			</li><li>
    				Quicklinks
    				<ul>
    					<li><a href="http://assu.ca/">ASSU</a></li>
    					<li><a href="http://www.csb.utoronto.ca/">CSB Department</a></li>
    					<li><a href="http://www.portalinfo.utoronto.ca/Page1138.aspx">Portal Blackboard</a></li>
    					<li><a href="http://www.artsci.utoronto.ca/">U of T Art &amp; Sci Faculty</a></li>
    					<li><a href="http://community.uthub.com/">UT Hub</a></li>
    				</ul>
    			</li><li>
    				Get Involved!
    				<ul>
    					<li><a href="http://www.facebook.com/#!/group.php?gid=11923336421">Join Our Facebook</a></li>
    					<li><a href="JoinExec.html">Join Our Team</a></li>
    				</ul>
    			</li>
    		</ul>
    	<!-- #sideBar --></div>
    
    	<div id="mainContent">
    		<p class="intro">
    			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.
    		</p>
    
    		<div class="article">
    			<h2>
    				Hoodies Have Arrived! Elections Update!<br />
    				<small>Posted: March 30, 2011</small>
    			</h2>
    			<p>
    				Hoodies have arrived! Come by the CSBSU office and pick up yours today!
    			</p><p>
    				Some additional details about the election night:
    			</p>
    			<ol>
    				<li>
    					You must do all campaigning before the night of the election. You may not ask for votes amongst the audience during election night.
    				</li><li>
    					You must be present <em>to vote</em>. However, you may use a proxy if you wish to run for a position but cannot make the time slot. Unfortunately, we cannot move the timing of the election as we picked the time based on the availability of majority of the people intending to attend the election.
    				</li>
    			</ol>
    			<p>
    				Feel free to email us or contact us through facebook if you have any questions.
    			</p><p>
    				Applications are still being taken, so send yours in if you're planning to run for a position for 2011/2012!
    			</p>
    		<!-- .article --></div>
    
    		<div class="article">
    			<h2>
    				Movie Night, Elections, And Hoodies!<br />
    				<small>Posted: March 23, 2011</small>
    			</h2>
    			<p>
    				CSBSU would like to thank all those who attended our <em>Dinner With The Profs Night</em> and <em>Academic Seminar</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>Movie Night</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">here</a> (new information added!).
    			</p>
    			<h3>Movie Night!</h3>
    			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">Trailer</a>)<br />
    			<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>
    		<!-- .article --></div>
    
    		<div class="article">
    			<h2>
    				Dinner With The Profs<br />
    				<small>Posted: February 23, 2011</small>
    			</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?
    			</p>
    			<ul>
    				<li>
    					Opportunity to get reference letters for graduate/professional school.
    				</li><li>
    					Opportunity to get into a research lab for the summer and/or next year.
    				</li><li>
    					Opportunity to get a volunteer position at a research lab.
    				</li><li>
    					Discuss course options and academia with your professors.
    				</li><li>
    					See what your profs are like, as human beings!
    				</li>
    			</ul>
    			Location: RW 010<br />
    			Time: March 3rd, 2011, 5pm - 7pm<br />
    			<p>Hope to see you there!</p>
    		<!-- .article --></div>
    
    		<div class="article">
    			<h2>
    				Happy New Year!<br />
    				<small>Posted: January 26, 2011</small>
    			</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 <em>Dinner With The Profs Night</em>, 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">
    				<script src="http://www.surveymonkey.com/jsEmbed.aspx?sm=RJ33XYktltIboLeJv8c07g_3d_3d"></script>
    				<p>
    					Create your <a href="http://www.surveymonkey.com/">free online surveys</a> with SurveyMonkey, the world's leading questionnaire tool.
    				</p>
    			<!-- #surveyMonkeyInfo --></div>
    			<p>
    				Good luck on your upcoming midterms!
    			</p>
    		<!-- .article --></div>
    
    	<!-- #content --></div>
    
    <!-- #pageWrapper --></div>
    
    <div id="footer">
    	<h2>
    		Cell and Systems Biology Student Union
    		<span></span>
    	</h2>
    	Site Designed By D.Lee, S. Bie, J. Ang<br />
    	Special Thanks to A. Krishnamoorthy<br />
    	<br />
    	University of Toronto<br />
    	<br />
    	&copy; 2008-2011 CSBSU, University of Toronto, All Rights Reserved.
    <!-- #footer --></div>
    
    </body></html>
    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.

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    What Stomme just said but in code

    Changes in bold.
    Code:
    .twoColFixRtHdr #container {
        clear:both;
        min-height:100%;
        border-top:none;
        border-bottom:none;
        margin-top:-204px;
    }
    * html.twoColFixRtHdr #container {
        height:100%
    }
    .twoColFixRtHdr #footer{
        clear:both;
        height:203px;
        border:1px solid #000;
        border-top:none;
        width:840px;
        margin:auto;
            padding:0;
    }
    .twoColFixRtHdr #footer p{margin:0;padding:0}
    #headertop{
        width:100%;
        border-top:204px solid #000;
        overflow:hidden;
    }

    Remember to move all the css to external files once the design is completed.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •