Forum Moderators: not2easy
I know when I set the top to 0px for the red container div it does not shift when you zoom. I suspect this is a bug with negative top values that would normally be off screen.
Advice welcome, thanks.
CODE REPLACED BY NEXT POST FOR SIMPLICITY.
[edited by: greenmagic at 9:35 pm (utc) on Nov. 18, 2007]
here is the version that does not work on a smaller scale. (at bottom of this code is fix. Just added position:relative; top:0px; left:0px; to the BG and container divs and it scales properly now.
BAD TEST CODE:
<!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" xml:lang="en" lang="en">
<head>
<style type="text/css">
#bg {
width:100%;
height:525px;
overflow:hidden;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
background-color:#EEE;
background-attachment: scroll;
background-repeat:repeat-x;
background-position: 0px 0px;
}
#container {
width:518px;
height: 525px;
overflow: hidden;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
}
#bottomheader {
width: 518px;
height: 552px;
background-color:#063;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
position:relative;
float:left;
top:5px;
}
#bottomcontainer{
width: 510px;
height: 376px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
position:relative;
left:0px;
top:-419px;
background-color:red;
float:left;
}
</style>
</head>
<body>
<div id="bg">
<div id="container">
<div id="bottomheader"></div>
<div id="bottomcontainer"></div>
</div>
</div>
</body>
</html>
GOOD TEST CODE:
add to BG and Container
position:relative;
left:0px;
top:0px;
always fun when you spend a long time on something then finally fix it yourself
Lastly, be careful using absolute (or relative in your case) positioning for website design. It's not a bad thing in itself, it can just be messy, or harder to implement properly. Elements on the page don't scale in size, or 'flow', since everything, or most things, are out of, or moved from, the document flow. Make sure that if the user resizes their window large or small, And if the user changes their font size to something 3x or 1/3 the normal size, that objects aren't overlapping, or that content is being cut off, or pushed around in some undesirable way.
I prefer using ems for most spacing and dimensions of containers, so that when test size is increased, the containers will properly expand as well. I even like using ems for padding and margins, since in theory, at very high or very low resolutions, they would look too large or too small.
[edited by: Xapti at 11:45 pm (utc) on Nov. 18, 2007]
I am a graphic designer by nature so the text I put in a page has manually inserted line breaks to ensure the text reads and scales as I intend it to.
I do test my pages throughly before they are released. When coding I can be found to have FF, IE7, S, on my pc then IE5.6, S, FF on my mac to ensure the page acts as I want it to.
Thanks for your suggestions.
