Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML HTML Basics

Modifying code for a simple box with text inside

Discussing Html . Code , Software , other

Moderators: macek, egami, gesf

Modifying code for a simple box with text inside

Postby Chrisj » Thu Oct 07, 2004 10:18 am

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.

<!-- start of grey box -->
<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>
<!-- end of grey box -->
Chrisj
New php-forum User
New php-forum User
 
Posts: 3
Joined: Thu Oct 07, 2004 10:04 am

Postby swirlee » Thu Oct 07, 2004 11:48 am

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?
User avatar
swirlee
Moderator
Moderator
 
Posts: 2272
Joined: Sat Jul 05, 2003 1:18 pm
Location: A bunk in the back

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

Postby Chrisj » Thu Oct 07, 2004 2:28 pm

It draws a line, like a "horizontal rule".
Chrisj
New php-forum User
New php-forum User
 
Posts: 3
Joined: Thu Oct 07, 2004 10:04 am

Postby swirlee » Thu Oct 07, 2004 3:55 pm

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):

Code: Select all
<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.
User avatar
swirlee
Moderator
Moderator
 
Posts: 2272
Joined: Sat Jul 05, 2003 1:18 pm
Location: A bunk in the back


Return to HTML Basics

Who is online

Users browsing this forum: No registered users and 0 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.