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

http://www.xenigma.co.uk/tut/1.gif

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...

http://www.xenigma.co.uk/tut/2.gif

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

[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 :P
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 :l

[мϊкэ]

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

[Independent]

:@ i deleted the example images.. and now i cant find them :@
Nice tutorial, not sure if this is bumping. D:

Also, graphix hush. :)