Need Help Converting A Table To CSS

I have been trying to convert the following simple table into CSS.

<table>
<tr><th colspan=2>Header Area</th></tr>
<tr><th>Navigation Area</th><th>Information Area</th></tr>
<tr><th colspan=2>Footer Area</th></tr>
</table>

|=========================|
| Header Area |
|=========================|
| Navigation Area | Information Area |
|=========================|
| Footer Area |
|=========================|

Here's what I have so far.
I figured I would need a div for containing the entire page so I called it
Document. I also needed a div for holding the Navigation and Information
Areas. I called this Body. I haven't been able to figure out the rest.

<html>
<head>
<title>CSS Sample Table</title>
<style type="text/css">

</style>
</head>
<body>
<div class="document">
<div class="header">Header Area</div>
<div class=body>
<div class="navigation">Navigation Area</div>
<div class="information">Information Area</div>
</div>
<div class="footer">Footer Area</div>
</div
</body>
</html>

Thanks for your help!

Here's one way I discovered. I still do not know how to keep or set the
height of the Navigation Area equal to the height of the Information Area.
Any ideas?

<html>
<head>
<title>CSS Sample</title>
<style>

</style>
</head>
<body>
<div class="header">
Header Area
<p>div.header { width: 100%; text-align: center; background-color: pink;
border: 1px solid black; padding: 20px }</p>
</div>
<div class="navigation">
Navigation Area
<p>div.navigation { width: 28%; text-align: center; background-color:
lightgreen; float: left; border: 1px solid black; margin-top: 10px; padding:
10px }</p>
</div>
<div class="information">
Information Area
<p>div.information { width: 70%; text-align: center; background-color:
lightblue; float: right; border: 1px solid black; margin-top: 10px; padding:
30px }</p>
</div>
<div class="footer">
Footer Area
<p>div.footer { width: 100%; text-align: center; background-color: yellow;
float: left; border: 1px solid black; margin-top: 10px; padding: 30px }</p>
</div>
</body>
</html>

"Robert P. Stearns" <bob.stearns@comcast.net> wrote in message
news:OIJgb.240482$mp.150604@rwcrnsc51.ops.asp.att. net...[color=blue]
> I have been trying to convert the following simple table into CSS.
>
> <table>
> <tr><th colspan=2>Header Area</th></tr>
> <tr><th>Navigation Area</th><th>Information Area</th></tr>
> <tr><th colspan=2>Footer Area</th></tr>
> </table>
>
> |=========================|
> | Header Area |
> |=========================|
> | Navigation Area | Information Area |
> |=========================|
> | Footer Area |
> |=========================|
>
> Here's what I have so far.
> I figured I would need a div for containing the entire page so I called it
> Document. I also needed a div for holding the Navigation and Information
> Areas. I called this Body. I haven't been able to figure out the rest.
>
> <html>
> <head>
> <title>CSS Sample Table</title>
> <style type="text/css">
> 
> </style>
> </head>
> <body>
> <div class="document">
> <div class="header">Header Area</div>
> <div class=body>
> <div class="navigation">Navigation Area</div>
> <div class="information">Information Area</div>
> </div>
> <div class="footer">Footer Area</div>
> </div
> </body>
> </html>
>
> Thanks for your help!
>
>[/color]

Robert P. Stearns wrote:[color=blue]
> I have been trying to convert the following simple table into CSS.
>
> <table>
> <tr><th colspan=2>Header Area</th></tr>
> <tr><th>Navigation Area</th><th>Information Area</th></tr>
> <tr><th colspan=2>Footer Area</th></tr>
> </table>
> ...[/color]

simple two column layout + header and footer

http://williamtasso.com/usenet/two-cols.html

add content and styles to taste, bring to the boil and simmer till tender.
serve in any browser.
--
William Tasso - http://WilliamTasso.com

"Robert P. Stearns" <bob.stearns@comcast.net> wrote in message news:<OIJgb.240482$mp.150604@rwcrnsc51.ops.asp.att .net>...[color=blue]
> I have been trying to convert the following simple table into CSS.
> |=========================|
> | Header Area |
> |=========================|
> | Navigation Area | Information Area |
> |=========================|
> | Footer Area |
> |=========================|[/color]

Looks like you did your ASCII art with a proportional font - the lines
with spaces are far too long when viewed with a fixed width font.
[color=blue]
> Here's what I have so far.
> [snip div soup, with the dreaded absolute units][/color]

Please don't use absolute units, it annoys anyone who hasn't got their
browser window set to approximately that width. Try something like
this (it's roughly what I use on my site, except I've got an external
stylesheet):

<html>
<head>
<title>CSS Sample Table</title>
<style type="text/css">
div.header{
// anything
}
div.navigation{
float:left;
// anything else
}
div.footer{
clear:both;
// anything else
}
</style>
</head>
<body>
<div class="header">Header Area</div>
<div class="navigation">Navigation Area</div>

<div class="footer">Footer Area</div>
</body>
</html>

--- Stephen Morley ---
http://www.safalra.com

Thanks William and Safalra. Both of your examples work great!.

