You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Michael Engelhart <me...@mac.com> on 2004/12/01 00:40:41 UTC
Re: OT: CSS woes
Two quick suggestions. first, put a doctype at the top of your page
like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
I would try nesting your div.menu and div.footer "inside" the div.body
and modify the positions and left attributes . That may make your job
a bit easier.
Mike
On Nov 30, 2004, at 5:54 PM, Todd O'Bryan wrote:
> Sorry to bother the list with this, but I've googled till I'm blue in
> the fingers and am not seeing a way to deal with this.
>
> Can someone direct me to a good place to ask CSS questions? I'm tired
> of banging my head against a wall. What I want to do seems like it
> should be possible, but I can't get it to work.
>
> Just in case someone has done something similar and knows the
> immediate answer, I'll include the problem here:
>
> (switching to mono-spaced font, sorry I didn't keep it plain text):
>
> ---------------------------------------------------------
> | This part has a black background and has a red |
> | title centered over the content portion of the page, |
> | excluding the menu. This I can get. |
> ---------------------------------------------------------
> | This part is | This is the content area of the page. |
> | red, 20% of | It's 80% of the width of the browser |
> | the width of | window, has a grey background, and |
> | the browser | extends down to the footer. |
> | window, and | |
> | contains a | |
> | menu. It | |
> | should extend | |
> | all the way | |
> | to the bottom | |
> | of the browser| |
> | window or the | |
> | page, which- |---------------------------------------|
> | ever is | This is the footer. 51px tall. It |
> | farther down. | should be at the bottom of the browser|
> | | window or bottom of the page, which- |
> | | ever is farther. |
> ---------------------------------------------------------
>
> Here's a skeletal html page with an included stylesheet for anyone to
> take a crack at:
>
> <html><head><title>Silly Page That Hates Me</title></head>
>
> <style>
> div.title-bar {
> position: absolute;
> top: 0px;
> left: 0px;
> height: 100px;
> padding: 0px 0px 0px 0px;
> width: 100%;
> background-color: #000000;
> color: #FF0000;
> z-index: 3;
> }
>
> div.title-bar h1 {
> margin-left: 20%;
> font-size: 48px;
> background-color: #000000;
> color: #FF0000;
> font-family: sans-serif;
> text-align: center;
> }
>
> div.body {
> position: absolute;
> top: 0px;
> left: 20%;
> padding: 0px 0px 0px -1px;
> width: 80%;
> height: 100%;
> background-color: #DDDDDD;
> color: black;
> z-index: 0;
> }
>
> div.body div.contents {
> padding: 100px 5px 51px 5px;
> background-color: #DDDDDD;
> color: black;
> font-family: sans-serif;
> }
>
> div.menu {
> position: absolute;
> top: 0px;
> left: 0px;
> padding: 0px 0px 0px 0px;
> height: 100%;
> width: 20%;
> background-color: red;
> z-index: 2;
> }
>
> div.menu div.items {
> padding: 100px 0px 0px 0px;
> color: black;
> font-family: sans-serif;
> text-align: left;
> font-size: 12pt;
> margin-left: 10px;
> text-indent: -5px;
> }
>
> div.footer {
> position: absolute;
> bottom: 0px;
> left: 20%;
> height: 51px;
> width: 80%;
> z-index: 1;
> text-align: center;
> background-color: white;
> font-size: 24px;
> }
> </style>
>
> <body>
>
> <div class="title-bar"><h1>Silly Page That Hates Me</h1></div>
>
> <div class="menu"><div class="items">
> <p>Item 1</p>
> <p>Item 2</p>
> <p>Item 3</p>
> </div></div>
>
> <div class="body"><div class="contents">
> <p>The page looks okay like this. But try adding a bunch of content so
> that
> the content section extends down past the end of the page. Very
> bad.</p>
> </div></div>
>
> <div class="footer">This is the footer text.</div>
>
> </body>
> </html>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
For additional commands, e-mail: tapestry-user-help@jakarta.apache.org