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
    Member
    Join Date
    Apr 2013
    Posts
    72
    Member #
    36068
    Liked
    1 times
    Hi!

    I have lots of absolute positions divs in this webpage setup - which is all working quite well. But now I want to put a footer at the bottom of the page that obviously moves up and down as the content expands and contracts. How can I do this?

    The website is here - I have a kind of fixed solution for now, but would like to have it at the bottom always.

    http://shanuea.lockernerd.co.uk/camel/

  2.  

  3. #2
    Senior Member kralcx's Avatar
    Join Date
    Jan 2010
    Location
    3rd Planet from the Sun
    Posts
    140
    Member #
    20799
    Liked
    18 times
    If you want the footer to stay at the bottom of the page; the footer and only the footer should be absolute positioned.

  4. #3
    Member
    Join Date
    Apr 2013
    Posts
    72
    Member #
    36068
    Liked
    1 times
    Thanks. Two problems - the footer needs to 'adjust' as the content above expands and contracts. Also there are some elements in the content that need to be absolute positioned for z-index and such.

  5. #4
    Senior Member kralcx's Avatar
    Join Date
    Jan 2010
    Location
    3rd Planet from the Sun
    Posts
    140
    Member #
    20799
    Liked
    18 times
    According to W3 Schools "z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)"; so I believe you don't have to have absolute positioning for the z-index to work.

    For help with your footer check out sticky footer

  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    If you're locked into having the other page elements absolutely positioned (which I'd like to impress upon you that there may be better ways to do whatever it is you're doing), you could just put the footer in as a child of the main div, absolutely positioned inside it with top:100%;

    But man, there's gotta be a better way to do all of it. There's rarely a good reason to use AP for layout elements.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    As Ron said, there generally isn't a reason to use absolute positioning for content elements. It can be used for menus and things of that nature if you have experience and know what you're doing, but since absolute positioning breaks up document flow, you should only use it when you intend to do just that.

    Let's take your wrapper for instance. If you want it to be centered on the page, you should be using:
    Code:
    margin:  0px auto;
    width:  1587px; /* by the way, you'll want to adjust the width at some point. */
    Basically, you'll want to blow up what you've done and start again. Once you do that, if you still want your fixed footer (and Ron gave you the HTML5 version of it...the XHTML version uses a div instead), you can put it in then.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  9. #8
    Member
    Join Date
    Apr 2013
    Posts
    72
    Member #
    36068
    Liked
    1 times
    Thanks for the feedback guys. I'll definitely not use absolute positioning next time. I did come up with a not too bad solution though. Seeing as most of the pages are the same size except for the portfolio area I've put an AB positioned nav bar down the bottom, that disappears once you start navigating the portfolio.
    Not perfect, but it works well enough.

    Do you know why the bottom nab bar doesn't load the images until I put the mouse over them?
    Here's the code for one of those buttons -

    CSS:
    #portmini {
    float: left;
    margin: 0px;
    padding: 0px;
    }

    HTML:
    <div id="portmini"><img src="assets/images/portminiwhite.png" width="132" height="41" id="Image4" onclick="javascript:second('portcontent'); javascript:showonlyone('portcontainer'); MM_showHideLayers('homeline','','hide','contactlin e','','hide','portline','','show','cvline','','hid e','scrollcontainer','','show','portorange','','sh ow','qrtsorange','','hide','silverorange','','hide ','crestorange','','hide','pinorange','','hide','v oodooorange','','hide','charlieorange','','hide',' reportorange','','hide','tafeorange','','hide','po sitiveorange','','hide','hiporange','','hide','mos aicorange','','hide')" onmouseover="MM_swapImage('Image4','','assets/images/portminiorange.png',1)" onmouseout="MM_swapImgRestore()"/></div>

  10. #9
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Not sure, though there is a much easier way to do what you're doing. Try this much less complicated approach:

    HTML Code:
    <div id="portmini"></div>
    Code:
    #portmini{
      background:url('http://shanuea.lockernerd.co.uk/camel/assets/images/portminiwhite.png');
      float: left;
      margin: 0px;
      padding: 0px;
      height:41px;
      width:132px;
    }
    #portmini:hover{
      background:url('http://shanuea.lockernerd.co.uk/camel/assets/images/portminiorange.png');
    }
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  11. #10
    Member
    Join Date
    Apr 2013
    Posts
    72
    Member #
    36068
    Liked
    1 times
    Ah cool! Thanks for that. Does that preload the hover image on startup though?


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
  •  
All times are GMT -6. The time now is 09:23 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com