Forum Moderators: not2easy
-Joel
<html>
<head>
<title>Body test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
margin:0px 0px 0px; 0px;
padding:0;
background:#FFF;}
#headerparent {
position:absolute;
width:100%;
height:60px;
top:0;
left:0;
background:Yellow;
}
#menuparent {
position:absolute;
width:200px;
top:60;
height:100px;
left:0;
background:Green;
z-index:10;
}
#bodyparent {
position:absolute;
width:100%;
top:60;
left:0;
padding-left:200px;
margin-right:-200px;
background:Blue;
z-index:9;
}
#bodychild1 {
position:relative;
width:100%;
background:Orange;
margin: 2px 2px 2px 2px;
text-align:center;
}
.bigger
{
font-size:large;
font-family:Verdana;
font-weight:bolder;
font-color:black;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="headerparent">
<span class="bigger">Header text</span>
</div>
<div id="menuparent">
Menu<br>Menu<br>Menu
</div>
<div id="bodyparent">
<div id="bodychild1">Hello World!</div>
</div>
</body>
</html>
I'd say keep it simple. And I commented out the things you don't need..
<html>
<head>
<title>Body test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
margin:0;
padding:0;
background:#fff;
color:#000;
}
#headerparent {
/* position:absolute; */
/* width:100%; */
height:60px;
/* top:0; */
/* left:0; */
background:yellow;
}
#menuparent {
position:absolute;
width:200px;
height:100px;
top:60px;
left:0;
background:green;
/* z-index:10; */
}
#bodyparent {
/* position:absolute; */
/* width:100%; */
/* top:60px; */
/* left:0; */
padding-left:200px;
/* margin-right:-200px; */
background:blue;
/* z-index:9; */
}
#bodychild1 {
/* position:relative; */
/* width:100%; */
background:orange;
margin:2px;
text-align:center;
}
.bigger {
font:large verdana;
font-weight:bolder;
font-color:black;
}
</style>
</head>
<body>
<div id="headerparent">
<span class="bigger">Header text</span>
</div>
<div id="menuparent">
Menu<br>
Menu<br>
Menu</div>
<div id="bodyparent">
<div id="bodychild1">Hello World!</div>
</div>
</body>
</html>
Thank you!
I'm having a similar issue with a layout I'm working on - a div block of text floating over an image map - when the window is resized, the text shifts and overlaps part of the text on the bkgrnd image.
I have the bkgrnd image in a div positioned relative to the browser window, and the text positioned absolutely to the image - but, still learning some CSS, so I'm not exactly sure why it's doing what it's doing.
This is the code:
<style type="text/css">
div.container {
position:static;
top: 0px;
left: 0px;
z-index=2;
}
div.text {
overflow:auto;
position:absolute;
top: 190px;
left: 300px;
height:295px;
width:450px;
color:#ffffff;
text-align:left;
margin-right:auto;
margin-left:auto;
margin-top:2px;
margin-bottom:2px;
font-family: verdana;
font-size:10pt;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#1d3e5d;
scrollbar-3dlight-color:#1d3e5d;
scrollbar-darkshadow-color:#1d3e5d;
scrollbar-shadow-color:#000000;
scrollbar-arrow-color:#1d3e5d;
scrollbar-track-color:#000000;
z-index=1;
}
</style>
Any thoughts? Ideas?
Thanx!
If this doesn't work, try giving the body some width; some people use hacks like
body {
width: 100%; /* or you can try some other number here */
} (you also need the <body> tag in your html, of course) which clears some things up.
In my experience, superimposing absolutely positioned div's on non-absolutely positioned / absolutely sized divs often results in this kind of thing - things slipping over your content - and can require a whole lot of hacks (like floating empty divs) to get things perfect when considering browser resizing. If it's gotta be done today, you might just consider using a table here or there, which I frequently do, even though I do like the ideal of completely tableless layout. And then just hack your css and read up on real-life css hacks until you get comfortable enough.
You can also try googling css "position is everything" - this will get you to a site I've found real handy.
Classicsmiley: you'll probably find in the future that it's easier to do your layout in mozilla and then later correct for ie. Getting it right in mozilla will get it much, much closer to standards-compliant layout, and you can add an extra stylesheet for ie only using ie conditional comments :
<!--[if IE]><link rel="stylesheet" type="text/css" href="/style/ie.css"><![endif]-->
This is easier than many of the ie-only hacks which involve just using one stylesheet - you don't have to worry about your ie-specific stuff wrecking your layout in mozilla or opera, and it keeps your stylesheets standards compliant too (the ie one doesn't count, it's inside a comment).
Haven't tried putting a width on the <body> tag though. Might give that a shot.
I'm not in a hurry - just redesigning an existing site, so, no real rush. I have time to play around.
I did read over at 'position is everything' - it wasn't much help. It had great info - just not what I was looking for.
I have the html set up right - I just can't figure why the text wants to slide over on window re-size. It's more annoying than anything.
Thanx for the help and if you think of anything else, let me know! And, I'll let you know if adding a width to the <body> tag works.
