Modifying code for a simple box with text inside

[Anonymous]

I have the following code for a box. The box looks fine, when I view it. When I put text in the box, after <center> below, the box doesn't completely enclose the text. In fact it only surrounds the word 'home' on three sides, left, top and bottom. Can somone help me modify this so that all of the text, between <center> and </center> below, will fit in the box and be completely enclosed by the box borders? Thank you.


<table border="0"cellpadding="5" cellspacing="0" width="100%">
<tr>
<td>
<table border="0"cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="3" style="background: #bbc3d3;"><?php echo tep_draw_separator('pixel_trans.gif', '100%', '1'); ?></td>
</tr>
<tr>
<td style="background: #bbc3d3;" width="1"><?php echo tep_draw_separator('pixel_trans.gif', '1', '100%'); ?></td>
<td class="main">
<center>
<td width="10%"><a href=""> <font face="arial"> home</td><td><a href=""><font face="arial">how does it work</td><td><a href=""><font face="arial">contact us</td><td><a href=""><font face="arial">faq</td> <td> <a href=""><font face="arial">promote</td><td> <a href=""><font face="arial">sign-up</td><td> <a href=""><font face="arial">log-in</td>
</center>
</td>
<td style="background: #bbc3d3;" width="1"><?php echo tep_draw_separator('pixel_trans.gif', '1', '100%'); ?></td>
</tr>
<tr>
<td colspan="3" style="background: #bbc3d3;"><?php echo tep_draw_separator('pixel_trans.gif', '100%', '1'); ?></td>
</tr>
</table>
</td>
</tr>
</table>

 

[Anonymous]

Since none of us know what the "tep_draw_separator" function does, could you give us a hint, or at least give us the HTML that this code generates?

 

[Anonymous]

It draws a line, like a "horizontal rule".

 

[Anonymous]

The problem, it seems, is that your HTML is really screwed up.

From what I can tell, you're just trying to create a box with a one-pixel gray border.

Firstly, you have one table with a single cell wrapping another table. Why?

Secondly, the middle cell of your second table contains a bunch of <td/> tags, but you can't put a <td/> inside another <td/> (unless you start another nested table, which would be absurd).

Thirdly, you seem to be using GIFs to create a border. Why? This wasn't even necessary back in the bad old days of HTML 4.0.

Fourthly, you seem to be using a PHP function to generate the HTML for those GIFs, even though it isn't saving you any HTML coding. Why?

Fiftly, you have a ton of unclosed <a/> and <font/> tags. Every tag you open you have to close.

And lastly, you need to learn how to use whitespace and indentation to make your code readable. As a general rule, if one tag is inside another, it should be indented one level from its parent.

Anyway, you could accomplish exactly the same thing with about half the code (since your original code was pretty unclear, I made some assumptions about how you wanted things styled):

<style type="text/css">
	#mytable {
		border: 1px solid #bbc3d3;
		width: 100%;
		margin: 5px;
	}
	
	#mytable td {
		font-family: arial, verdana, sans-serif;
		width: 14.29%; /* assuming you want each cell to take up
		                  the same amount of horizontal space    */
		text-align: center; /* assuming you want each link centered */
	}
</style>

<table id="mytable">
	<td>
		<a href="#">Home</a>
	</td>
	<td>
		<a href="#">How does it work?</a>
	</td>
	<td>
		<a href="#">Contact Us</a>
	</td>
	<td>
		<a href="#">FAQ</a>
	</td>
	<td>
		<a href="#">Promote</a>
	</td>
	<td>
		<a href="#">Sign Up</a>
	</td>
	<td>
		<a href="#">Log In</a>
	</td>
</table>

Since you seem to be struggling with your HTML, I recomment W3Schools' section on XHTML. While you're at it, take a look at their CSS section.