Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts

    ALA footer and floats

    I'm attempting to make a footer, following the tutorial over at ala. As you can see it's not going as well as expected. Also I have a slight problem with the name and date on my content box, floats need a width, but I want it to stay fluid.
    Last edited by Antoniohawk; 03-06-2004 at 04:12 AM.

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I can't find it's, I get file not found
    Shawn

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    LOL, problem resolved, try now.

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're not clearing any of your floats. try adding

    clear: both;

    to the footer definition.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    No go

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I didn't dig into the linkMenu.css file, so #navCont isn't positioned right, but I think maybe you can get it
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="linkMenu.js"></script>
    <link rel="stylesheet" type="text/css" href="linkMenu.css" />
    
      <title>[Manic Pyro] :: footer escapade</title>
    
    <style type="text/css">
    body {
      margin: 20px;
      font: 8pt verdana, arial, helvetica, sans-serif;
      background: #EEE;
      color: #424242;
      text-align: center;
    }
    
    #container {
      position: relative;
      min-height: 100%;
      height: 100%;
      voice-family: "\"}\"";
      voice-family: inherit;
      height: auto;
      background-color: red;
    }
    
    html>body #container {
      height: auto;
    }
    
    div#title {
      padding: 5px;
      border: 1px solid gray;
      background-color: #B2B2B2;
    }
    
    #title div {
      background-color: #424242;
    }
    
    div#content {
      padding: 5px;
      margin: 1px 0 1px 141px;
      background: #B2B2B2;
      border: 1px solid gray;
      text-align: left;
      position: relative;
    }
    
    /* replacement for buggy hr's */
    .hr {
      margin: 0;
      padding: 0;
      border-bottom: 1px dotted #FFFFFF;
    }
    
    html .hr {
      border-bottom: none;
      padding: 1px;
      background: url(images/hr2.gif) repeat-x bottom;	
    }
    /* end hr */
    
    /* implementation of a vertical rule (vr) object */
    .vr {
      background: url("image/vr.gif") repeat-y;
      width: 1px;
      margin-top: 5px;
      margin-bottom: 5px;
    }
    a:link, a:visited, a:active, a:hover {
      color: #424242;
      background-color: transparent;
      text-decoration: none;
      border-bottom: 1px dashed #424242;
      font-weight: bold;
    }
    div#content p {
      line-height: 1.25em;
    }
    
    .postHeader {
      background: #989898;
      border: 1px solid gray;
      border-left: none;
      border-right: none;
      padding: 2px 0;
      color: #EEE;
      margin-bottom: 1em;
      position: relative;
      width: 100%;
    }
    
    .postHeader .name {
    	float: left;
    	margin-left: 2px;
    	}
    
    .postHeader .date {
    	float: right;
    	margin-right: 2px;
    	}
    #footer {
      padding: 5px;
      margin: 0 auto;
      border: 1px solid #808080;
      background-color: #B2B2B2;
    }
    
    #footer span a {
      padding: 1px;
      margin: 0;
      background: #CCC;
      border: 1px solid gray;
    }
    .clear {
    	clear: both;
    	}
    </style>
    </head>
    <body>
    
    <div id="container">
    
    <div id="title">
      <div>
        <img src="images/manicTitle3.gif" alt="Manic Pyro header image" style="width: 419px; height: 100px;"/>
      </div>
    </div>
    
    <div id="content">
      <div class="postHeader">
        <span class="name">Antoniohawk</span><span class="date">1.17.2004</span>
    	<br class="clear"/>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam orci. Nam vitae orci. Aenean augue. Mauris fermentum condimentum ligula. Pellentesque et sapien sed est interdum varius. In nonummy. Proin nec tortor. Ut ultrices. Nam metus magna, malesuada ut, vestibulum eget, bibendum eu, quam. Aliquam laoreet sagittis arcu. Nunc massa nulla, faucibus at, venenatis nec, venenatis sed, augue. Donec fermentum. Phasellus accumsan nulla ut ligula. Duis eros felis, ultrices ac, bibendum eget, cursus at, risus. Fusce feugiat elit sit amet lorem. Maecenas congue elit et nisl. Ut eget neque sit amet lorem lobortis cursus.
    </p>
    <p>
    Nullam eleifend velit et diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin laoreet. Aenean pede. Duis lacinia molestie elit. Mauris aliquam tortor quis nibh. Etiam tristique, diam non tempus tincidunt, justo risus semper elit, quis rhoncus nunc diam sed quam. Donec eu dui in felis placerat consectetuer. Sed at dolor. Sed varius. In pretium ligula et velit. Mauris magna dolor, feugiat molestie, blandit ac, euismod in, arcu.
    </p>
    <p>
    Quisque lorem ligula, <a href="#">vulputate</a> nec, porta non, aliquam et, enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In hac habitasse platea dictumst. Mauris luctus, odio vel ornare elementum, ipsum sem sagittis libero, ac elementum ante augue vel orci. Donec vel sapien. Curabitur ligula ipsum, mollis non, hendrerit a, tincidunt in, elit. Sed et magna. Cras laoreet eleifend risus. Vestibulum ac libero quis turpis cursus pharetra. Pellentesque porttitor purus vitae nulla. Donec a lacus. Pellentesque in tellus.
    </p>
    <p>
    Mauris ut tellus eget elit commodo pulvinar. Mauris magna odio, egestas sit amet, cursus quis, cursus sit amet, lectus. Ut diam wisi, convallis ac, sodales sed, pharetra at, pede. Mauris arcu. In sit amet pede. Donec accumsan. Cras mi urna, nonummy sit amet, tristique viverra, porta ut, turpis. Aenean convallis orci ac mi. Morbi sem. Quisque eleifend wisi vitae massa. Proin quis nibh sed tellus auctor suscipit. Nullam ut mi eu mi eleifend commodo. Aliquam iaculis urna sit amet massa. Nulla magna odio, adipiscing eget, eleifend id, tempor at, dolor. Morbi vel felis. Aliquam sagittis wisi vitae dolor. Nullam vitae eros vel tellus faucibus accumsan. Vestibulum tortor dolor, pulvinar ut, semper eget, ornare non, odio.
    </p>
    <p>
    In hac habitasse platea dictumst. Sed commodo porta libero. Aenean adipiscing nisl ac lectus. Donec placerat fermentum ligula. Nullam id eros. Nam egestas elit eget nunc. Sed molestie pulvinar massa. Ut suscipit. Sed est nibh, porta in, egestas sit amet, congue sed, libero. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent fringilla magna ac velit. Donec at dolor. Donec et massa nec massa cursus fermentum. Donec erat lacus, tristique sit amet, tincidunt ut, mattis at, urna. In sed wisi quis pede tempor suscipit. In tellus mauris, mollis quis, dictum non, vestibulum vel, purus. Pellentesque aliquet ullamcorper ligula.
    </p>
    </div>
    
    <div id="navCont">
    <ul>
      <li><a href="#" onClick="door('item1')"><img id="img_master" src="images/minus.gif" alt="menu item" />animals</a>
        <ul id="item2">
          <li class="parent"><a href="#" onClick="door('item2')"><img id="img_parent1" src="images/minus.gif" alt="menu item" />birds</a>
            <ul id="item3">
              <li><a href="#"><img src="images/item.gif" alt="menu item" />sparrow</a></li>
              <li><a href="#"><img src="images/item.gif" alt="menu item" />finch</a></li>
              <li><a href="#"><img src="images/item.gif" alt="menu item" />blue jay</a></li>
            </ul>
          </li>
        </ul>
        <ul id="item4">
          <li class="parent"><a href="#" onClick="door('item3')"><img id="img_parent2" src="images/minus.gif" alt="menu item" />fish</a>
            <ul id="item5">
              <li><a href="#"><img src="images/item.gif" alt="menu item" />catfish</a></li>
              <li><a href="#"><img src="images/item.gif" alt="menu item" />trout</a></li>
              <li><a href="#"><img src="images/item.gif" alt="menu item" />herring</a></li>
              <li><a href="#"><img src="images/item.gif" alt="menu item" />cod</a></li>
              <li><a href="#"><img src="images/item.gif" alt="menu item" />swordfish</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>  
    </div>
    
    
    <div id="footer">
      [Linkage] :: <a href="http://hardforum.com">Hard Forums</a> : 
      <a href="http://www.codingforums.com">Coding Forums</a> : 
      <a href="http://www.google.com">Google</a> ::
      <span>
        <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.graphics-forum.com%2Fmanicpyro%2F">xhtml 1.1</a>
      </span>
    </div>
    
    </div>
    
    </body>
    </html>
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Works beautifully Beetle, thanks a lot. Couple of questions. I have managed to get the navCont box positioned correctly in mozilla, but it seems that ie wants to center it, even when i declare it as left: 0;. Also, is there anyway to make the navCont box as tall as the content box, without setting a pixel height?
    Last edited by Antoniohawk; 03-06-2004 at 04:56 PM.

  • #8
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I don't know, but you might want to add a return false; to the links in your menu, it's at the bottom and the page keeps scrolling up.
    Although I think beign at the bottom is not intended
    IE5.5 btw
    Shawn

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Thanks alot, I was wondering how to accomplish that.

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Still having problems, can someone please help me with the navCont problem mentioned above?

  • #11
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I didn't look at your code but could you be having the same problem of not defining the menu width as you were having here?

    BTW: That link doesn't seemed to have been fixed.
    Did you scrap that layout all together?
    That one seems better to me.

    .....Willy

  • #12
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Sorry, I have a bad habit of posting before I actually upload the new file, check it out now.

  • #13
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Willy? You never came back.

  • #14
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Still looking for help...


  •  

    Posting Permissions

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