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 12
  1. #1
    Member
    Join Date
    Mar 2004
    Posts
    40
    Member #
    5208
    I am making my first liquid style site, and am attempting to atatch a footer div to the bottom of a container div.

    This container div stretches depending on the screen size.

    At the moment the footer is absolutely positioned, at a set distance from the top of the page (500px at the moment).

    When I resize the site in the browser window, the footer stays in its rigid position. How can I attach it to the bottom of the container div so that it stretches down with it?

    The site is at:

    http://www.munzamedia.co.uk/onlinelearning-0.1

    Thanks,
    Mark

  2.  

  3. #2
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    dont use absolute positioning. Use relative.

  4. #3
    Member
    Join Date
    Mar 2004
    Posts
    40
    Member #
    5208
    Cheers Jason, but I don't really understand relative positioning. I used it in the past and in Dreamweaver, it would display the web page in a completely messed up way so I stood clear of it.

    I have a solution to my problem now - I placed the footer INSIDE the container div, and used bottom : 0px to stick it to the floor. No problems now.

  5. #4
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    wait just a sec.... Which browser are you using for testing? Theres a huge horizontal scrollbar happening. View it in Firefox, the different elements dont line up. They line up in IE, except 1 element thats causing the horizontal scroll.

  6. #5
    Member
    Join Date
    Mar 2004
    Posts
    40
    Member #
    5208
    Now my menu stretches way off the right of the screen and I can't see why. I thought I had it finished as well.

  7. #6
    Member
    Join Date
    Mar 2004
    Posts
    40
    Member #
    5208
    I am using IE 6 for testing. It's fine in opera too, and I am not good enough a css / html coder to fix the site for them all. The main target is IE but if you have any suggestions about why it isn't working in Firefox I would be happy to listen.

    I just spotted that horizontal thing too, needs some attention.

  8. #7
    Junior Member nickroz's Avatar
    Join Date
    Oct 2004
    Location
    Shelby Twp, MI
    Posts
    24
    Member #
    7772
    You shouldn't use this table in the page:
    Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="77%" valign="top"><h1>Welcome to our site!</h1>
          <p>&nbsp;</p>
          <p>Here you can find out more about our  distance learning.</p>
          <p>We offer an
              MSC in Tourism and Travel Management.</p>
          <p>&nbsp;</p>
          <p>Please select an item from the drop down menu above. Select the item
            that most fits your description</p>      <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>      <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          </td>
        <td valign="top">
    	<div class = "mainimage">
    	  <div align="center"><img src="images/Asian_student.jpg" width="300" height="212"></div>
    	</div>
    	</td>
     
      </tr>
    You should recode it into CSS. <div> the image and float it right; give it
    Code:
    float: right;
    clear: none;
    margin: 25px 30px 0px 0px;
    border-top: 1px solid brown;
    border-right: 1px solid brown;
    border-bottom: 10px solid brown;
    border-left: 1px solid brown;
    This site is best viewed in Internet Explorer 6
    I think that's your biggest problem right there. It's slightly F'd in Safari - the pic box is wide and the brown background on the navbar is too short for the images, so you see whitespace.

  9. #8
    Member
    Join Date
    Mar 2004
    Posts
    40
    Member #
    5208
    I appreciate your comments about me needing to get the site working in other browsers like Safari, but I though hybrid css / table layouts were ok to use as we can take advatages of both that way. I am not criticising, I just wondered why you said "you shouldn't use this table"

  10. #9
    Junior Member
    Join Date
    Nov 2004
    Posts
    1
    Member #
    8236
    One of many reasons to use tables for layout it less coding in the page.

    Here is one site I admin and it is a table based layout with java and a little css.

    www.baptistcollege.edu

    Now compare it with the site i'm doing and also using to learn tableless css layout.

    Also i use very little java in this page.

    www.wfbu.com/index.asp (notice that it is html 4.01 strict)

    Look at the page to get an idea of how i put it together to get my footer to flow and stay at the bottom. Here is the link to the css

    www.wfbu.com/support/wfbu.css

    Nate

  11. #10
    Senior Member james's Avatar
    Join Date
    May 2003
    Location
    Melbourne, AUSTRALIA
    Posts
    364
    Member #
    1352
    I believe one of the latest tutorials goes into using absolute positioning, so it is compatible with W3C standards (that is, works in Moz/Opera) and that works in IE5.5+.

    What you would do according to the W3C standards is put the footer container inside a body container, and give the footer style="position: absolute; bottom: 0px;". The standard says that it should be absolutely positioned relative to the containing element. To make it work in IE, you need to give they body container style="position: relative;", which it has by default anyway. You'll also want to make sure that a long page doesn't end with the content behind the footer, so you'll need to ensure that the padding-bottom of the body element is bigger than the height of the footer element.

    Try this (untested):
    Code:
    <div style="position:relative; margin-bottom: 25px;">
    Body Text
    <div style="position:absolute; bottom:0px;height:20px;">Footer</div>
    </div>
    Things to note: 1) The footer will be right against the bottom of the body element. Try it out by giving the divs 1px borders. If you want to give it X pixels space, set bottom:-Xpx on the footer. 2) In the example there's at least 5 pixels space between the bottom of the body text. If you want it to be Y pixels, set padding-bottomX+Y+20)px on the body element. 3) If the footer get forced to be higher than 20 pixels by a very narrow screen, it will muck up your nifty calculations, and there isn't much you can do because the footer is 'out of the flow'. CSS isn't perfect for liquid layouts unfortunately.
    James H
    Home Page · Mars Page · www.fihsf1.net (formerly www·fihs·net)


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 04:35 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com