SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Need help positioning a global footer

    I have a global footer i wnt to use on my site that will auto-position itself at the under the bottom-most element of the current page. My css for the footer is:

    #footer {
    font-size: 10pt;
    font-family: verdana, arial, courier;
    text-decoration: none;
    position: relative;
    top: 475px; left: 0px;
    width: 765px; height: 56px;
    visibility: visible;
    }

    This does what I want it to do, except that on other pages in my site (which are created on the fly), the footer ends up way down on the page. How can I get my footer to display just below the lowest page element? I've tried a number of things but can't make anything work right. Arg!!
    You can see what I mean by clicking here:
    Example 1
    Then clicking here:
    Example 2
    Thanks all.

  2. #2
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    display: block;
    clear: all;

    don't use positioning


    Visit http://zvon.org and bookmark the CSS2 reference.

  3. #3
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy I just implimented that, but....

    I followed your suggestion, and it works for most of the pages, except this one:My Storefront

    Is there anything else I can try?

  4. #4
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without looking too deep into the source code, it appears like you have positioning going on in there.

    HTML is supposed to be a fluid medium. Thus, CSS has two (primary) display styles... block, and inline.

    Block display style, in theory, consumes the entire width of the containing block, but only as much height as necessary. HTML examples of block elements are <DIV>, <P>, <H1>, etc

    Inline elements, on the other hand are simply displayed inline. Examples being <IMG>, <SPAN>, etc.

    Why does this matter, you ask? Well, this all relates to fluid content, wherein the top of the next block starts at the bottom of the previous block, etc. (give and take for margin)

    Once you start using positioning, (eg, left: 30px; top: 20px; ) the content is no-longer inline or block. It is now positioned and doesn't count in the stream of things. So the next block will start where the previous block ended, skipping over the current (positioned) block.

    Does all this make sense? I'm not often the best at explaining such things...

  5. #5
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool Thanks, Randeem

    Thank you, randeem, for the block explination. If you looked at my source, you probably noticed that I have put everything in <DIV>'s, so I basically have a block layout (except that I used positioning).
    Now, my big question is: how do I rewrite my stylesheet so that I refrain from using positioning, but still have my page look essentially the same as it does now? Can you point me in the right direction?

    You have already been a big help. Thank you.

  6. #6
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool Thanks, Randeem

    Thank you, randeem, for the block explination. If you looked at my source, you probably noticed that I have put everything in <DIV>'s, so I basically have a block layout (except that I used positioning).
    Now, my big question is: how do I rewrite my stylesheet so that I refrain from using positioning, but still have my page look essentially the same as it does now? Can you point me in the right direction?

    You have already been a big help. Thank you.

  7. #7
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Best suggestion I could give you is to start over with a new style sheet. YOu can remove all position elements and save as. THen look at your page and see what that does for you. It will probably look really bad at first but don't panic, the fix is probably closer than you think initially.

    I had to do this with a particular page that I was working on, not because I was using positioning but because I was only using NS6.2 for testing. After several hours of work, the page finally looked like I wanted it to. Then I looked at it in IE6.0 and it was a horrible mess. I got really discouraged, and posted a message to this forum for help. Then I just started working on one thing at a time until I got it 95% right. I couldn't get that last 5% problem fixed so I started over from scratch with a new stylesheet and then I looked at both NS and IE after every change/addition I made to the stylesheet.

    THe result was a page that looks 99.5% the same in both browsers, and I'm only using positioning to the degree that I'm defining a few zones in my page before I ever add any content. I like to give the zones a different background-color so that I can see them and make sure they are all playing nice together. Then when I'm satisfied the zones are behaving, I remove the background-color or set it to the desired color for the page.

    A great resource of page templates is:

    http://www.glish.com/css/ and another is:

    http://www.bluerobot.com/web/layouts/

    Hope that helps!

  8. #8
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Thanks, all

    Thank you ChrisOSX. That was very helpful. Yes I will try some of those templates. Thank you and Radeem for taking the time.

    garlinto

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    clear: all????

    The CSS2 specifications state that the clear property can have values of "none", "left", "right", "both", and "inherit."

    randem, why do you say to use clear: all?

  10. #10
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: clear: all????

    Originally posted by ed644
    The CSS2 specifications state that the clear property can have values of "none", "left", "right", "both", and "inherit."

    randem, why do you say to use clear: all?
    Shooting from the hip. I meant to say clear: both;

    Once you learn 10 or more development languages, you start running into situations where you use terminology from one in another by habit. This one always gets me, and I end up going back and having to change it to say both.

    Thanks for pointing that out.


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
  •