Fixed positioning problem...

flutterby nut · 04-29-2009, 03:22 PM

is your fixed object relative to the browser window, or to a container?

if it's the browser window, it will overlap the content when you resize...but if you put it relative to a container, it will stay positioned in that container when you resize...

for example:

#container {position: relative;}
#container img {position: absolute; right: 0; bottom: 0;}

with your content etc in the container...

Quirk · 04-29-2009, 04:14 PM

I guess I am a little confused (sorry, some of this is still a little new to me)... I was making the fixed object relative to the browser window, yes.

What would happen if I gave the container an absolute position (left: 800px; top: 0px; because that's where I want the image to "stop")... and then left the height and width at 100% (so that it would fill out as the browser expanded an contracted).. is there a way to make the img div relative to the container then?

I thought if you gave an element the "fixed" position it would essentially "ignore" everything on the page anyway and position itself relative to the browser no matter where it is...

Or am I thinking about this backwards? The container div should be relative (and I can still do it left: 800px; top: 0px

and make the width/height 100% and then have the image absolutely positioned in the bottom right corner?
BUT.. how would this work with a "jello" layout? because I wouldn't always want my fixed img to stop at 800px to the left of the browser.. it would vary... hmpf... looks like I now have more questions than when I started...

I'm going to go play with this code a little...

Quirk · 04-29-2009, 04:15 PM

Ooop... smiley face unintended...

(that one is real)

Quirk · 04-29-2009, 04:50 PM

Ok... so I might be on to something... It was kind of working when I had a set size for #container, but once I tried to make the height/width 100% it made everything disappear (no background color or anything) ... I've tried making the height/width auto, and then I was playing with visibility and overflow, but I'm not really sure what I'm doing wrong...

and even if I get this to work, there are a whole slew of new problems if I want to do it with a "jello" layout, right?

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">

body {

padding: 0px;
margin: 0px;

}

#content {

background-color: #0CF;
width: 800px;
height: 600px;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}

#container {

background-color:#000;
position: relative;
width: 100%;
height: 100%;
left: 800px;
top: 0px;
z-index: 2;
visibility: visible;
overflow: auto;

}

#containerimg {

position: absolute;
right: 0;
bottom: 0;
z-index: 3;

}

</style>

</head>

<body>

<div id="content">

</div>

<div id="container">

<div id="containerimg">

<img src="img.jpg" width="175" height="156" alt="alt" />

</div>

</div>

</body>
</html>

flutterby nut · 04-29-2009, 05:34 PM

well, when you position something absolute, you're removing it from it's natural position in the flow and essentially putting it on top of everthing...

and with fluid dimensions it's still gonna move over your content because the dimensions change...and i know of know way of making it stop because it's on top of everything and not in the flow...

with a fixed width, you can position the image outside the content area inside the container...but when the browser resizes, you'll get a scroll bar instead of overlapping the content...

do you have a screenshot of what you're trying to achieve?...

celestereworks · 04-29-2009, 05:43 PM

you should use relation position
i don't know if you are styling with CSS if yes the you should do that relative to your container tag and not you body tag

flutterby nut · 04-29-2009, 05:48 PM

ok...after further experiment:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>-Something-</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
#container {position: relative; width: 100%; min-width: 1058px; height: 100%;}
#container img {position: absolute; right: 0; bottom: 0;}
#content {width: 800px;}
</style>

</head>
<body>
<div id="container">
<img src="front.jpg" width="258" height="139" />
<div id="content">
<h2>content main</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
</div>
</div>
</body>
</html>

setting a min-width equal to the width of your content area plus the width of your positioned image will 'stop' the image at the edge of the content and not overlap, producing a scroll bar instead...

you will have to account for ie and it's failure to honor min-width tho...

Quirk · 04-29-2009, 06:00 PM

Originally posted by flutterby nut View Post

you will have to account for ie and it's failure to honor min-width tho...

Damn ie! Thank you so much for your help on this... it at least pointed me in the right direction. I really appreciating you to take the time to look into it.

flutterby nut · 04-29-2009, 06:43 PM

put this in an ie stylesheet in a conditional comment:

#container {width: expression(document.body.clientWidth < 1060? "1058px" :
document.body.clientWidth > 1282? "1280px" : "auto");}

and plug in you min and max width numbers...note the 2px differences...this is because there's a buggy behavior on resizing if they're exactly the same...

Fixed positioning problem...

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment