SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with this please

    Hey guys...

    Here is the code to a page I'm developing. I have links at the bottom of the content on every page...basically just duplicate links which can be found elsewhere on the site.

    My problem with this particular page is that there isn't going to be a whole lot of content on this page, and those links like the rest of the pages are staying just directly below the content. The site has 100% height so I would like the links to stay at the bottom of the page, not just below the content. All of my other pages do no have this problem as there is enough content to fill up the page. Here is my code:

    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" lang="en" xml:lang="en">
    <head>
    <title>Natural Choices</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body, html {
    height: 100%;
    }
    body {
    margin: 0;
    background: #ffffff;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
    }
    #container {
    _height: 100%;
    min-height: 100%;
    margin: auto;
    width: 750px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    background:   url(images/containerbg.jpg) repeat-y left top;
    text-align: left;
    position: relative;
    }
    #navbar {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    background: #ffffff;
    height: 16px;
    padding-left: 25px;
    }
    ul#nav li {
    text-align: center;
    }
    ul#nav li ul li {
    text-align: left;
    }
    ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative; /*for ie to show borders */
    }
    li { /* all list items */
    float: left;
    position: relative;
    width: 11em;
    background: #ffffff;
    height: 16px;
    }
    li ul { /* second-level lists */
    display: none;
    position: absolute;
    left: -5px;
    top: 100%;
    background: #ffffcc;
    padding-left: 0px;
    }
    li ul a {
    background-color: #99cc99;
    color: #000000;
    text-decoration: none;
    float: left;
    margin: 0;
    width: 140px;
    padding-left: 0px;
    border-top: 1px solid #cccccc;
    }
    li ul a:hover {
    background-color: #99cc99;
    color: #ffffff;
    }
    li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    top: auto;
    left: auto;
    margin-left: -1px;
    }
    li:hover ul, li.over ul { /* lists nested under hovered list items */
    display: block;
    }
    li a {
    text-decoration: none;
    display: block;
    color: #000000;
    height: 16px;
    }
    li a:hover {
    color: #3333ff;
    height: 16px;
    }
    #content {
    margin-left: 100px;
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 5px;
    clear: left;
    }
    .cart a {
    text-decoration: none;
    color: #3333ff;
    }
    .cart a:hover {
    text-decoration: underline;
    }
    #firstp {
    margin-bottom: 20px;
    margin-top: 10px;
    }
    table {
    border: solid #99cc99; /*do the left and top borders only*/
    border-width: 1px 0 0 1px;
    margin-bottom: 5px;
    }
    table td {
    border: solid #99cc99; /*right and bottom borders only to close up the table*/
    border-width: 0 1px 1px 0;
    }
    #links {
    font-size: 9px;
    text-align: center;
    margin-bottom: 5px;
    }
    #links a {
    text-decoration: none;
    color: #3333ff;
    }
    #links a:hover {
    text-decoration: underline;
    }
    </style>
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
    	if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("nav");
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    				node.onmouseout=function() {
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    
    //--><!]]></script>
    </head>
    
    <body>
    <div id="container"> 
      <div id="header"> <img src="images/naturalchoicesheader.jpg" /> </div>
      <div id="navbar"> 
        <ul id="nav">
          <li><a href="index.php">Home</a></li>
          <li><a href="">Health Products</a> 
            <ul>
              <li><a href="cleansingp.php">&nbsp;Cleansing Products</a></li>
              <li><a href="personalhc.php">&nbsp;Personal Health Care</a></li>
              <li><a href="skincare.php">&nbsp;Skin Care</a></li>
              <li><a href="cosmetics.php">&nbsp;Cosmetics</a></li>
            </ul>
          </li>
          <li><a href="">Health Testing</a> 
            <ul>
              <li><a href="bloodanalysis.php">&nbsp;Blood Analysis</a></li>
              <li><a href="othertests.php">&nbsp;Other Tests</a></li>
            </ul>
          </li>
          <li><a href="eegneuro.php">EEG Neurofeedback</a></li>
          <li><a href="requestinfo.php">Request Info</a></li>
        </ul>
      </div>
      <div id="content"> <span class="cart"><img src="images/cart.gif" />&nbsp;<a href="cart.php">View 
        Cart</a></span> 
        <div id="firstp"> 
    	<strong>Cosmetics</strong><br />
          <table class="tablecontent" width="640" cellspacing="0" cellpadding="1">
            <tr> 
              <td width="116" bgcolor="#ffffff">Product Code</td>
              <td width="253" bgcolor="#ffffff">Description</td>
              <td width="99" bgcolor="#ffffff">Retail Price</td>
              <td width="159">&nbsp;</td>
            </tr>
    		<tr> 
              <td>9963</td>
              <td>Cosmetic Kit - Cool</td>
              <td>$200.40</td>
              <td>&nbsp;</td>
            </tr>
    		<tr> 
              <td>9964</td>
              <td>Cosmetic Kit - Warm</td>
              <td>$200.40</td>
              <td>&nbsp;</td>
            </tr>
          </table>
          <p>Each kit contains 2 shades of Foundation, 1 Blush (2 colors), 1 Eye Pencil, 1 Eye Shadow (4 colors), 1 Mascara, 4 Lipsticks, 1 Lip Pencil, 4 Nail Enamels, 1 Create A Masterpiece Brochureand the Cosmetics Finishing Touch Video. </p>
        </div>
        <div id="links"> <a href="index.php">Home</a> | <a href="cleansingp.php">Cleansing 
          Products</a> | <a href="personalhc.php">Personal Health Care</a> | <a href="skincare.php">Skin 
          Care</a> | <a href="cosmetics.php">Cosmetics</a> | <a href="misc.php">Misc.</a> 
          | <a href="bloodanalysis.php">Blood Analysis</a> | <a href="othertests.php">Other 
          Tests</a> <br />
          <a href="eegneuro.php">EEG Neurofeedback</a> | <a href="requestinfo.php">Request 
          Information</a> </div>
      </div>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code:
    #links {
    position:absolute;
    bottom:5px;
    font-size: 9px;
    text-align: center;
    }
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    alright...I'll try it. Thanks

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you use pacmans solution (which will work fine ) then you may want to use it on all pages as well but you will need to add something to stop content overwriting the footer on pages longer than the viewport because the footer (links) are absolutely placed.

    One way to do it is to place a blank element in the flow that is the same size as the footer and this will hold the content above the footer.

    Code:
    	<div id="clearfooter"></div>
     <div id="links"> <a href="index.php">Home</a> | <a href="cleansingp.php">Cleansing 
    	  Products</a> | <a href="personalhc.php">Personal Health Care</a> | <a href="skincare.php">Skin 
    	  Care</a> | <a href="cosmetics.php">Cosmetics</a> | <a href="misc.php">Misc.</a> 
    	  | <a href="bloodanalysis.php">Blood Analysis</a> | <a href="othertests.php">Other 
    	  Tests</a> <br />
    	  <a href="eegneuro.php">EEG Neurofeedback</a> | <a href="requestinfo.php">Request 
    	  Information</a> </div>
      </div>
    </div>
    </body>
    </html>
    CSS
    Code:
    #clearfooter {height:20px;clear:both}/*approximate height of footer*/
    Just an idea

    Of course you could just set up a new class for the links on that page only and leave your other pages as they are

    Paul

  5. #5
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Paul. I'll probably just use your fix for each page.


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
  •