"Safalra" <usenet@safalra.com> wrote in message
news:c555467b.0310080139.a5e0b41@posting.google.co m...[color=blue]
> "Robert P. Stearns" <bob.stearns@comcast.net> wrote in message[/color]
news:<OIJgb.240482$mp.150604@rwcrnsc51.ops.asp.att .net>...[color=blue][color=green]
> > I have been trying to convert the following simple table into CSS.
> > |=========================|
> > | Header Area |
> > |=========================|
> > | Navigation Area | Information Area |
> > |=========================|
> > | Footer Area |
> > |=========================|[/color]
>
> Looks like you did your ASCII art with a proportional font - the lines
> with spaces are far too long when viewed with a fixed width font.
>[color=green]
> > Here's what I have so far.
> > [snip div soup, with the dreaded absolute units][/color]
>
> Please don't use absolute units, it annoys anyone who hasn't got their
> browser window set to approximately that width. Try something like
> this (it's roughly what I use on my site, except I've got an external
> stylesheet):
>
> <html>
> <head>
> <title>CSS Sample Table</title>
> <style type="text/css">
> div.header{
> // anything
> }
> div.navigation{
> float:left;
> // anything else
> }
> div.footer{
> clear:both;
> // anything else
> }
> </style>
> </head>
> <body>
> <div class="header">Header Area</div>
> <div class="navigation">Navigation Area</div>
> 
> <div class="footer">Footer Area</div>
> </body>
> </html>
>
> --- Stephen Morley ---
> http://www.safalra.com[/color]

"William Tasso" <news27@tbdata.com> wrote in message
news:bm0kgr$h0a33$1@ID-139074.news.uni-berlin.de...[color=blue]
> Robert P. Stearns wrote:[color=green]
> > I have been trying to convert the following simple table into CSS.
> >
> > <table>
> > <tr><th colspan=2>Header Area</th></tr>
> > <tr><th>Navigation Area</th><th>Information Area</th></tr>
> > <tr><th colspan=2>Footer Area</th></tr>
> > </table>
> > ...[/color]
>
> simple two column layout + header and footer
>
> http://williamtasso.com/usenet/two-cols.html
>
> add content and styles to taste, bring to the boil and simmer till tender.
> serve in any browser.
> --
> William Tasso - http://WilliamTasso.com
>[/color]

Is there a way to extend or heighten the information area to match the total
height of the navigation and scroller area?

<html>

<head>

<title>CSS Sample</title>

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<style>



</style>

</head>

<body>

<div class="document">

Document Area

<p>div.document { width: 100%; text-align: left; background-color: khaki;

border: 1px solid black; padding: 20px }</p>

<div class="header">

Header Area

<p>div.header { width: 100%; text-align: center; background-color: pink;

border: 1px solid black; margin-top: 10px; padding: 20px }</p>

</div>

<div class="body">

Body Area

<p>div.body { width: 100%; text-align: left; background-color: lightgreen;

border: 1px solid black; margin-top: 10px; padding: 20px }</p>

<div class="navigation">

Navigation Area

<p>div.navigation { width: 28%; text-align: center; background-color: tan;

float: left; border: 1px solid black; margin-top: 10px; padding: 10px }</p>

</div>

<div class="information">

Information Area

<p>div.information { width: 70%; text-align: center; background-color:

lightblue; float: right; border: 1px solid black; margin-top: 10px;

padding: 30px }</p>

</div>

<div class="scroller">

Scroller Area

<p>div.scroller { width: 28%; text-align: center; background-color: red;

float: left; clear: both; border: 1px solid black; margin-top: 10px;

padding: 10px }</p>

</div>

</div>

<div class="footer">

Footer Area

<p>div.footer { width: 100%; text-align: center; background-color: yellow;

clear: both; border: 1px solid black; margin-top: 10px; padding: 30px }</p>

</div>

</div>

</body>

</html>

Robert P. Stearns wrote:[color=blue]
> "William Tasso" <news27@tbdata.com> wrote in message
> news:bm0kgr$h0a33$1@ID-139074.news.uni-berlin.de...[color=green]
>> Robert P. Stearns wrote:[color=darkred]
>>> I have been trying to convert the following simple table into CSS.
>>>
>>> <table>
>>> <tr><th colspan=2>Header Area</th></tr>
>>> <tr><th>Navigation Area</th><th>Information Area</th></tr>
>>> <tr><th colspan=2>Footer Area</th></tr>
>>> </table>
>>> ...[/color]
>>
>> simple two column layout + header and footer
>>
>> http://williamtasso.com/usenet/two-cols.html
>>
>> add content and styles to taste, bring to the boil and simmer till
>> tender. serve in any browser.[/color]
>
> Is there a way to extend or heighten the information area to match
> the total height of the navigation and scroller area?
>[/color]

not as far as I know.

[...code...] a url usually works better

add a containing block (div?) for all three and style that to suit. that is
the usual technique for providing the illusion you seek.

Note: you have removed a perfectly good doc type and replaced it with an
appaling meta.

--
William Tasso - http://WilliamTasso.com

Need Help Converting A Table To CSS

re: Need Help Converting A Table To CSS

re: Need Help Converting A Table To CSS

re: Need Help Converting A Table To CSS

re: Need Help Converting A Table To CSS

re: Need Help Converting A Table To CSS

re: Need Help Converting A Table To CSS

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about