Table to div conversion

hsriat

I have general layout of all my pages as [html]<table width="100%" height="100%">
<tr>
<td background="top.png" height="20px"></td>
</tr>
<tr>
<td>

</td>
</tr>
<tr>
<td background="bottom.png" height="20px"></td>
</tr>
</table>[/html]
This sets a top and bottom graphical bar on the page even if the text inside the whole page is just 2 lines.

I have to retain the same layout but remove tables.
How can i do this?

drhowarddrfine

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Untitled Document</title>
<style type="text/css">
*{margin:0}
body{height:100%}
#top{background-image:url(top.png);height:20px}
#middle{height:100%}
#bottom{
background-image:url(bottom.png);
height:20px;
width:100%;
position:absolute;
bottom:0;
margin-bottom:0px
}
</style>
</head>
<body>
<div id="top"></div>
<div id="middle">
<p>Whole body content</p>
</div>
<div id="bottom"></div>
</body>
</html>[/HTML]

hsriat

Thanks dude!!

Now just I have to do is to add this to my template.php

Thanks again...

Harpreet :)

hsriat

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Untitled Document</title>
<style type="text/css">
*{margin:0}
body{height:100%}
#top{background-image:url(top.png);height:20px}
#middle{height:100%}
#bottom{
background-image:url(bottom.png);
height:20px;
width:100%;
position:absolute;
bottom:0;
margin-bottom:0px
}
</style>
</head>
<body>
<div id="top"></div>
<div id="middle">
<p>Whole body content</p>
</div>
<div id="bottom"></div>
</body>
</html>[/HTML]

I think

Expand|Select|Wrap|Line Numbers

body{height:100%}

is not working

drhowarddrfine

In what way? Which browser? It works for me.

hsriat

In what way? Which browser? It works for me.

Sorry, its working fine. Actually I had modified it a bit. May be I had removed something which was creating problem.

Actually I'm not able to convert my page to a table-less layout. I modified your above given code. And it works fine when no DOCTYPE is given. When I provide a DOCTYPE , instead of rendering the content in the center, it goes to the top.

And I am developing it on Mozilla only.

drhowarddrfine

Without a doctype, you are in quirks mode, not standards mode. All new pages are required to have a doctype.

Also, you are using xhtml end tags but quirks mode is html only. There are html errors, too.

hsriat

Without a doctype, you are in quirks mode, not standards mode. All new pages are required to have a doctype.

Also, you are using xhtml end tags but quirks mode is html only. There are html errors, too.

ok, just tell me, should I convert the table layout into div for such a light weight page or I should let it be like that?

Also I modified it and now according to w3validator, it has only two errors.
1. there is no attribute "height". <table width="100%" height="100%">
2. there is no attribute "name". <form name="F" action="/index.php" method="post">

What can I do with this now?

hsriat

Thanks :)
I got it working now, and no errors.

Harpreet

Table to div conversion

Post your reply

Similar topics