Need Help Converting A Table To CSS

**Robert P. Stearns** · Jul 20 '05, 04:10 PM

Re: Need Help Converting A Table To CSS

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="navigati on">
Navigation Area
<p>div.navigati on { width: 28%; text-align: center; background-color:
lightgreen; float: left; border: 1px solid black; margin-top: 10px; padding:
10px }</p>
</div>
<div class="informat ion">
Information Area
<p>div.informat ion { 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@co mcast.net> wrote in message
news:OIJgb.2404 82$mp.150604@rw crnsc51.ops.asp .att.net...[color=blue]
> I have been trying to convert the following simple table into CSS.
>
> <table>
> <tr><th colspan=2>Heade r Area</th></tr>
> <tr><th>Navigat ion Area</th><th>Informat ion Area</th></tr>
> <tr><th colspan=2>Foote r 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="navigati on">Navigatio n Area</div>
> <div class="informat ion">Informatio n Area</div>
> </div>
> <div class="footer"> Footer Area</div>
> </div
> </body>
> </html>
>
> Thanks for your help!
>
>[/color]

**William Tasso** · Jul 20 '05, 04:10 PM

Re: Need Help Converting A Table To CSS

Robert P. Stearns wrote:[color=blue]
> I have been trying to convert the following simple table into CSS.
>
> <table>
> <tr><th colspan=2>Heade r Area</th></tr>
> <tr><th>Navigat ion Area</th><th>Informat ion Area</th></tr>
> <tr><th colspan=2>Foote r 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

**Safalra** · Jul 20 '05, 04:10 PM

Re: Need Help Converting A Table To CSS

"Robert P. Stearns" <bob.stearns@co mcast.net> wrote in message news:<OIJgb.240 482$mp.150604@r wcrnsc51.ops.as p.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="navigati on">Navigatio n Area</div>

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

--- Stephen Morley ---

410 Gone

http://www.safalra.com

**Robert P. Stearns** · Jul 20 '05, 04:10 PM

Re: Need Help Converting A Table To CSS

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

"Safalra" <usenet@safalra .com> wrote in message
news:c555467b.0 310080139.a5e0b 41@posting.goog le.com...[color=blue]
> "Robert P. Stearns" <bob.stearns@co mcast.net> wrote in message[/color]
news:<OIJgb.240 482$mp.150604@r wcrnsc51.ops.as p.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="navigati on">Navigatio n Area</div>
> 
> <div class="footer"> Footer Area</div>
> </body>
> </html>
>
> --- Stephen Morley ---
> http://www.safalra.com[/color]

**Robert P. Stearns** · Jul 20 '05, 04:10 PM

Re: Need Help Converting A Table To CSS

"William Tasso" <news27@tbdata. com> wrote in message
news:bm0kgr$h0a 33$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>Heade r Area</th></tr>
> > <tr><th>Navigat ion Area</th><th>Informat ion Area</th></tr>
> > <tr><th colspan=2>Foote r 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="Micros oft FrontPage 4.0">

<meta name="ProgId" content="FrontP age.Editor.Docu ment">

<style>



</style>

</head>

<body>

<div class="document ">

Document Area

<p>div.docume nt { 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="navigati on">

Navigation Area

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

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

</div>

<div class="informat ion">

Information Area

<p>div.informat ion { 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.scroll er { 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>

**William Tasso** · Jul 20 '05, 04:10 PM

Re: Need Help Converting A Table To CSS

Robert P. Stearns wrote:[color=blue]
> "William Tasso" <news27@tbdata. com> wrote in message
> news:bm0kgr$h0a 33$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>Heade r Area</th></tr>
>>> <tr><th>Navigat ion Area</th><th>Informat ion Area</th></tr>
>>> <tr><th colspan=2>Foote r 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

Need Help Converting A Table To CSS

Comment

Comment

Comment

Comment

Comment

Comment