locked
Positioning RRS feed

  • Question

  • No matter what I do my footer covers my images and will not shift down when I preview my work. I am following the tutorial videos. Here is my code, any help is appreciated.

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Expression Tutorial</title>
    <style type="text/css">
    body {
    background-image: url('images/background.gif');
    background-repeat: repeat-x;
    background-color: #FFFFFF;
    }
    .style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    color: #FFFFFF;
    }
    </style>
    </head>

    <body>

    <div style="position: relative; width: 700px; height: 221px; z-index: 1; left: 0px; top: 0px; margin-right: auto; margin-left: auto;" id="wrapper">
    <div style="position: relative; width: 700px; height: 100px; z-index: 1" id="masthead">
    </div>
    <div style="position: relative; width: 300px; z-index: 2; float: left; height: 100px;" id="leftColumn">
    <img alt="Logo" src="images/Logo.png" width="237" height="223" /></div>
    <div style="position: relative; width: 400px; height: 100px; z-index: 3; float: right" id="rightColumn">
    </div>
    </div>
    <div style="position: relative; height: 100px; z-index: 2; background-color: #C0C0C0; left: 0px; top: 3px;" id="footer" class="style1">
    Home | Products | About Us | Contact Us <br />
    Terms of Use | Privacy Policy</div>

    </body>

    </html>

    Sunday, February 24, 2008 7:59 PM

Answers


  • I did a couple of things to fix your problem.

    Not 100% sure all were necessary, but it is working for me. One thing I find helpful in these situtaions is to put a little border around all those divs so you can really see what is going where.

    You have the logo in the left col but you set a height for the left col smaller than the logo height. I increased the left col to 300px.

    I cleared both floats on the footer div. Floats can produce some interesting results.

    I moved the footer into the wrapper div.

    Let me know how this works for you.
    Perry
    Monday, February 25, 2008 6:11 AM

All replies

  • One way to do it is to set the height of your wrapper and your left colum to auto. That way as your image grows ao does your div. Also it looks like you may be using layers to build a page. Not a good idea. Usually when using layers they are by default set to 'absolute' positioning which pulls them out of the normal code flow. Even though you can cahnge tthe positioning, floating a div seem to be more common, but i am still pretty new to this myself, so you may want to get a second opinion. Hope this helps.


    Mike D.
    Monday, February 25, 2008 4:08 AM

  • I did a couple of things to fix your problem.

    Not 100% sure all were necessary, but it is working for me. One thing I find helpful in these situtaions is to put a little border around all those divs so you can really see what is going where.

    You have the logo in the left col but you set a height for the left col smaller than the logo height. I increased the left col to 300px.

    I cleared both floats on the footer div. Floats can produce some interesting results.

    I moved the footer into the wrapper div.

    Let me know how this works for you.
    Perry
    Monday, February 25, 2008 6:11 AM
  • I have a similar problem and don't know how to solve it.  I have one domain that I created with EW (www.lodestarassoc.com/BidAssistant) that works exactly like I want...when the window is minimized, and the right edge of the window is moved to the left to force the content to flow downwards, it forces the footer to go further down and the footer always stays below the content.

    However, I created another domain with EW (www.lodestarassoc.om/ExporTrackInfo) that for the life of me I have not been able to get to work the same way.  In comparing the master.dwt codes and the default.htm codes between these two domains they look exactly the same, but don't work the same.   I suspect it has something to do with the CSS setting but can't find where the difference lies.

    Can anyone advise me how to resolve this?  Should I post the code for either of these websites?

    Tuesday, May 4, 2010 11:12 PM
  • This post has been marked answered, which means many will not look at it again, and it is never true that your design has the same problem as someone elses.

    When you have a question that is new to you, and you do, it is far better to start your own thread.

    Also please check that your links are correct.  Your second one isn't.

     

    Tuesday, May 4, 2010 11:33 PM
  • "Should I post the code for either of these websites?"

    No.

    To be clear; if we can see the sites, we can see the code--all of it--the CSS, the HTML in each page, the links, the javascript, the DOCTYPE, everything. That is why it is SO important that people post links to the site.

    Now I'm gonna go see if I can hunt down the real location of the second link.


    I dream of a better world...a world in which a chicken can cross the road without its motives being questioned.
    Wednesday, May 5, 2010 12:16 AM
  • Well, a coupla things:

    The code doesn't look the same in the footer of the second site. There's this, which isn't in the other one: 
    style="width: 1040px; position: relative; left: 0px; top: 0px"

    I haven't played with it, but I'd start there.

    Personally, I find the way the footer on the first site acts to be weird. It's nonstandard behavior. I can't point to any other professional site that behaves like that. The footer is supposed to stay below ALL the content, not wrap up beside it and behind it if the viewer has a wide viewport. Odd.

    Also, setting the padding by % may cause problems. Browsers suck at math, and since the smallest unit that can be rendered is a single pixel, what happens when the browser has to render 9.457px? Set sizes in whole numbers. The problem may not be visible here (I haven't tried enough), but it is visible under the right (wrong) circumstances.

    It seems you have pasted directly from Word/Publisher/etc., which would explain the
    xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"
    in the DOCTYPE. Get rid of that so as not to confuse things.


    I dream of a better world...a world in which a chicken can cross the road without its motives being questioned.
    Wednesday, May 5, 2010 12:49 AM
  • Sorry about that.   Correct 2nd URL should have been http://www.exportrack.info/ .I will make this a new thread, but will address Bill's comments/suggestions here before doing so.

    Thanks, Bill, for the catch on the style element...I missed that as a difference between the two sites I listed.

    Actually, what I want the behavior to do is to always have the footer to always move below the content and stay to right of the sidebar whenever the user adjusts the size of the window by minimizing it and moving the right side of the window extremely to the left.  That is the behavior I thought I had in the BidAssistant site, but can't get to work in the ExporTrack site.  If you think the behavior in the BidAssistant site is wierd, maybe you can advise me what to do to make it do what I described above.

    Thanks also for the catch on Word/Publisher/ carryover in the DocType.  Not sure how that got there or what it was intended to do, but I will remove it. 

    Thanks for your help to this Newbie!

    Wednesday, May 5, 2010 4:59 PM