A
Arondelle
.... Is invariably found to have evolved from a simple system that works.
Remember when HTML was simple? Remember when you didn't have to have
advanced degrees in Computer Science and Quantum Physics to write a web
page? I don't....
I have been trying for days to produce a page that has a header across
the top, a sidebar menu in left column, content in a right column, and a
footer across the bottom -- all without using the dreaded (but simple to
use) table. All of my efforts so far have been less than satifactory.
I went to the W3C's CSS reference online, and copied the following
snippet. The diagram that accompanied the snippit showed a "page" that
was exactly what I wanted:
/*
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>A frame document with CSS 2.1</TITLE>
<STYLE type="text/css">
BODY { height: 8.5in } /* Required for percentage heights below */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="header">Header Text</DIV>
<DIV id="sidebar">
Sidebar Text<br>
Sidebar Text<br>
Sidebar Text<br>
Sidebar Text<br>
</DIV>
<DIV id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam
erat volutpat. Nulla ac purus at justo tincidunt semper. Proin
adipiscing. Nullam at mauris. Fusce at quam. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Aliquam erat volutpat. Morbi at nunc ut ligula rutrum malesuada.
Pellentesque varius est sed purus. Ut diam lacus, mattis nec, accumsan
ac, pulvinar eu, eros. Cras ipsum. Aliquam augue.</p>
</DIV>
<DIV id="footer">Footer Text</DIV>
</BODY>
</HTML>
*/
I added some "content", saved it as an HTML document, and opened in my
favorite browser.
It entirely *failed* to produce anything even faintly resembling the
diagram on the CSS Reference. At least, it doesn't in IE. Maybe it
does in some obscure browser that only 3 people (in the W3C) use, but
that doesn't do much good for all those lazy people who use IE. :-/
What is the problem here?
::grumble::
Arondelle, the Grouchy Uber-Bitch
--
===========================================================
To email me, empty the pond with a net
"Don't try to out-weird ME, three-eyes: I get stranger things than you
with my breakfast cereal."
-- Zaphod Beeblebrox
Remember when HTML was simple? Remember when you didn't have to have
advanced degrees in Computer Science and Quantum Physics to write a web
page? I don't....
I have been trying for days to produce a page that has a header across
the top, a sidebar menu in left column, content in a right column, and a
footer across the bottom -- all without using the dreaded (but simple to
use) table. All of my efforts so far have been less than satifactory.
I went to the W3C's CSS reference online, and copied the following
snippet. The diagram that accompanied the snippit showed a "page" that
was exactly what I wanted:
/*
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>A frame document with CSS 2.1</TITLE>
<STYLE type="text/css">
BODY { height: 8.5in } /* Required for percentage heights below */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="header">Header Text</DIV>
<DIV id="sidebar">
Sidebar Text<br>
Sidebar Text<br>
Sidebar Text<br>
Sidebar Text<br>
</DIV>
<DIV id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam
erat volutpat. Nulla ac purus at justo tincidunt semper. Proin
adipiscing. Nullam at mauris. Fusce at quam. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Aliquam erat volutpat. Morbi at nunc ut ligula rutrum malesuada.
Pellentesque varius est sed purus. Ut diam lacus, mattis nec, accumsan
ac, pulvinar eu, eros. Cras ipsum. Aliquam augue.</p>
</DIV>
<DIV id="footer">Footer Text</DIV>
</BODY>
</HTML>
*/
I added some "content", saved it as an HTML document, and opened in my
favorite browser.
It entirely *failed* to produce anything even faintly resembling the
diagram on the CSS Reference. At least, it doesn't in IE. Maybe it
does in some obscure browser that only 3 people (in the W3C) use, but
that doesn't do much good for all those lazy people who use IE. :-/
What is the problem here?
::grumble::
Arondelle, the Grouchy Uber-Bitch
--
===========================================================
To email me, empty the pond with a net
"Don't try to out-weird ME, three-eyes: I get stranger things than you
with my breakfast cereal."
-- Zaphod Beeblebrox
