SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Quake 1 Addict CreedFeed's Avatar
    Join Date
    Feb 2002
    Location
    Milwaukee, WI
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to achieve this?

    Here's what I'm trying to do:

    PHP Code:
    +----------------+
    |  
    header img    |
    +----------------+
    |  
    menu bar      |
    +----------------+
    |                |
    |                |
    |  
    page body     |
    |                |
    |                |
    +----------------+
    |  
    footer        |
    +----------------+ 

    I have a header image at the top, a menu bar right below that, and the page body. I want to have the footer display at the bottom of the browser if the page is not scrollable and if it is scrollable, it simply appears at the bottom. The page body should extend to the footer at the bottom of the page if the page is not scrollable.

    How would you go about achieving this without using tables?
    -- Steve Caponetto
    Quake 1 Resurrection :: CreedFeed

  2. #2
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <div id="header"></div>
    <div id="menu"></div>
    <div id="content"></div>
    <div id="footer"></div>
    Aaron Brazell
    Technosailor



  3. #3
    Quake 1 Addict CreedFeed's Avatar
    Join Date
    Feb 2002
    Location
    Milwaukee, WI
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I know that but I mean how do you achieve the stetching of the content section to be the height of the browser and the footer to appear at the bottom of the browser window if it is a non-scrollable page?
    -- Steve Caponetto
    Quake 1 Resurrection :: CreedFeed

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    This method is a little buggy on Mac browsers, but it's the only way I know of to get the site working the way you want without the use of tables.
    CSS:
    Code:
    html, body {
      height: 100%;
    }
    #container {
      height: 100%;
    }
    /*other style rules as needed */
    HTML:
    HTML Code:
    <html>
    <head>
    </head>
    <body>
    <div id="container">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="content"></div>
    <div id="footer"></div>
    </div>
    </body>
    </html>

  5. #5
    Quake 1 Addict CreedFeed's Avatar
    Join Date
    Feb 2002
    Location
    Milwaukee, WI
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I've almost got it ... the page is here:

    http://new.andtogether.com/test.html

    CSS is here:

    http://new.andtogether.com/layout.css

    It works fine in IE 6 and Netscape 7.0

    A few problems: in Netscape 7.0 the "container" section which has a black background only extends 3/4ths of the way down so the rest of the "content" and "footer" sections do not have a black border on the left and right. It works fine in IE 6 though. Any ideas? I assume it's because I set the "container" to be a height of 100% and then the "content" section to also be 100% height so it extends beyond the container's 100% height. ???

    Right now the "content" section has one line of text. My ideal thought was to have the footer display at the bottom of the page if the window isn't scrollable. Right now the page isn't scrollable, however (because of the 100% height I'm assuming) the page ends up scrolling and the footer is not viewable without scrolling. Is it possible to prevent the scrolling from occuring if it's not necessary (depending on the heigh tof the "content" section)?
    -- Steve Caponetto
    Quake 1 Resurrection :: CreedFeed

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

    Heres a solution that works in Ie6 and Mozilla 1.2 (Opera doesn't like it).

    It seems to keep the footer at the bottom of the screen until the content reaches it.

    Anyway you may be able to use some of it :

    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>
    <title>SpiritCreek.com</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html, body {
    	height: 100%;
    	margin: 0px auto;
    	padding: 0px;
    	background: #4f4f4f url(http://new.andtogether.com/img/bg.gif);
    	text-align: center;
    }
    #container {
    	width: 701px;
    	height: 100%;
    	margin: 0px auto;
    	padding: 0px;
    	text-align: center;
    	background: #b0b3bf;
     position:relative;
    }
    #header {
    	width: 699px;
    	margin: 0px auto;
    	background: #60636f;
    	border-bottom: 1px solid #000000;
    	text-align: center;
    }
    #menu {
    	width: 699px;
    	height: 26px;
    	margin: 0px auto;
    	background: #50535f;
    	border-bottom: 1px solid #000000;
    	text-align: center;
    }
    #content {
    	width: 699px;
    	margin: 0px auto;
    	background: #b0b3bf;
    	text-align: left;
    }
    #footer {
    	position: absolute;
     bottom:0;
     left:1px;
     width: 699px;
    	height: 45px;
    	margin: 0px auto;
    	background: red;
    	border-bottom: 1px solid #000000;
    }
    </style>
    </head>
    <body>
    <div id="container" > 
      <div id="header"></div>
      <div id="menu"></div>
      <div id="content"> 
       Testing page body
    	
       <p>&amp;nbsp;</p>
    	<!-- these nbsp's are needed to stop content disappearing under footer -->
    	<p>&amp;nbsp;</p>
      </div>
      <div id="footer">Testing footer</div>
    </div>
    </body>
    </html>
    Hope this helps.

    Paul

  7. #7
    Quake 1 Addict CreedFeed's Avatar
    Join Date
    Feb 2002
    Location
    Milwaukee, WI
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thanks a ton for that. Although there is still some things I need to alter/fix, that pretty much accomplishes what I'm looking for.

    What is the problem with the above in Opera? Other than the fact that the footer doesn't touch the bottom of the page, it works fine in Opera.

    Again, thanks for the above code!
    -- Steve Caponetto
    Quake 1 Resurrection :: CreedFeed

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

    What is the problem with the above in Opera?
    I have Opera 6 and the footer stays about half way down the screen. It should still be usable though. I expect Opera 7 is better.

    Glad you found the code is of some use

    Paul

  9. #9
    Quake 1 Addict CreedFeed's Avatar
    Join Date
    Feb 2002
    Location
    Milwaukee, WI
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I viewed it in Opera 7 and it works, just that the footer doesn't completely touch the bottom of the browser window - there's about a 10-15pixel gap.

    Again, thanks for the code. I appreciate it (I'm still learning to design using CSS and not use tables - I've never dont a pure CSS layout before).
    -- Steve Caponetto
    Quake 1 Resurrection :: CreedFeed


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
  •