By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,492 Members | 1,955 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,492 IT Pros & Developers. It's quick & easy.

Table to div conversion

hsriat
Expert 100+
P: 1,654
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>
<!--
WHOLE PAGE GOES HERE
-->
</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?
Mar 3 '08 #1
Share this Question
Share on Google+
8 Replies


drhowarddrfine
Expert 5K+
P: 7,435
[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]
Mar 3 '08 #2

hsriat
Expert 100+
P: 1,654
Thanks dude!!

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

Thanks again...

Harpreet :)
Mar 3 '08 #3

hsriat
Expert 100+
P: 1,654
[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
  1. body{height:100%}
is not working
Mar 4 '08 #4

drhowarddrfine
Expert 5K+
P: 7,435
In what way? Which browser? It works for me.
Mar 4 '08 #5

hsriat
Expert 100+
P: 1,654
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.
Mar 4 '08 #6

drhowarddrfine
Expert 5K+
P: 7,435
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.
Mar 4 '08 #7

hsriat
Expert 100+
P: 1,654
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?
Mar 4 '08 #8

hsriat
Expert 100+
P: 1,654
Thanks :)
I got it working now, and no errors.

Harpreet
Mar 4 '08 #9

Post your reply

Sign in to post your reply or Sign up for a free account.