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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts

    absolute positioning and sizing to 100% height of content????

    I've creating a lightbox type effect and have a div that I've positioned absolutly:
    Code:
    #overlay {
    	background-image: url(../images/overlay.png);
    	background-repeat: repeat;
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	z-index: 90;
    	width: 100%;
    	height: 100%;
    }
    This works as intended but with one aspect I'm hoping to be able to address. If I have a situation where my page content drops below the fold (more content then can occupy the screen) and I scroll down - my #overlay div does not stretch to cover my content. It stops and the initial position of the page fold.

    Would anyone have an idea how to make an absolutely positioned div scale (height)?

    Thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You can use javascript by getting the offsetHeight of the body element or you can use fixed positioning. Be aware that IE6 doesn't support position:fixed but you can get it to pretend to support it. http://www.cssplay.co.uk/layouts/fixed.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    mypointofview
    Guest
    Wow, this is pretty mucht what I'm grasping with too - almost.

    I have successfully found code to get a super lightbox effect for all browsers (IE6 and IE7 not really tested, but no complaints yet).

    The essence is quirks mode and the following in the html

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <
    html>

    <
    head>

    </
    head>

    <
    body>

    <
    a href="index.html"><img src="image.jpg" alt="" width=100height=100%></a>

    </
    body>

    </
    html
    But, when I change the DTD to strict mode by replacing the first line by

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd"

    then the image (wich is a bit bigger than the size of my desktop) seems cut off, although it still does auto resize with the browser window - but always with the bottom part not visible (Firefox/Mac). It seems as if the 100% are interpreted differently - not the viewport but the screen window. Could that be?

    What to do ??

    Of course I could stick with quirks mode, but just out of curiosity : is there a way (crossbrowser!!) to get it going in strict mode ??

    PS: as CSS I use

    PHP Code:
    body margin0padding0overflowhiddenbackgroundblack; }
    img bordernone; } 
    Martin

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I told you what you had to do. Since you use javascript to open it in the first place you might as well use javascript to get the height of the page.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    mypointofview
    Guest
    I'm a different guy, Aerospace ! I'm Martin "mypointofview", not "hothousegraphix" It's a slightly different situation but fits in the same topic (lightbox, filling browser window, etc)

  • #6
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Something like:
    Code:
    function getHeight(){
    
    contentHeight = document.documentBody.offsetHeight;
    
    getElementByID("overlay").style.height = contentHeight;
    }
    
    getHeight()
    That seem correct?

    I like this idea...the JS isn't resizing my element dynamically while the window scolls...so...no gittery rendering.

    I read somewhere that the reason this situation occures is that when an element is absolutly position the point of reference is the viewpoint...not the document because the element has been removed from the flow of content.

    It makes sense, but it does seem odd. I will say, that it seems this situation is consistant across all the browsers I checked (ie6, ie7, FF 2.???).

  • #7
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts
    mypointofview: do you have a screenshot.

    When you say cutoff, where is this occuring? Is it at the bottom of your browser window? The right-hand side of the window?

    I would say this first off...I wouldn't put your doc in quirks mode. That will just cause a number of other problems.

    Simple questions first - are your margins set to 0 ? How about padding?

    Just some initial thoughts.

  • #8
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Code:
    function getHeight(){
    elem = document.getElementById("overlay");
    
    contentHeight = document.body.offsetHeight;
    			
    elem.style.height = contentHeight + 'px';
    }
    getHeight()
    Tried this and it's not working.
    Last edited by hothousegraphix; 05-22-2007 at 04:47 PM.

  • #9
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts
    example of problem:

    Open doc and scroll down. The overlay should cover all the content.
    Attached Files Attached Files

  • #10
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts
    solved...the function is correct...my call was not...I had a glitch in my onload function.

    Works like a charm.

  • #11
    mypointofview
    Guest
    Here's the page in strict DTD http://tinyurl.com/3b3kaj

    Here's the same in quirks mode http://tinyurl.com/2ukldc

    In strict mode and in Firefox (Mac) only the width resizes dynamically. In Safari it resizes also the height.

    This is the code:

    PHP Code:
    <style type="text/css">
         
    body margin0padding0overflowhiddenbackgroundblack; }
         
    img bordernone; }
    </
    style>

    </
    head>
    <
    body>

    <
    img src="welcome/startimages/4/full.jpg" alt="" width="100%" height="100%">

    </
    body>
    </
    html
    I'd really like to convert to strict. Do I have to make a table and put all inside?

    PS: the picture is probably copyrighted - I found it somewhere and is only used here for test purposes.
    Last edited by mypointofview; 05-22-2007 at 11:55 PM.

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by mypointofview View Post
    Here's the page in strict DTD http://tinyurl.com/3b3kaj

    Here's the same in quirks mode http://tinyurl.com/2ukldc

    In strict mode and in Firefox (Mac) only the width resizes dynamically. In Safari it resizes also the height.
    The problem is that your code is incorrect for what you want to do. Quirks rendering mode ignores some rules of CSS while standards mode does not. In this particular example, you specified a height for the image but failed to provide an explicit height for an ancestor element. The CSS2.1 Specification (Working Draft) says the following about what should happen:

    The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.
    Thus, your percentage height is simply ignored and replaced with the value auto. As for what should happen after that, I’m not sure. In Firefox, the height ends up being set to a ratio relative to the width.

    With the above in mind, one of the following should cause the image to stretch as you expect:
    Code:
    html, body, img { width: 100%; height: 100%; }
    display: block may also be needed in the above example.

    Code:
    img { position: absolute; width: 100%; height: 100%; }
    position: fixed may be substituted for position: absolute in the above example.

    Other Issues
    You should note that this use of the img element is unsemantic. The correct way to specify a background image is through CSS. Unfortunately, it’ll probably be awhile before stretchy backgrounds are implemented in browsers (not to mention fully specified in the spec). You can make the image semantic though if you pass it off as the document header like in this example.

    I mentioned that your code had some errors relative to what you want to do. However, your code also has some literal errors. See validation results from Validome and the W3C for more information on that. You may want to fix them.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #13
    mypointofview
    Guest
    Wow thanks so much. I used a page code which i had stripped down for this demo. I had forgotten the starting head and html tag!

    Also I learned that with the strict doc type the image needs to "be inside something". I put it inside a div and it validated.

    Thanks again :-) Now I will try to get that streching effect going in strict mode...

  • #14
    mypointofview
    Guest
    Genial. Got it working (Firefox/Mac). The picture stretches across the full view port and is dynamic.

    http://tinyurl.com/2wrvrb

    It validates too

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>
    <
    head>

    <
    meta http-equiv="content-type" content="text/html; charset=utf-8">
    <
    title>Test page with completely stretched image in Strict mode</title>

    <
    style type="text/css">

         
    body {
              
    margin0;
              
    padding0;
              
    overflowhidden;
              
    backgroundblack;
              }
              
         
    img {
             
    bordernone;
             
    positionabsolute;
             
    width100%;
             
    height100%;
             }

    </
    style>

    </
    head>
    <
    body>

    <
    div>

    <
    img src="welcome/startimages/4/full.jpg" alt="">

    </
    div>

    </
    body>
    </
    html
    This is fantastic. I'll use the strict DTD now for my complete site.

    THANK YOU !!!

    Let's hope it also is fine in IE6

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm your image seems to be stretching too much in IE6. What do you intend on doing with the image? I'm guessing you plan on making the rip burn and mix parts of the images links. If thats the case then there is a better way to do this. It may require more code but I think its a little more user friendly and it won't pixelate the image as it is doing now. My recommendation would be to slice up the image into 6 parts, one part for each link, another for that circular thing in the bottom right, another for the text at the bottom, another for the repeating horizontal line on the bottom and another for the repeating vertical line on the right.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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