Results 1 to 10 of 10

Thread: Div layer problem

  1. #1
    Dukes ate machinaw Zifnab's Avatar
    Join Date
    Oct 2001
    Location
    MI5 headquaters.
    Posts
    1,074

    Default Div layer problem

    On a layout I'm currently working on I'm trying to get a table at the bottom containing the copyright information at the very bottom of the page. I've been trying it using a div layer, as that's what most of the page is made up of, and this is as close as I can get it and yet it appears about 3/4 down the page instead. Any help in getting the bloody thing down there would be much appreciated, even if it isn't via div layering.

    PHP Code:
    </div>

    <
    div id="foot" style=":bou::bou::bou::bou::bou::bou::bou::bou::bou::bou: absolute; width: 779px; height: 20; left: 0px; top: 100%;">
    <
    table cellspacing=0 cellpadding=0>
    <
    td height="20" width="779" bgcolor=9592AB style="border: 1 solid #2A2A28;">Copyright Information</td>
    </
    table>
    </
    div

    I will do this. Nothing in my life matters except this. No moment in my life exists except this moment. I am born in this moment, and if I fail, I will die in this moment.

  2. #2
    ORANGE Dr Unne's Avatar
    Join Date
    Dec 1999
    Posts
    7,394
    Articles
    1
    Contributions
    • Former Administrator
    • Former Developer
    • Former Tech Admin

    Default

    Worked fine when I tested it. It made a purple box that stayed nicely at the bottom of the page. Maybe something else on the page is interfering with this div. I notice youre mixing old-style HTML with CSS. I find it better sometimes to use CSS for all formatting. background-color: instead of bgcolor= for example.

  3. #3
    Dukes ate machinaw Zifnab's Avatar
    Join Date
    Oct 2001
    Location
    MI5 headquaters.
    Posts
    1,074

    Default

    Thank you for your post . I tried what you said and I edited it to the following:

    PHP Code:
    <div id="foot" style=":bou::bou::bou::bou::bou::bou::bou::bou::bou::bou: absolute; width: 779px; height: 20; left: 0px; bottom: 0%;">
    <
    table cellspacing=0 cellpadding=0>
    <
    td style="border: 1 solid #2A2A28; background-color: #9592AB; width: 779px; height: 20px;">Copyright Information</td>
    </
    table>
    </
    div
    That knudged it down right to the tool-bar. The problem now is that it goes down to the tool-bar but no further, so on a site that needs scrolling down on it sticks at that part. Any idea how to get it right to the very bottom of the scrolling distance?
    Attached Images Attached Images

    I will do this. Nothing in my life matters except this. No moment in my life exists except this moment. I am born in this moment, and if I fail, I will die in this moment.

  4. #4
    ORANGE Dr Unne's Avatar
    Join Date
    Dec 1999
    Posts
    7,394
    Articles
    1
    Contributions
    • Former Administrator
    • Former Developer
    • Former Tech Admin

    Default

    Maybe you should post the whole HTML file instead of just that part, because the snippet you posted still works perfectly for me even if I scroll.

  5. #5
    Dukes ate machinaw Zifnab's Avatar
    Join Date
    Oct 2001
    Location
    MI5 headquaters.
    Posts
    1,074

    Default

    *uploads*

    http://www.citadel-realm.com/blarg/

    Just a temporary upload incase it counts as advertising. I could add more random content if your resolution doesn't make it scroll (mine's only 800x600 unfortunatly).

    I will do this. Nothing in my life matters except this. No moment in my life exists except this moment. I am born in this moment, and if I fail, I will die in this moment.

  6. #6
    ORANGE Dr Unne's Avatar
    Join Date
    Dec 1999
    Posts
    7,394
    Articles
    1
    Contributions
    • Former Administrator
    • Former Developer
    • Former Tech Admin

    Default

    I think I misunderstood the question. I don't know how to make it go by the entire scrolling area when setting a position, rather than just the viewable area of the window. Maybe you could set the position of the copyright div relative to the divs that are above it, instead of absolute to the window. Or make one huge div to contain the entire layout, and put some of them aligned to the top, and the copyright one aligned to the bottom. I don't think absolute positioning is going to work. But I'm no CSS expert unfortunately.

  7. #7
    Prinny God Recognized Member Endless's Avatar
    Join Date
    Aug 2000
    Location
    Prinny Moon
    Posts
    2,641
    Contributions
    • Former Cid's Knight

    Default

    Try replacing 'bottom: 0%' into 'top: 100%', it seems to make a difference in my IE.

    And then there is Death

  8. #8
    Dukes ate machinaw Zifnab's Avatar
    Join Date
    Oct 2001
    Location
    MI5 headquaters.
    Posts
    1,074

    Default

    Originally posted by Dr Unne
    I think I misunderstood the question. I don't know how to make it go by the entire scrolling area when setting a position, rather than just the viewable area of the window. Maybe you could set the position of the copyright div relative to the divs that are above it, instead of absolute to the window. Or make one huge div to contain the entire layout, and put some of them aligned to the top, and the copyright one aligned to the bottom. I don't think absolute positioning is going to work. But I'm no CSS expert unfortunately.
    I can give that a try, I'll let you know how it turns out, seeing as that might take me most of the day. o_<
    Originally posted by Master Vivi
    Try replacing 'bottom: 0%' into 'top: 100%', it seems to make a difference in my IE.
    Getting closer, but still no cigar I'm afraid. top: 100% made the bar go directly under the tool-bar, so it's further down than bottom, but still hovering alittle. (updated the file if you want to see).

    My original idea was to have a table with one cell having a height of 100%, then the copyright table placed underneath that. The problem being that the 100% height cell will only seem to reach 100% if there's something inside the cell to make it reach that height (like, say, a transparent image that reachers the right amount of pixels). The problem being that every page would need a different sized transparent image depending on the size of the content, and if content was added a new transparent image would be needed and so on, which would obviously make a very inflexible layout.

    I will do this. Nothing in my life matters except this. No moment in my life exists except this moment. I am born in this moment, and if I fail, I will die in this moment.

  9. #9
    Prinny God Recognized Member Endless's Avatar
    Join Date
    Aug 2000
    Location
    Prinny Moon
    Posts
    2,641
    Contributions
    • Former Cid's Knight

    Default

    I just realized that using 'top: 150%' kicks it low enough for it to be at the bottom (tested with Mozilla and IE).

    And then there is Death

  10. #10
    Dukes ate machinaw Zifnab's Avatar
    Join Date
    Oct 2001
    Location
    MI5 headquaters.
    Posts
    1,074

    Default

    Originally posted by Master Vivi
    I just realized that using 'top: 150%' kicks it low enough for it to be at the bottom (tested with Mozilla and IE).
    Unfortunatly that only works when the content is 150% the hight of one screen. I just pasted a whole lot of text and the bar stayed at the 150% level. Alas. Thanks anyway.

    Come to think of it, if worst comes to worst I'll just set a number of pixels and adjust it to the content. Shouldn't be much trouble at all with exception that each footer would have to be part of the page rather than a php include file. Thank you both for your time and effort, it's been much appreciated.

    EDIT: Well I finally got it working, I put the content, footer and navigation into a seperate table within the div layer, thus the footer goes down with the tables.
    Last edited by Zifnab; 09-27-2003 at 04:41 PM.

    I will do this. Nothing in my life matters except this. No moment in my life exists except this moment. I am born in this moment, and if I fail, I will die in this moment.

Posting Permissions

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