467,879 Members | 1,149 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,879 developers. It's quick & easy.

Table to div conversion

hsriat
Expert 1GB
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
  • viewed: 4175
Share:
8 Replies
drhowarddrfine
Expert 4TB
[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 1GB
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 1GB
[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 4TB
In what way? Which browser? It works for me.
Mar 4 '08 #5
hsriat
Expert 1GB
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 4TB
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 1GB
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 1GB
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.

Similar topics

6 posts views Thread by Mahesh Hardikar | last post: by
5 posts views Thread by Jonas Asberg | last post: by
6 posts views Thread by Tony Johansson | last post: by
6 posts views Thread by Pawel Janik | last post: by
11 posts views Thread by Steve Gough | last post: by
6 posts views Thread by Peter Afonin | last post: by
reply views Thread by MrMoon | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.