...

View Full Version : absolute positioning and sizing to 100% height of content????



hothousegraphix
05-22-2007, 04:30 AM
I've creating a lightbox type effect and have a div that I've positioned absolutly:


#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

_Aerospace_Eng_
05-22-2007, 07:57 AM
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

mypointofview
05-22-2007, 09:08 AM
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



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

<html>

<head>

</head>

<body>

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

</body>

</html>

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


<!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


body { margin: 0; padding: 0; overflow: hidden; background: black; }
img { border: none; }

Martin

_Aerospace_Eng_
05-22-2007, 09:36 AM
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.

mypointofview
05-22-2007, 09:52 AM
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)

hothousegraphix
05-22-2007, 05:06 PM
Something like:

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.???).

hothousegraphix
05-22-2007, 05:13 PM
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.

hothousegraphix
05-22-2007, 05:37 PM
function getHeight(){
elem = document.getElementById("overlay");

contentHeight = document.body.offsetHeight;

elem.style.height = contentHeight + 'px';
}
getHeight()


Tried this and it's not working.

hothousegraphix
05-22-2007, 06:27 PM
example of problem:

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

hothousegraphix
05-22-2007, 06:46 PM
solved...the function is correct...my call was not...I had a glitch in my onload function.

Works like a charm.

mypointofview
05-23-2007, 12:24 AM
Here's the page in strict DTD http://tinyurl.com/3b3kaj (http://tinyurl.com/3b3kaj)

Here's the same in quirks mode http://tinyurl.com/2ukldc (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:


<style type="text/css">
body { margin: 0; padding: 0; overflow: hidden; background: black; }
img { border: none; }
</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? :eek:

PS: the picture is probably copyrighted - I found it somewhere and is only used here for test purposes.

Arbitrator
05-23-2007, 03:25 AM
Here's the page in strict DTD http://tinyurl.com/3b3kaj (http://tinyurl.com/3b3kaj)

Here's the same in quirks mode http://tinyurl.com/2ukldc (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 (http://www.w3.org/TR/CSS21/visudet.html#the-height-property) (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:

html, body, img { width: 100%; height: 100%; }
display: block may also be needed in the above example.


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 (http://www.w3.org/TR/css3-background/#the-background-size) 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 (http://www.jsgp.us/demos/CF113809.html).

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 (http://www.validome.org/validate/?uri=http%3A%2F%2Fmartinlosangeles.ath.cx%3A1004%2F~martin%2Fmmworkshop%2Findexstrict.php) and the W3C (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmartinlosangeles.ath.cx%3A1004%2F~martin%2Fmmworkshop%2Findexstrict.php) for more information on that. You may want to fix them.

mypointofview
05-23-2007, 07:39 AM
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...

mypointofview
05-23-2007, 08:15 AM
Genial. Got it working (Firefox/Mac). The picture stretches across the full view port and is dynamic.

http://tinyurl.com/2wrvrb

It validates too :)


<!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 {
margin: 0;
padding: 0;
overflow: hidden;
background: black;
}

img {
border: none;
position: absolute;
width: 100%;
height: 100%;
}

</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 !!! :thumbsup: :thumbsup:

Let's hope it also is fine in IE6 :eek:

_Aerospace_Eng_
05-23-2007, 09:45 AM
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.

mypointofview
05-23-2007, 07:42 PM
Cool tip. I have not done any slicing technique yet. For now this is just a random test image. The final will be a big photography for a photo site.

As far as IE6 is concerned, I got the same bad news from a friend yesterday. What should one say... So in the light of the still large IE6 user base I have to use quirks mode - the image is fine then.

Below a link to the same 4.01 strict validated code, but now back to quirks mode to accomodate IE6:

http://tinyurl.com/2wrvrb

In some years when IE6 is not used anymore, all there's then to do is change the DTD :)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!-- Quirks mode for IE6 -->

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>4.01 strict validated - but back to quirks mode for IE6</title>

<style type="text/css">

body {
margin: 0;
padding: 0;
overflow: hidden;
background: black;
}

img {
border: none;
position: absolute;
width: 100%;
height: 100%;
}

</style>

</head>
<body>

<div>

<img src="image.jpg" alt="">

</div>

</body>
</html>

_Aerospace_Eng_
05-23-2007, 08:47 PM
Try this

<!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>4.01 strict validated</title>
<style type="text/css">
html,body,#container {
margin:0;
padding:0;
height:100%;
background:#000;
overflow:hidden;
}
#container img {
height:100%;
width:100%;
display:block;
}
</style>
</head>
<body>
<div id="container"> <img src="welcome/startimages/4/full.jpg" alt=""> </div>
</body>
</html>
Unless I missed something I didn't see a need to make the image position:absolute. I tested the above in FF2.0.0.3, IE6+, and Opera 9.20 and all seem to play well.

mypointofview
05-24-2007, 04:02 AM
Wow, this works here on the Macintosh in all browsers (except IE5.2 which one can forget I guess).

The reason I used the "absolute" was because Arbitrator before mentioned it. He quoted from the specs which say

"If the height of the containing block is not specified explicitly [...] and this element is not absolutely positioned, the value computes to 'auto'."

Whatever. If it works and validates - that's good. Your code makes sense. With my (limited) experience in these IE matters, it seems that IE always needs a bit more info for everything.

I include the DTD into my site via php, so I want to go "strict" now. After all, time moves on and I'd rather have my site ready for the future (xhtml, etc).

Thanks again Aerospace, Arbitrator and Hothousegraphix :thumbsup:

mypointofview
05-24-2007, 07:24 AM
:eek: When I put the image within link code - it's like before !! :eek:

http://tinyurl.com/2ytnud

Same code as just before from Aerospace - only now the image in a link. What's goin' on ?!


<!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>4.01 strict validated</title>

<style type="text/css">
html,body,#container {
margin:0;
padding:0;
height:100%;
background:#000;
overflow:hidden;
}
#container img {
height:100%;
width:100%;
display:block;
}
</style>

</head>
<body>

<div id="container"><a href="http://www.codingforums.com"><img src="welcome/startimages/4/full.jpg" alt=""></a></div>

</body>
</html>

mypointofview
05-24-2007, 07:45 AM
http://tinyurl.com/2gv6ud

Found the solution. I had to style the "a".

And since I was at it, I set the border of the image to "none" so Firefox does not show the blue link border.

Here the final CSS:


html,body,#container {
margin:0;
padding:0;
height:100%;
background:#000;
overflow:hidden;
}

#container img {
height:100%;
width:100%;
display:block;
border:none;
}

a { height:100%;
width:100%;
display:block;
}

_Aerospace_Eng_
05-24-2007, 08:19 AM
Since the CSS is almost the same for the link and the image you can do this

#container img, #container a {
height:100%;
width:100%;
display:block;
border:none;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum