Log in

View Full Version : XHTML Problem


Cheng
07-29-2006, 08:48 AM
Hi.

I open a new thread here because I managed most of the things by now.
Only would I like to know if it is possible to get rid of the table shown in the example HTML below.
It says there are no tables in XHTML so I guess it must be possible but I don't know how.
Please someone help me out here.

Thank you very much.

Cheng

Here the example HTML and CSS.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<link href="/styles/layout.css" media="screen" rel="stylesheet" />
<link href="styles/layout.css" rel="stylesheet" type="text/css" />
<script SRC="FlashLoad.js"></script>
</head>
<body>
<div id="container">
<div id="top">
<h1 class="alt">First Future Corporation</h1>
<div align="left">
<p>
<script>FlashLoad(7,'TopMenu.swf','#fff',780,120);</script>
</p>
</div>
</div>
<div id="leftnav">
<div id="menu"> <a class="alt" href="#content"><strong>Skip to Content</strong></a>
<script>FlashLoad(7,'menu1.swf','#fff',144,365);</script>
</div>
</div>
<div id="rightnav">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="content">
<h2>Test</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non mi id
erat fermentum hendrerit. Aenean lectus. Donec dolor. Curabitur enim quam,
dignissim vel, blandit sed, mattis a, leo. Donec ullamcorper. Sed porttitor
magna sit amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis, egestas id,
neque. Integer at nulla. Nam fringilla mi ac augue commodo ornare. Donec ornare,
dui vitae convallis congue, augue dui blandit sapien, in faucibus mauris massa
consectetuer purus. </p>
<table width="418" border="1">
<tr>
<td><p>Example Text Block </p>
<p>&nbsp;</p>
<p>Content: <br />
Mr. Jason Miller </p>
<p>EUROPA<br />
D-60313 Frankfurt am Main<br />
K&ouml;nigsstarsse 33</p>
<p><br />
Tel. &nbsp;+49 (0) 69 777 777 777<br />
Fax. +49 (0) 69 777 777 778</p></td>
<td align="left" valign="top"><p>Example Text Block </p>
<p>&nbsp;</p>
<p>Content: <br />
Mr. Jason Miller </p>
<p>EUROPA<br />
D-60313 Frankfurt am Main<br />
K&ouml;nigsstarsse 33</p>
<p><br />
Tel. &nbsp;+49 (0) 69 777 777 777<br />
Fax. +49 (0) 69 777 777 778</p></td>
</tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non mi id
erat fermentum hendrerit. Aenean lectus. Donec dolor. Curabitur enim quam,
dignissim vel, blandit sed, mattis a, leo. Donec ullamcorper. Sed porttitor
magna sit amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis, egestas id,
neque. Integer at nulla. Nam fringilla mi ac augue commodo ornare. Donec ornare,
dui vitae convallis congue, augue dui blandit sapien, in faucibus mauris massa
consectetuer purus. </p>
<p>&nbsp;</p>
<p align="justify">&nbsp;</p>
</div>
<div id="footer">
<p>Copyright &copy; - 2005 First Future Corporation - All rights reserved. </p>
</div>
</div>

</body>
</html>
CSS:

