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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Posts
    255
    Thanks
    113
    Thanked 0 Times in 0 Posts

    Positioning My Disclaimer Footer

    http://www.hogwarts-rpg.net/disc-test

    That's the page I'm testing my disclaimer footer on (which is the large text in red). I want it to be at the bottom of every page, moving further down, of course, if the content extends further than usual. I've never been that good at CSS positioning, to be honest. The CSS for the disclaimer is:

    Code:
    #disclaimer {
       text-align: center;
       font-size: x-large;
       color: red;
       position: absolute;
       bottom: 0px;
       width: 100%;
       height: 60px;
    }
    View the source code of the above page for everything. I wasn't sure if it would all fit in this post. For testing purposes, all the CSS is located between the head tags instead of being in an external file, so everything's there.

    Thanks!
    Last edited by Joseph Witchard; 12-22-2010 at 08:49 AM.

  • #2
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    614
    Thanks
    48
    Thanked 64 Times in 64 Posts
    Add 'clear: both;' to the CSS. This will make the footer go below all content that appears chronologically before it in your HTML page rather than floating between it or next to it or whatever (make sure it's the last thing on your page).
    "Yeah science!"
    Online Science Tools

  • Users who have thanked djh101 for this post:

    Joseph Witchard (12-22-2010)

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Posts
    255
    Thanks
    113
    Thanked 0 Times in 0 Posts
    Should I remove any of the positioning code? And could you explain why it didn't do what I thought it would do? Just so I'll understand CSS' workings better?

  • #4
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    614
    Thanks
    48
    Thanked 64 Times in 64 Posts
    absolute puts your element in a fixed position, relative to its parent (if parent has a relative position). Meaning, it's not moving, unless the parent moves (the div that is containing it). The parent element might not be as big as you think it is- if it doesn't stretch to the bottom of the page, your footer isn't going to go to the bottom of the page. Clear means that your element can't have anything to the left or to the right of it, so it will just keep floating down until it's all by itself (unless there are elements below it).

    And yes, get rid of absolute positioning- absolute positioning tends to just mess up your layout if you're not entirely sure what you're doing with it.
    "Yeah science!"
    Online Science Tools

  • Users who have thanked djh101 for this post:

    Joseph Witchard (12-22-2010)

  • #5
    Regular Coder
    Join Date
    Oct 2008
    Posts
    255
    Thanks
    113
    Thanked 0 Times in 0 Posts
    All right, thanks for the help

  • #6
    Regular Coder
    Join Date
    Oct 2008
    Posts
    255
    Thanks
    113
    Thanked 0 Times in 0 Posts
    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" xml:lang="en" lang="en" dir="ltr">
    <head>
    <title>TEST</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <style type="text/css">
    html, body {
       margin: 0px;
       padding: 0px;
       height: 100%;
    }
    
    #wrapper {
       min-height: 100%;
       width: 800px;
       position: relative;
       margin: 0px auto;
    }
    
    #div1 {
       border: 1px solid #000000;
       position: relative;
       margin: 0px auto;
       width: 300px;
       height: 300px;
    }
    
    #div2 {
       border: 1px solid #000000;
       position: absolute;
       bottom: 0px;
       width: 100px;
       height: 100px;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="div1">
    </div>
    <div id="div2">
    </div>
    </div>
    </body>
    </html>
    Now that code worked pretty much the way I expected (div2 appearing at the bottom of the wrapper). I'm just trying to understand what I'm doing wrong to make CSS positioning so quirky (seeming quirky to me, I mean). When I do different tests sometimes it works like I assume it would and sometimes it's way off to what I expect. I've looked for positioning tutorials on Google, but the only ones I find just explain how to get started (like the difference between relative and static). Can anyone clarify why it seems that way?

    ((Sorry for the double-post. I wasn't sure if the thread marked itself as updated if I just edited my previous post.))

    EDIT: I think I've got it now. Thanks!
    Last edited by Joseph Witchard; 12-22-2010 at 08:48 AM.

  • #7
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    614
    Thanks
    48
    Thanked 64 Times in 64 Posts
    I'm not too good when it comes to styling. Just practice and get down what everything does and when it should be used. There's not much to CSS, a basic tutorial can teach you pretty much everything you need to know. I think your problem was that you were positioning it absolutely, but the div it was inside didn't reach the bottom of the page. Styling problems usually come from errors in your code. Browser are built to compensate for errors, but if, say, you were trying to stuff a 500px tall div inside a 100px tall div, you might get different displays depending on the browser you use as well as the HTML and how other elements are positioned.
    "Yeah science!"
    Online Science Tools


  •  

    Posting Permissions

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