Nick_W
msg:1179788 | 6:46 pm on Jan 4, 2003 (gmt 0) |
Hi Yoeri, welcome to WebmasterWorld! You raise an interesting issue that many have wrestled with. Personaly i prefer absolutely postioned sections so have only theoretical knowledge to share... Have you thought about this: Place the menu and body at the top of the page, then absolutely position the header? If you gave the menu and body the right padding-top and z-index to suit, seems to me that it might do the trick, in theory at least ;) Nick
|
Yoeri
msg:1179789 | 7:15 pm on Jan 4, 2003 (gmt 0) |
Just tried it ... I got it to work in Mozilla, but IE6 is rendering it wrong :-(
|
madcat
msg:1179790 | 9:04 pm on Jan 4, 2003 (gmt 0) |
Did you get this working Yoeri? If not, drop some code off. How did you fix it if you got it working?
|
WibbleWobble
msg:1179791 | 1:13 am on Jan 5, 2003 (gmt 0) |
I'm intrigued too, as Mozilla 1.2 doesn't seem to render height percentages?
|
Yoeri
msg:1179792 | 10:57 am on Jan 5, 2003 (gmt 0) |
Nope, not working Made an empty page with a header absolutely positioned and a height of 100px A menu float left width 25%
A body float right width 74% When I give the body a height of 100% and a margin-top of 100px, then:
In IE : I get a vertical scrollbar for the 100px
In MOZ: The height 100% is not working :-( So, the problem isn't solved yet ... but I won't give up
|
Yoeri
msg:1179793 | 1:05 pm on Jan 5, 2003 (gmt 0) |
Found something ... the height in Mozilla is solved, now I only have the vertical scrollbar left .. Try this :) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>My solution</title>
<style type="text/css">
<!--
Body
{
margin: 0;
height: 100%;
}
DIV.container {
position: absolute;
height: 100%;
width: 100%;
}
DIV.Header {
height: 100px;
width: 100%;
}
DIV.Menu {
height: 100%;
max-height:100%;/* Only for Mozilla ... */
width: 25%;
background-color: #aaaaaa;
float: left;
}
DIV.Body
{
height: 100%;
max-height:100%;/* Only for Mozilla ... */
width: 74%;
background-color: lime;
float: right;
}
-->
</style>
</head>
<body>
<div class="container">
<div class="Header">Header</div>
<div class="Menu">Menu</div>
<div class="Body">Body</div>
</div>
</body>
</html>
|
madcat
msg:1179794 | 2:20 am on Jan 6, 2003 (gmt 0) |
Yoeri- Try this. The only way I could get it to work was to nest content divisions within absolutely positioned shell divisions. That way you could actually use the content divisions to place your information/content without creating a vertical scroll bar. It's not really tested at all for durability, but is identical in Netscape 7, Opera 6.05, IE 6 and Moz 1.1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>CSS Positioning</title>
<style type="text/css">
body {
background: #fff;
color: #000;
margin: 0;
padding: 0;
height: 100%;
font: bold 13px verdana, helvetica, sans-serif;
} #menu{
position: absolute;
background: #eee;
top: 0;
left: 0;
width: 33%;
height: 100%;
border-right: 1px dotted #666;
} #content{
position: absolute;
background: #ccc;
top: 0;
right: 0;
width: 67%;
height: 100%;
} #header {
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 100%;
height: 100px;
z-index: 5;
} div.header-content
{
border-bottom: 1px dotted #666;
padding: 10px;
height: 80%;
} div.menu-content
{
position: absolute;
top: 100px;
left: 0;
padding: 10px;
} div.content-content
{
position: absolute;
top: 100px;
left: 0;
padding: 10px;
} </style>
</head>
<body> <div id="header">
<div class="header-content">Header</div>
</div> <div id="menu">
<div class="menu-content">Menu</div>
</div> <div id="content">
<div class="content-content">Body</div>
</div> </body>
</html>
|
|
Hope that helps!
|
Yoeri
msg:1179795 | 9:33 am on Jan 7, 2003 (gmt 0) |
Thanks The layout is now working great in Mozilla 1.0+ and IE5.0+ Did not test it in other browsers. I used the content-divs but without absolute positioning. If somebody is interested in the code, let me know, i'll post it like I did it. I now have a 2-column layout with a header and a menu-and body section of 100% height :) Thanks a lot for the help everyone!
|
|
