473,322 Members | 1,401 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

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">
<!--
div.document {width:700px;left:10px;top:10px}
div.header {width:700px}
div.body {width:700px}
div.navigation {width:200px}
div.information {width:500px}
div.footer {width:700px}
//-->
</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!
Jul 20 '05 #1
6 3039
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>
<!--
div.header { width: 100%; text-align: center; background-color: pink;
border: 1px solid black; padding: 20px }
div.navigation { width: 28%; text-align: center; background-color:
lightgreen; float: left;
border: 1px solid black; margin-top: 10px; padding: 10px }
div.information { width: 70%; text-align: center; background-color:
lightblue; float: right;
border: 1px solid black; margin-top: 10px; padding: 30px }
div.footer { width: 100%; text-align: center; background-color: yellow;
float: left;
border: 1px solid black; margin-top: 10px; padding: 30px }
//-->
</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" <bo*********@comcast.net> wrote in message
news:OI********************@rwcrnsc51.ops.asp.att. net...
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">
<!--
div.document {width:700px;left:10px;top:10px}
div.header {width:700px}
div.body {width:700px}
div.navigation {width:200px}
div.information {width:500px}
div.footer {width:700px}
//-->
</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!

Jul 20 '05 #2
Robert P. Stearns wrote:
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>
...


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
Jul 20 '05 #3
"Robert P. Stearns" <bo*********@comcast.net> wrote in message news:<OI********************@rwcrnsc51.ops.asp.att .net>...
I have been trying to convert the following simple table into CSS.
|=========================|
| Header Area |
|=========================|
| Navigation Area | Information Area |
|=========================|
| Footer Area |
|=========================|
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.
Here's what I have so far.
[snip div soup, with the dreaded absolute units]


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>
<!-- main page content here -->
<div class="footer">Footer Area</div>
</body>
</html>

--- Stephen Morley ---
http://www.safalra.com
Jul 20 '05 #4
Thanks William and Safalra. Both of your examples work great!.
"Safalra" <us****@safalra.com> wrote in message
news:c5*************************@posting.google.co m...
"Robert P. Stearns" <bo*********@comcast.net> wrote in message

news:<OI********************@rwcrnsc51.ops.asp.att .net>...
I have been trying to convert the following simple table into CSS.
|=========================|
| Header Area |
|=========================|
| Navigation Area | Information Area |
|=========================|
| Footer Area |
|=========================|


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.
Here's what I have so far.
[snip div soup, with the dreaded absolute units]


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>
<!-- main page content here -->
<div class="footer">Footer Area</div>
</body>
</html>

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

Jul 20 '05 #5
"William Tasso" <ne****@tbdata.com> wrote in message
news:bm************@ID-139074.news.uni-berlin.de...
Robert P. Stearns wrote:
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>
...


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


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>

<!--

div.document { width: 100%; text-align: center; background-color: khaki;

border: 1px solid black; padding: 20px }

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

border: 1px solid black; margin-top: 10px; padding: 20px }

div.body { width: 100%; text-align: center; background-color: lightgreen;

border: 1px solid black; margin-top: 10px; padding: 20px }

div.navigation { width: 28%; text-align: center; background-color: tan;
float: left;

border: 1px solid black; margin-top: 10px; padding: 10px }

div.scroller { width: 28%; text-align: center; background-color: red; float:
left; clear:

both; border: 1px solid black; margin-top: 10px; padding: 10px }

div.information { width: 70%; text-align: center; background-color:
lightblue; float: right;

border: 1px solid black; margin-top: 10px; padding: 30px }

div.footer { width: 100%; text-align: center; background-color: yellow;
clear: both;

border: 1px solid black; margin-top: 10px; padding: 30px }

//-->

</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>
Jul 20 '05 #6
Robert P. Stearns wrote:
"William Tasso" <ne****@tbdata.com> wrote in message
news:bm************@ID-139074.news.uni-berlin.de...
Robert P. Stearns wrote:
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>
...


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.


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


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
Jul 20 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: lostinspace | last post by:
Hello, My sites were created primarily with tables as layout. :-( I have two page designs which I used frequently and hopefully somebody can provide some insight as to whether its best to remain...
2
by: mike | last post by:
regards: I follow the following steps to converting from HTML to XHTML http://webpageworkshop.co.uk/main/xhtml_converting My parser is http://htmlparser.sourceforge.net/ Xhtml version is 1.0...
1
by: Mario Crevits | last post by:
My name is Mario Crevits, I'm from Belgium (Roeselare) and I'm working with Access97 for several years now. We are in an Access97-2000 migration project. I'm writing a wizard for the end-users to...
2
by: Asbjørn Ulsberg | last post by:
Hi. I'm trying to convert Brady Hegberg's great RTF2HTML VB 6.0 module to C#. I've managed to convert the VB code to VB.NET, which gave me the following code: Option Strict On Option...
2
by: phillip.s.powell | last post by:
I have to migrate data from one database table to another table in another database where the fields do not match, not even in the same order, and even if they do match, on occasions the datatypes...
2
by: shenanwei | last post by:
DB2 V8.2 on AIX, type II index is created. I see this from deadlock event monitor. 5) Deadlocked Connection ... Participant no.: 2 Lock wait start time: 09/18/2006 23:04:09.911774 .........
0
Krishna Ladwa
by: Krishna Ladwa | last post by:
In Sql Server 2000 Version, I found that no Notification message box appears when converting text column to varchar but the data gets truncated to the given size for the varchar. Whereas it appears...
0
by: RubyRue | last post by:
New to developing. We are working on a project using asp.net and c# where data is pulled out of an sql database via multiple tables and displayed via a details view. The user can then update the...
3
by: sparks | last post by:
After changing all the variables in a table from long to double. you get 9.1====becomes==== 9.19999980926514 ok I checked microsoft and they had a workaround. export the values to excel...then...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.