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
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV at the Bottom of a Page?

    Hey guys, me and my friend are recoding our school's website and we need some help with div's. I'll show the coding below and ask why I cant get a div at the bottom of the page like I'd like! Thanks!
    ---------------------------
    HTML
    ---------------------------
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Woodlands Secondary School</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(false);
    //-->
    </script>
    </head>

    <body>
    <div id="Top"><img src="Images/Banner/benebenbe copy.png"></div>
    <div id="Navbar"><center><img src="Images/Buttons/navbar2.gif"><a href="index.html"><img src="Images/Buttons/home.gif" border="0"></a><a href="Academics.html"><img src="Images/Buttons/academics.gif" border="0"></a><a href="Electives.html"><img src="Images/Buttons/electives.gif" border="0"></a><a href="Athletics.html"><img src="Images/Buttons/athletics.gif" border="0"></a><a href="Carrer.html"><img src="Images/Buttons/carrer.gif" border="0"></a><a href="International.html"><img src="Images/Buttons/international.gif" border="0"></a><a href="Aboriginal.html"><img src="Images/Buttons/aboriginal.gif" width="170" height="30" border="0"></a><a href="Teacherlinks.html"><img src="Images/Buttons/Stafflinks.gif" border="0"></a><a href="Studentlinks.html"><img src="Images/Buttons/studentlinks.gif" border="0"></a><a href="Map.html"><img src="Images/Buttons/map.gif" border="0"></a><a href="Aboutus.html"><img src="Images/Buttons/About Us.gif" border="0"></a>
    </center></div>
    <div id="Body" >
    <table id="Body-Table" background="Images/Buttons/bodytemp.gif">
    <tr>
    <td height="40" valign="middle"><center class="style3">
    </center></td>
    </tr>
    <tr>
    <td height="310 valign="top" valign="middle" ><div align= "left"">
    <p><br>
    </p>
    </div></td>
    </tr>
    </table>
    </div>
    <div id="Bottom"><p>This is text</p></div>
    </font>
    </body>
    </html>
    ---------------------------
    CSS
    ---------------------------
    body
    {
    background-color: #003366;
    }

    p
    {
    text-align: center;
    text-decoration: bold;
    }

    .style3
    {
    color: #003366;
    font-weight: bold;
    }

    #Top
    {
    Align: Center;
    Position: absolute;
    Left: 11px;
    Top: 10px;
    Width: 790px;
    Height: 150px;
    Background-color: #000000;
    }

    #Navbar
    {
    Position: absolute;
    Left: 10px;
    Top: 170px;
    Width: 184px;
    Height: 360px;
    Background-color: #003366;
    }

    #Body
    {
    Position: absolute;
    Left: 204px;
    Top: 170px;
    Width: 599px;
    Height: 312px;
    Background-color: #003366;
    }

    #Body-Table
    {
    Left: 204px;
    Top: 170px;
    Width: 599px;
    Height: 312px;
    Background-color: #003366;
    }

    #Bottom
    {
    Left: 10px;
    Top: 560px;
    Width: 800px;
    Height: 30px;
    background-color: #000000;
    }
    ---------------------------
    Screenshot
    ---------------------------


    **IGNORE THE BIG BLUE SCREEN ON THE RIGHT, IT'S MY SECOND MONITOR MESSING WITH THE SCREENSHOT**

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    I just took a quick look at it, but try this:
    Code:
    #bottom {
    position:absolute;
    left: 10px;
    top: 100%;
    width: 800px;
    height: 30px;
    background-color: #000000;
    }
    (Please enclose your code in [ code]/[ /code] next time, thanks)

    If you prefer, you could specify a pixel value for it, but that seems to work for me. (Actually, I'm using 110% on my page...)

  • #3
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, I tried the thing with the CSS by doing...
    Code:
    #bottom 
    {
    position: absolute;
    left: 10px;
    top: 100%;
    width: 800px;
    height: 30px;
    background-color: #000000;
    }
    But now the DIV wont even show up on the page any more. It's simply not there.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Without having looked at it I suppose it’s just outside of your screen because top: 100% will position the top of the element 100% down the positioned parent, i.e. effectively outside that parent because the top border will be at the bottom. If you wanna position something at the bottom why don't you use the appropriate CSS property?

  • #5
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Hey, I can't be perfect all the time.

  • #6
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So what would the correct CSS property be?

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    I thought the answer is obvious but… ah well, I’m gonna save the sarcastic comment.
    Ever thought about using bottom: 0;?

  • Users who have thanked VIPStephan for this post:

    Aceramic (11-02-2007)

  • #8
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    See, now I learned something too... Dreamweaver apperently does not recognize the "bottom:" attribute, so I was unsure of exactly how to use it, since I had never actually seen it used...


    Now I'm off to fix my code.

  • #9
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Dreamweaver apperently does not recognize the "bottom:" attribute
    I'll put that on the list.

  • #10
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Or it could just be me being retarded... Or because I only have old versions... (8 and MX)

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by Aceramic View Post
    […] Dreamweaver apperently does not recognize the "bottom:" attribute […]
    You’ll learn even more here: I’ve said it numerous times and I will say it again: Don’t trust Dreamweaver’s design view! This is not a browser! I mean, OK, Dreamweaver 8 and especially CS3 do a relatively good job at displaying the sites pretty close to what they would appear but you should always preview it in real browsers (and the most standards compliant ones at first) because this is where your website will be seen eventually.

    These are my steps: Write code, save, preview in browser, edit code, save, refresh browser preview, etc… After each step I’m saving and previewing in Firefox. Then you get reliable results.

  • #12
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    I'm sure you've already been told this, but please put your code in code tags next time.

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This seems to work on your original code.


    #Bottom
    {
    position:absolute;
    Left: 10px;
    Top: 560px;
    Width: 800px;
    Height: 30px;
    color:#ffffff;
    background-color: #000000;
    }

    Frank

    http://www.exitfegs.co.uk//AWoodland...%20School.html
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #14
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by VIPStephan View Post
    -snip-Don’t trust Dreamweaver’s design view! This is not a browser!-snip-

    I can't remember the last time I've even looked at the design view in DW... lol


  •  

    Posting Permissions

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