[HTML] Basic Content box

[мϊкэ]

First off make a table in html with 1 column and 2 rows with a 1px space between each cell.

<table cellspacing="1">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

now fill the background of the table in with black (#000000) or whatever color you want to use.

<table cellspacing="1" bgcolor="#000000">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

The black color will be like a 1px outline of the box and it will seperate the header of the box from the main content part. Now to fill the cells so its not all black, i am going to use an image which i made in photoshop for the box header and a blue color. What you do is add a background to the <td> tags.

<table width="100" height="50" border="0" cellspacing="1" bgcolor="#000000">
        <tr> 
          <td height="20" background="head.gif"></td>
        </tr>
        <tr>           
    <td bgcolor="#598CC5">&nbsp;</td>
        </tr>
            </table>

This is what mine looks like so far:



Now just to add the tag of the box (e.g, Navigation, Content, Affiliates etc...) and what is inside the box.

<table width="100" height="50" border="0" cellspacing="1" bgcolor="#000000">
        <tr> 
          <td height="20" background="head.gif"><div align="center">Navigation</div></td>
        </tr>
        <tr>           
    <td bgcolor="#598CC5"><div align="center">Home<br>Downloads<br>Pictures<br>xEnigmA.co.uk</div></td>
        </tr>
            </table>

You can modify the fonts or whatever you want add images anything...



also you can add more rows like on the old homepage of xEnigmA.co.uk just add this below your final </tr> tag.

        <tr> 
          <td height="20" background="head.gif"></td>
        </tr>
        <tr>           
    <td bgcolor="#598CC5"></td>
        </tr>

This is exactly the code i used on the homepage instead of slicing any images no special tricks or anything... Just plain old VERY BASIC HTML

Taken from my site -
www.xenigma.co.uk

[Edited By Partie2] (Forum Moderator) Great Job, Thread has been Stuck

[Anderman]

Nice little tutoriul
But can be done much quicker without HTML by using the table tool in FP or DW

[partie2]

Thread has been stuck becuase its Fab great Job

[мϊкэ]

i originally wrote it on my forum but i thought nobody will read it ther becos nobodys ever on so i put it on here

[T0X!C-uk]

O yea this gets stuck but my 1 hour long php tutorial dont :/

[-JT-]

that stinks man, but hey good tutorial!

[Anderman]

Yea that really does smell
Oh well lifes a femail-dog

[Graphix]

Your a forum MOD, Stick it yourself? ;l

[RedStratocas]

Your a forum MOD, Stick it yourself? ;l

Not for this forum ;l Moderators are assigned forums, they cant mod all forums

[мϊкэ]

:@ i deleted the example images.. and now i cant find them :@