Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV, include and relative height

    Hi.

    I want to make a page with a cell (3 rows) similar to a frameset, but using php include. Everything goes well with the includes and divs except 1 thing I cannot resolve!

    The first row have 100 pixels, the second one must be relative (to adapt to client window), and the third is a foot, with 30 pixels.

    The second row have 2 divs, the above one is a menu, in wich you can click and below it loads other pages in the "include" div. The problem is, I want to make the "include" div scrollable (auto). Everything works fine If I set a height property in PIXELS, but I want to make this div to have height in % (to fits windows size, but it is impossible!!! I tried everything and I cannot make it. When I set height at 100% (to the "include" div), it shows complete, without scrollbars and the foot roow dissapear...
    To make it simple to explain, it's like a frameset top - middle - bottom, but with cells or divs.

    Please someone help me!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello pinino,
    Let's see some code. What have you got so far?
    Put up a test site, that would be best. Then we don't have to guess at anything.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    100% equals the whole screen height. It's doing what you told it to do.

    set it to less % so there is room left for the last element.

    all the heights of your elements added together should equal 100%

  • #4
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi! Thanks for your reply...

    here it is:
    http://funceb.org.ar/_f/test.php

    The div that's have the scrollbar, wich have the height property at 100%

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by pinino View Post
    Hi! Thanks for your reply...

    here it is:
    http://funceb.org.ar/_f/test.php

    The div that's have the scrollbar, wich have the height property at 100%

    here's your CSS
    max-height: 400;
    min-height: 400;
    height: 100%;


    which is it? LOL

  • #6
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    When you use percentage, you always have to ask "percent of what?". And the answer is always "percent of the parent of this element". So if div#child is given a height of 100%, it will be 100% of div#parent. But 100% of what? What size is the parent? If the parent has no size then percent won't work.

    If <body> is the parent, then the body must also have dimensions set because it's parent is <html> which is the only element that contains the full viewport of the browser.

    Also, all your CSS settings must be set in some dimension, such as px, percent, ems, etc. You can't leave them as numbers alone.

    You need to read about doctypes, which are included in the FAQ at the top of this board. Without one, IE is worse than it normally is.

  • #7
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div 2 problems

    I've make that you're suggesting but nothing works. It must be a way to do this... is very simple to undertand but hard to make I think.

    Please take a look a a new example. (Please test in IE, FF and Others)

    http://funceb.org.ar/_f/testdiv.php

    This new example shows everything simplest than before. You can view now the different divs (with ID). The "menu" div and the "include" div are inside of "info" div.
    The "include" div have a php include wich loads the "agenda.php".

    I set a height of 80% / overflow hidden - to the div "info"
    I'm using IE8, and Firefox 3, Safari.

    In Safari and Firefox, it seems to look right, but in IE8, the scrollbar in the div "include" shows disabled... you cannot scroll. This is the FIRST PROBLEM.

    And the SECOND PROBLEM is the HEIGHT in %, because, in all browsers, if you resize the window, you'll note that the foot are not "a real foot" because isn't stick to the bottom of the page...

    http://funceb.org.ar/_f/testdiv.php

    Any idea?

  • #8
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    include

    Hey? Somebody?

    I think the problem is the INCLUDE command. When the php calls "agenda.php", it puts the content of agenda.php inside the div, and this is the problem... I don't know how to fix that...

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello pinino,
    Like drhowarddrfine said, you need to have a DocType. See the link in my sig about DocTypes, there is a sticky at the top of this forum about DocTypes as well.

    Not sure that will fix your problems but it's a good start.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Guys!

    FFFFFFFFFFFFFFFFF.... after several hours and trying everything (what you saying and other things...) I get it to work!!!

    Please take a look:
    http://audioclic.com.ar/test/testdiv.php

    you can test it on IE8, FF 3 and Safari.

    But now I have a little problem, wich -I think- it's easy to resolve...

    If you take a look to the page (http://audioclic.com.ar/test/testdiv.php)
    you'll see the above menu, with submenus, and now the menu is below the main information (with the scroll), what I have to do to set the menu above of all information... I tried to set z-index to the divs, but nothings seems to work... any idea?


  •  

    Tags for this Thread

    Posting Permissions

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