* {
margin: 0;
padding: 0;
}
body {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
}
#container {
background-color: #D4E5F7;
width: 780px;
margin-left: auto;
margin-right: auto;
border: 3px solid #FFFFFF;
line-height: 130%;
}
.alt {
display: none;
}
#top {
height: 120px;
border-top-color: #94BDD6;
border-top-width: 10px;
border-top-style: solid;
text-align: left;
background-color: #FFFFFF;
}
#top h1 {
padding: 0;
margin: 0;
visibility: hidden;
}
#leftnav {
float: left;
width: 170px;
text-align: center;
background-color: #D4E5F7;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #FFFFFF;
padding-top: 2.5em;
}
#rightnav {
float: right;
width: 170px;
text-align: center;
background-color: #D4E5F7;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #FFFFFF;
padding-top: 2.5em;
}
#content {
margin-left: 170px;
margin-right: 170px;
max-width: 36em;
background-color: #E9F2F8;
border: 3px solid #FFFFFF;
padding-bottom: 0.75em;
}
#content h2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000099;
margin-top: 0;
margin-right: 180;
margin-bottom: 0em;
margin-left: 180;
text-align: left;
background-color: #D4E5F7;
padding-top: 5px;
padding-bottom: 5px;
background-position: top;
font-size: 1em;
line-height: 1.5em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
padding-left: 0.7em;
}
#content p {
color: inherit;
line-height: 1.2em;
font-size: 0.8em;
padding-right: 1em;
padding-bottom: 5px;
padding-left: 1em;
background-color: #F5FAFC;
padding-top: 5px;
}
#footer {
color: #000000;
text-align: right;
font-size: 0.75em;
border-top-width: 10px;
border-top-style: solid;
border-top-color: #96C0D8;
background-color: #FFFFFF;
}
#leftnav p, #rightnav p { margin: 0 0 1em 0;
}
#container #content pre {
background-color: #F5FAFC;
padding-left: 4em;
}
Twey
07-29-2006, 03:51 PM
<div class="textblockcontainer">
<div>
<p>Example Text Block </p>
<p>&nbsp;</p>
<p>Content: <br />
Mr. Jason Miller </p>
<p>EUROPA<br />
D-60313 Frankfurt am Main<br />
K&ouml;nigsstarsse 33</p>
<p><br />
Tel. &nbsp;+49 (0) 69 777 777 777<br />
Fax. +49 (0) 69 777 777 778</p></div>
<div><p>Example Text Block </p>
<p>&nbsp;</p>
<p>Content: <br />
Mr. Jason Miller </p>
<p>EUROPA<br />
D-60313 Frankfurt am Main<br />
K&ouml;nigsstarsse 33</p>
<p><br />
Tel. &nbsp;+49 (0) 69 777 777 777<br />
Fax. +49 (0) 69 777 777 778</p>
</div>
</div>
div.textblockcontainer {
width: 418px; /* Warning: don't use absolute units. */
border: 1px solid black;
}

div.textblockcontainer div {
float: left;
width: 50%; /* 100 divided by the number of columns. You can vary it, but wacky things will happen if all the columns add up to more than 100%. */
}
Cheng
07-29-2006, 04:13 PM
Hi Twey.

That works great.
I appreciate it very much.
Only one thing.
I need to know also what has to be changed to make it 3 columns instead of 2?

Thanks again for your help.

Cheng
---------------------------
Oops, I ran into a problem.
Now if I want to add text below that table, the text that I place just underneath it will show up in the browser about 15 lines or more down below the table.
If that could be fixed together with knowing how to make 3 columns I would be done.
Hope you can help me here again.
Twey
07-29-2006, 06:25 PM
Just add another DIV and make sure they don't add up to more than 100%, say by using a 33% width in the CSS.
Now if I want to add text below that table, the text that I place just underneath it will show up in the browser about 15 lines or more down below the table.Demo page?

P.S. before diving into XHTML, you should know this (http://www.hixie.ch/advocacy/xhtml).
Cheng
07-30-2006, 03:52 AM
Hi Twey.

Sorry, that was my mistake and I worked it out already.
Just tell me please what to do if I need 3 columns.
After that I think I got it.

Thanks again very much.

Cheng
Twey
07-30-2006, 01:34 PM
I repeat:
Just add another DIV and make sure they don't add up to more than 100%, say by using a 33% width in the CSS.
Cheng
07-30-2006, 02:20 PM
Hi Twey.

Thanks a lot and I'll try it out right away.
It's amazing stuff to work without tables.
If someone understands all that like you do I bet you can do very nice things with it.

Thanks again very much.

Cheng
Twey
07-30-2006, 02:27 PM
It's amazing stuff to work without tables.Complicated, is what it is. :) But then, my CSS is rather poor.

If someone understands all that like you do I bet you can do very nice things with it.Like... have a slightly faster page! And... columns that aren't bound to one another's heights! :p