Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Senior Member Tech0rz's Avatar
    Join Date
    Aug 2004
    Location
    Northwest, Eng
    Posts
    128
    Member #
    7314
    Hey,

    as you can see in this link to the page:

    http://www.mlaz.pwp.blueyonder.co.uk/palmer/index.html

    the layout doesn't go all the way down to the bottom of the page. I made it purposfully smaller so everyone can see what I mean.

    Basically, what is the best way to make sure in every window it goes at least to the bottom of the page, whether 800*600, 1024, 2048 etc. ?

    Or, would I be better rounding off the footer and forget anchoring it to the bottom, so it just goes as far down as the content. The reason this is an option is, between you and me, because there isn't huge amount of content to go on, so there may be a nice amount of blank space between the bottom of the content and the footer, if the footer is anchored all the way down at the bottom.

    Either way I'm curious to know how the above effect of anchoring would be acheived. The layout spanning the height of the browser window, UNLESS the content goes beyond it.

    Thanks,

    -Tech =o

  2.  

  3. #2
    Senior Member Holy Promethium's Avatar
    Join Date
    Jan 2005
    Location
    Scotland
    Posts
    157
    Member #
    8707
    theres an atribute called min-height you know...

    http://www.w3schools.com/css/pr_dim_min-height.asp

  4. #3
    Senior Member Tech0rz's Avatar
    Join Date
    Aug 2004
    Location
    Northwest, Eng
    Posts
    128
    Member #
    7314
    Thanks, I'm aware of that. I tried it but with no success. Would you be so kind as to enlighten me as how to use this property to get the effect I want ?

    Thanks,

    -Tech =o

  5. #4
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    here is a tutorial worth checking out...
    http://www.themaninblue.com/writing/...ve/2005/08/29/

  6. #5
    Senior Member Tech0rz's Avatar
    Join Date
    Aug 2004
    Location
    Northwest, Eng
    Posts
    128
    Member #
    7314
    Excellent, thanks!

    -Tech =o

  7. #6
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    no problem man.. hope it helps!

  8. #7
    Senior Member Tech0rz's Avatar
    Join Date
    Aug 2004
    Location
    Northwest, Eng
    Posts
    128
    Member #
    7314
    Ok well I implemented that technique although it wasn't 100% successful.

    http://www.mlaz.pwp.blueyonder.co.uk/palmer/index.html

    As far as I can see, the content area shouldn't be that high, there is no height specified besides 100%. I want the footer to always be visible, but never away from the bottom of the page, so it's always anchored. When you scroll down to the bottom of the page, and then resize the window, the footer acts as it should and stays stuck to the bottom of the page.

    I've been playing around with it all day but can't seem to get it right. I do have more DIVs than in the tutorial so I'm thinking their properties may not be defined correctly ?

    Hope you can help,

    -Tech =o

  9. #8
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    good job!! i like the gradient on the edges to..

    the header div was out of place it was inside the centered div so i moved it to the content div

    the layout was expanding 100% but was not compensating for the header div which was about 80px..which pushed the footer under the browser window..

    it should work now i tested it in firefox and IE..if you got any more issues just post again..

    Code:
    <div id="container">
        <div id="centered">
    		<div id="content">
    		          <div id="header">
    		          </div>
    			<div id="main-01">
    			</div>
    			<div id="nav">
    				<div id="nav-top">
    				</div>
    				<div id="nav-body">
    				</div>
    				<div id="nav-bottom">
    				</div>
    			</div>
    			<div id="xtra">
    				<div id="xtra-top">
    				</div>
    				<div id="xtra-body">
    				</div>
    				<div id="xtra-bottom">
    				</div>
    			</div>
    		</div>		
    		<div id="footer">
    		</div>
    	</div>
    </div>

  10. #9
    Senior Member Tech0rz's Avatar
    Join Date
    Aug 2004
    Location
    Northwest, Eng
    Posts
    128
    Member #
    7314
    Excellent lol! Such a simple thing, typical...There is another problem however.

    When the window is resized so a vertical scroll-bar appears, then the page is scrolled down, the footer is floating where the bottom of the page used to be.

    http://www.mlaz.pwp.blueyonder.co.uk/palmer/index.html

    I'm stumped on this, I suspect it won't be such a simple solution as before. Any suggestions?

    Thanks,


    -Tech =o

  11. #10
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    did you try using the overflow:
    mabye something like this will work..

    Code:
    html {
    height: 100%; 
    overflow:scroll;
    overflow-x:hidden;
    }


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

create footer that anchors to bottom of web page

Click on a term to search for related topics.
All times are GMT -6. The time now is 07:12 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com