You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Todd O'Bryan <to...@mac.com> on 2004/11/30 23:54:01 UTC
OT: CSS woes
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>
Re: OT: CSS woes
Posted by Michael Engelhart <me...@mac.com>.
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
Re: OT: CSS woes
Posted by Joe Andolina <jo...@andomation.com>.
Here is an amazing css resource. There is an example of the same data
manipulated with css only. Check it out.
csszengarden.com
Click the "choose a design" links
Joe
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
Re: OT: CSS woes
Posted by Todd O'Bryan <to...@mac.com>.
At least in Safari, the footer doesn't drop to the bottom of the
browser window when the page is too short. This seems to be a Safari
bug, as it works in Firefox.
Also, for some reason, having the menu extend down to the end of the
page is MUCH harder than having the footer cover the whole bottom of
the page. Seems like it shouldn't be so, but it is.
Thanks,
Todd
On Dec 1, 2004, at 5:16 AM, Diego wrote:
> Hello,
>
> You could do this with floating div:
> http://css.maxdesign.com.au/floatutorial/tutorial0816.htm
>
> Or with negative margins:
> http://www.alistapart.com/articles/negativemargins/
>
> Regards
> Diego
>
> On Tue, 30 Nov 2004 17:54:01 -0500, Todd O'Bryan <to...@mac.com>
> 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
>
---------------------------------------------------------------------
To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
Re: OT: CSS woes
Posted by Diego <di...@gmail.com>.
Hello,
You could do this with floating div:
http://css.maxdesign.com.au/floatutorial/tutorial0816.htm
Or with negative margins:
http://www.alistapart.com/articles/negativemargins/
Regards
Diego
On Tue, 30 Nov 2004 17:54:01 -0500, Todd O'Bryan <to...@mac.com> 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