I'm fairly new to CSS and I've got a few 'noodlescratchers'.
First, I want to make a fooger DIV that is on the bottom of the page and is 40 pixels high. This page is not a scrollin page. (I cannot use 'top: 100% - 40px;' obviously)
Secondly, I want to create a navigation DIV on the left side of the page. This DIV will span from the header ('top: 145px;') and will stretch all the way to the top of the footer ('height: 100% - 145px - 40px;')
How can I do either of these w/o using javascript. Sorry, I don't have an example html page to show you...hopefully my psuedo shows you what I am trying to accomplish.Use the Layout-o-Matic (<!-- m --><a class="postlink" href="http://www.inknoise.com/experimental/layoutomatic.php">http://www.inknoise.com/experimental/layoutomatic.php</a><!-- m -->) to create the raw material for your page then massage as needed.that's a nifty little generator but doesn't do what I need. I want the page to take up the entire window...but NOT scroll, except for the content div.Originally posted by ray326
massage as needed.
It'll give you your footer, sidebars, and content <div>'s, and here's where you come in and massage as needed, to get it the way you want
.Yes, it gives me a header/footer w/ a sidebar...but it doesn't fill up the whole browser window. It adapts to the content...setting the autoflow on only shrinks it to a size that must be specified...which doesn't help me adapt it to a resizeable window.You'll need to set the heights for the body and html elements:
<style type="text/css" media="screen">
<!--
html, body { height: 100%; }
-->
</style>
Truly standards compliant browsers create a block-level element for the HTML tag as well as the BODY tag, but Internet Explorer
doesn't create a box for the HTML element.
Then you can specify window-based heights for all DIVs that are direct children of the BODY tag. It seems to me you want to emulate a frameset. I'll work on some example code and post it later on. A quick tip though: You can position something top:100%; and still move the object up 40 pixels by specifying margin-bottom: -40px. Same philosophy holds true for right, left, and top margins.That margin trick worked great for the footer DIV, but for the life of me I can't get the left side div to work. It gets the correct top position but still streches to 100% of the screen (creating a nasty vertical scroll bar).
Here's the HTML:
<html>
<head>
<title>CSS Index Test</title>
</head>
<style type="text/css" media="screen">
<!--
html, body { height: 100%;}
#header {position: absolute;
background-color: #E5E5E5;
border-style: none;
left: 0px;
top: 0px;
height: 111px;
width: 100%;
}
#menuBar {
position: absolute;
background-color: #00FF00;
border-style: none;
left: 0px;
top: 111px;
height: 34px;
width: 100%;
}
#leftBar {
position: absolute;
background-color: #FF0000;
border-style: none;
left: 0px;
top: 145px;
height: 100%;
width: 180px;
margin-bottom: -185px;
}
#footer {
position: absolute;
background-color: #0000FF;
border-style: none;
left: 0px;
top: 100%;
height: 40px;
width: 100%;
margin-top: -39px;
}
-->
</style>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="header"></div>
<div id="menuBar"></div>
<div id="leftBar"></div>
<div id="footer"></div>
</body></html>
any ideas?First I'd get rid of all the absolute positioning and let the divs flow accordingly. Use float:left, float:right for the leftBar, content area (which you don't have a div for yet). Consider a bit of Javascript like below for sizing that leftBar given the size of the screen if you must:
<script>
document.getElementById("leftBar").style.height="300px";
</script>
Of course you'd actually calculate the height; I was just testing the concept.Problem with that is I'd have to recalculate the height of the left div absolutely everytime the browser window is resized. And with the way IE handles resizing it'd be a HUGE hassle (I'd need different code for different browsers)..I guess this can't be done with pure CSS/2. I've been trying to use 'bottom' and 'margin-bottom' to no avail.I was able to accomplish what you wanted in only one of two ways, and even then it's still not totally what you wanted.
1. Specify all heights using percentages and then positioning them absolutely.
2. Specify all heights using pixels and positioning them absolutely.
I couldn't figure out any other way. The downside to number one is that people with smaller resolutions will have less real estate available to them for all you major sections. Your header and footer are not static sizes like you wanted.
The downside to No. 2 is that you design a page that works on one screen resolution, and even sometimes only on one browser because not all browsers have the same height to the menu bar, even on the same browser across platforms this can be different.
In a nutshell: I haven't found a way yet that accurately emulates a frameset using CSS. I can come close though. Attached to this post is the code for method No. 1 and method No. 2 is attached to my next post.Method No. 2 (optimized for 1024 X 768 Mozilla 1.5 with standard menu items and one layer of tabbed windows)Thanx for you help. Unfortunately for my design idea I need the header and footer to have set sizes, but have a fluid 'middle'.
I suppose I could manualy set the header and footer and dynamicaly adjusy the middle contents using javascript document.getelementbyid(name).property, and using window size information but that's more than I want to mess with.
I'm thinking I'll be using a table and an inline frame...*yuck*.
Once again thanks for all your help.Actually, why not just use a frameset? There's nothing non-standard about that. The inline frame is only supported by IE and Gecko-based browsers. Opera too I think. Using an inline frame would be less standards compliant than using framesets (even if other people in this forum give you guff about using framesets).
Again, there isn't anything morally wrong with using framesets, which seem to be your best bet right now. And you can still have a CSS-based layout if you want.Iframes are part of HTML 4.Yes, that's true. But earlier versions of Netscape don't support it.
First, I want to make a fooger DIV that is on the bottom of the page and is 40 pixels high. This page is not a scrollin page. (I cannot use 'top: 100% - 40px;' obviously)
Secondly, I want to create a navigation DIV on the left side of the page. This DIV will span from the header ('top: 145px;') and will stretch all the way to the top of the footer ('height: 100% - 145px - 40px;')
How can I do either of these w/o using javascript. Sorry, I don't have an example html page to show you...hopefully my psuedo shows you what I am trying to accomplish.Use the Layout-o-Matic (<!-- m --><a class="postlink" href="http://www.inknoise.com/experimental/layoutomatic.php">http://www.inknoise.com/experimental/layoutomatic.php</a><!-- m -->) to create the raw material for your page then massage as needed.that's a nifty little generator but doesn't do what I need. I want the page to take up the entire window...but NOT scroll, except for the content div.Originally posted by ray326
massage as needed.
It'll give you your footer, sidebars, and content <div>'s, and here's where you come in and massage as needed, to get it the way you want
.Yes, it gives me a header/footer w/ a sidebar...but it doesn't fill up the whole browser window. It adapts to the content...setting the autoflow on only shrinks it to a size that must be specified...which doesn't help me adapt it to a resizeable window.You'll need to set the heights for the body and html elements:<style type="text/css" media="screen">
<!--
html, body { height: 100%; }
-->
</style>
Truly standards compliant browsers create a block-level element for the HTML tag as well as the BODY tag, but Internet Explorer
doesn't create a box for the HTML element.Then you can specify window-based heights for all DIVs that are direct children of the BODY tag. It seems to me you want to emulate a frameset. I'll work on some example code and post it later on. A quick tip though: You can position something top:100%; and still move the object up 40 pixels by specifying margin-bottom: -40px. Same philosophy holds true for right, left, and top margins.That margin trick worked great for the footer DIV, but for the life of me I can't get the left side div to work. It gets the correct top position but still streches to 100% of the screen (creating a nasty vertical scroll bar).
Here's the HTML:
<html>
<head>
<title>CSS Index Test</title>
</head>
<style type="text/css" media="screen">
<!--
html, body { height: 100%;}
#header {position: absolute;
background-color: #E5E5E5;
border-style: none;
left: 0px;
top: 0px;
height: 111px;
width: 100%;
}
#menuBar {
position: absolute;
background-color: #00FF00;
border-style: none;
left: 0px;
top: 111px;
height: 34px;
width: 100%;
}
#leftBar {
position: absolute;
background-color: #FF0000;
border-style: none;
left: 0px;
top: 145px;
height: 100%;
width: 180px;
margin-bottom: -185px;
}
#footer {
position: absolute;
background-color: #0000FF;
border-style: none;
left: 0px;
top: 100%;
height: 40px;
width: 100%;
margin-top: -39px;
}
-->
</style>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="header"></div>
<div id="menuBar"></div>
<div id="leftBar"></div>
<div id="footer"></div>
</body></html>
any ideas?First I'd get rid of all the absolute positioning and let the divs flow accordingly. Use float:left, float:right for the leftBar, content area (which you don't have a div for yet). Consider a bit of Javascript like below for sizing that leftBar given the size of the screen if you must:
<script>
document.getElementById("leftBar").style.height="300px";
</script>
Of course you'd actually calculate the height; I was just testing the concept.Problem with that is I'd have to recalculate the height of the left div absolutely everytime the browser window is resized. And with the way IE handles resizing it'd be a HUGE hassle (I'd need different code for different browsers)..I guess this can't be done with pure CSS/2. I've been trying to use 'bottom' and 'margin-bottom' to no avail.I was able to accomplish what you wanted in only one of two ways, and even then it's still not totally what you wanted.
1. Specify all heights using percentages and then positioning them absolutely.
2. Specify all heights using pixels and positioning them absolutely.
I couldn't figure out any other way. The downside to number one is that people with smaller resolutions will have less real estate available to them for all you major sections. Your header and footer are not static sizes like you wanted.
The downside to No. 2 is that you design a page that works on one screen resolution, and even sometimes only on one browser because not all browsers have the same height to the menu bar, even on the same browser across platforms this can be different.
In a nutshell: I haven't found a way yet that accurately emulates a frameset using CSS. I can come close though. Attached to this post is the code for method No. 1 and method No. 2 is attached to my next post.Method No. 2 (optimized for 1024 X 768 Mozilla 1.5 with standard menu items and one layer of tabbed windows)Thanx for you help. Unfortunately for my design idea I need the header and footer to have set sizes, but have a fluid 'middle'.
I suppose I could manualy set the header and footer and dynamicaly adjusy the middle contents using javascript document.getelementbyid(name).property, and using window size information but that's more than I want to mess with.
I'm thinking I'll be using a table and an inline frame...*yuck*.
Once again thanks for all your help.Actually, why not just use a frameset? There's nothing non-standard about that. The inline frame is only supported by IE and Gecko-based browsers. Opera too I think. Using an inline frame would be less standards compliant than using framesets (even if other people in this forum give you guff about using framesets).
Again, there isn't anything morally wrong with using framesets, which seem to be your best bet right now. And you can still have a CSS-based layout if you want.Iframes are part of HTML 4.Yes, that's true. But earlier versions of Netscape don't support it.