layout examples

"I prefer showing you how to do, instead of doing it for you"
CraXoR

All these layout codes have been checked for the V2

N.B. : All these codes can be copied and pasted on your howrse page, or modified as you want !

But please, don't tell the other players that you made the layouts yourself... Learn how to share, not how to lie !

layout N°1

elements for the layout

background picture

I took a basic picture, and I added the title
(using photoshop)
dimensions : 800 X 600

color for the second table

background color of the table:
bgcolor="#d8b281"

background color of the rollbox:
background-color: rgb(235, 213, 186);

you can use another background picture

keep the same dimensions : 800X600
host your picture and get an url, and replace in my code, after: background=

html code

to copy this code, click inside the frame,
CTRL + C
and paste it in your html code frame : CTRL + V

<center><table background="http://craxor.free.fr/crixorcluwb/images/2chevx2.png" cellpadding="0" cellspacing="0" height="590" width="800"><tbody> <tr> <td colspan="2" height="228"> </td> </tr> <tr> <td width="411"> </td> <td valign="top" width="387"><div align="left"> <h4><span style="color: rgb(86, 86, 86);">here you can put a title.....</span> </h4> <br> text text text text text text text text text text text text <br> text text text text text text text text text text text text <br> text text text text text text text text text text text text <p> </p> <hr align="left" width="350"> <p> </p> <h4><span style="color: rgb(86, 86, 86);">here you can put a title.....</span> </h4> <br> text text text text text text text text text text text text <br> text text text text text text text text text text text text <br> text text text text text text text text text text text text <p> </p> <hr align="left" width="350"> <p> </p> <h4><span style="color: rgb(86, 86, 86);">here you can put a title.....</span> </h4> <br> text text text text text text text text text text text text <br> text text text text text text text text text text text text <br> <p> </p> <hr align="left" width="350"> <p>   </p> </div></td> </tr> </tbody></table> <table align="center" bgcolor="#d8b281" border="0" cellpadding="0" cellspacing="0" width="800"> <tbody><tr> <td height="400" width="60"></td> <td height="400" width="650"><div align="center"></div> <div style="border: 1px solid rgb(0, 0, 0); overflow: auto; float: left; width: 630px; height: 300px; background-color: rgb(235, 213, 186);"> <div align="center"> <p> </p>  text text text text text text text text text text <br> text text text text text <p> </p> text text text text text text text text text text <br> text text text text text text text text text text <br> text text text text text <br> text text text text text text text text text text <br> text text text text text text text text text text <br> text text text text text <br> text text text text text text text text text text <br> text text text text text text text text text text <br> text text text text text <p> </p> text text text text text text text text text text <br> text text text text text text text text text text <br> text text text text text <br> text text text text text text text text text text <br> text text text text text text text text text text <br> text text text text text <br> text text text text text text text text text text <br> text text text text text <p> </p> text text text text text text text text text text <br> text text text text text text text text text text <br> text text text text text <br> text text text text text text text text text text <br> text text text text text text text text text text <br> text text text text text <p> </p> </div> </div> </td> <td></td> </tr> </tbody> </table></center>

the result

examples on howrse

Rie2Rie

Has used this sort of layout coding, but with another picture, so the text is on the left and not on the right on the picture. Nice work !

layout N°2

elements for the layout

background pictures

I made 3 pictures :
- Top banner = header (820 X220)
- Background middle picture (820 X 85)
- Bottom banner = footer (820 x 51)

(to do that, you make the whole picture, and then you cut it into 3 pieces)

The Center picture will stay behind the text, or the pictures, or even the rollboxes that you will put in the center column, and will be multiplied on the height of your page.

In the center space, I created a table, with 3 columns :
- left column width=70 => must stay empty
- center column width=680 => to put text, pictures, rollboxes...
-right column width=70 => must stay empty

use your own pictures

keep the same dimensions : width=820 for the 3 pictures
host your pictures and get an url, and replace in my code, after: background=

Header :

Center :

Footer :

html code

to copy this code, click inside the frame,
CTRL + C
and paste it in your html code frame : CTRL + V

<center><table border="0" cellpadding="0" cellspacing="0" width="820"> <tbody><tr><td><div align="center"><img src="http://craxor.free.fr/crixorcluwb/images/rh_header.gif" height="220" width="820"></div></td></tr> <tr><td background="http://craxor.free.fr/crixorcluwb/images/rh_center.gif"> <table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr> <td width="70"> </td> <td width="760"><div align="center"><br><br> <h1>Title</h1> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br><br><br> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br><br><br> <hr width="500"> <br><br> <h1>Title</h1> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br><br><br> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br><br><br> text text text text text text text text text text text text text text text <br> text text text text text text text text text text text text text text text <br><br><br> </div></td> <td width="70"> </td> </tr></tbody></table> </td></tr> <tr><td><div align="center"><img src="http://craxor.free.fr/crixorcluwb/images/rh_footer.gif"></div></td></tr> </tbody></table></center>

the result

layout N°3

elements for the layout

background picture

I took a basic picture, and I added the title
(using photoshop)
dimensions : 800 X 520

color for the second table

background color of the table:
bgcolor="#363737"

background color of the 2 rollboxes:
background-color: rgb(102, 102, 102);

color for the fieldset in the second table

border of the fieldset (white) :
rgb(255, 255, 255);

title :
font-family: century gothic;
color: rgb(255, 255, 255); (white)
font-size: 15px;

text :
font-family: century gothic;
color: rgb(255, 255, 255); (white)
font-size: 12px;

use your own picture

keep the same dimensions : width=800 - change the height values, host your picture and get an url, and replace in my code, after: background=

html code

to copy this code, click inside the frame,
CTRL + C
and paste it in your html code frame : CTRL + V

<center><table background="http://howrse.free.fr/pic/whitestallion.jpg" border="0" cellpadding="0" cellspacing="0" height="520" width="800"> <tbody><tr><td height="520"></td> </tr></tbody></table> <table align="center" bgcolor="#363737" border="0" cellpadding="0" cellspacing="0" height="450" width="800"> <tbody><tr><td colspan="5" height="26"></td> </tr> <tr> <td height="200" width="20"> </td> <td align="center" bgcolor="#999999" valign="top" width="370"><div style="overflow: auto; width: 360px; height: 200px;" align="center"> <h3 align="center">Title</h3> <p><span style="font-weight: bold; color: rgb(102, 102, 102);">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</span></p> </div></td> <td width="20"></td> <td align="center" bgcolor="#999999" valign="top" width="370"><div style="overflow: auto; width: 360px; height: 200px;" align="center"> <h3 align="center">Title</h3> <p><span style="font-weight: bold; color: rgb(102, 102, 102);"> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</span></p> </div></td> <td width="20"></td> </tr> <tr> <td colspan="5" bgcolor="#333333" height="224"><center> <fieldset style="border: 1px solid rgb(255, 255, 255); height: 85px; width: 740px;"><legend align="left" style="font-family: century gothic; color: rgb(255, 255, 255); font-size: 15px;">TITLE OF THE FIELDSET</legend><font style="font-family: century gothic; color: rgb(255, 255, 255); font-size: 12px; text-align: center;">TEXT OR PICTURES IN THIS FRAME...</font> </fieldset> </center></td> </tr> </tbody></table></center>

the result

layout N°4 for EC page

elements for the layout

background picture

I took a basic picture, and I added the title
(using photoshop)
dimensions : 510 X 311

color for the second table

background color of the table 'blue from the sky):
bgcolor="#4b6193"

background color of the rollboxe:
background-color: #89a1d1;

color of texts:
titles : color: rgb(112, 34, 11);
text : color: rgb(238, 238, 238);

color for the fieldset in the second table

border of the fieldset (white) :
rgb(255, 255, 255);

title :
font-family: century gothic;
color: rgb(255, 255, 255); (white)
font-size: 15px;

text :
font-family: century gothic;
color: rgb(255, 255, 255); (white)
font-size: 12px;

use your own picture

keep the same dimensions : width=510
host your picture and get an url, and replace in my code, after: background=

If your picture in higher than 311, you have to raise the height in the code for the first table and the first td (height="310")

html code

to copy this code, click inside the frame,
CTRL + C
and paste it in your html code frame : CTRL + V

<center><table align="center" background="http://craxor.free.fr/crixorcluwb/images/painthorse_ec.gif" border="0" cellpadding="0" cellspacing="0" height="310" width="510"> <tbody><tr><td height="310"></td> </tr></tbody></table> <table align="center" bgcolor="#4b6193" border="0" cellpadding="0" cellspacing="0" width="510"> <tbody><tr><td colspan="3" height="20"></td> </tr> <tr> <td height="200" width="15"></td> <td align="center" bgcolor="#89a1d1" valign="top" width="480"><div style="overflow: auto; width: 480px; height: 200px;" align="center"> <h3 align="center"><span style="color: rgb(112, 34, 11);">Title 1</span></h3> <div align="center"><blockquote><span style="color: rgb(238, 238, 238);">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br><br>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br><br>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </span><br><br><h3 align="center"><span style="color: rgb(112, 34, 11);">Title 2</span></h3><span style="color: rgb(238, 238, 238);">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br><br>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br><br>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</span><br><br><h3 align="center"><span style="color: rgb(112, 34, 11);">Title 3</span></h3><span style="color: rgb(238, 238, 238);">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br><br>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br><br>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</span></blockquote></div> </div></td> <td width="15"></td> </tr> <tr><td> <br> </td></tr> <tr><td colspan="3" bgcolor="#4b6193" height="200"><center> <fieldset style="border: 1px solid rgb(255, 255, 255); height: 200px; width: 460px;"><legend align="left" style="font-family: century gothic; color: rgb(255, 255, 255); font-size: 15px;">TITLE OF THE FIELDSET</legend><font style="font-family: century gothic; color: rgb(255, 255, 255); font-size: 12px; text-align: center;">TEXT OR PICTURES IN THIS FRAME...</font> </fieldset> </center></td> </tr> <tr><td colspan="3" align="right" bgcolor="#4b6193" height="30"><span style="color: rgb(238, 238, 238);"><em>- example of layout from CraXoR - </em></span></td></tr> </tbody></table></center>

the result

layout N°5

elements for the layout

background picture

I took a basic picture, and I added the title
(using photoshop)
dimensions : 820 X 486

color for the boxes

background color of the top and bottom boxes :
bgcolor="#999999"

background color of the left box:
bgcolor="#cccccc"

background color of the right rollbox:
bgcolor="#e4e4e4"

color of the titles :
font color="#a30875"

use your own picture

keep the same dimensions : width=820 - change the height values, host your picture and get an url, and replace in my code, after: background=

html code

to copy this code, click inside the frame,
CTRL + C
and paste it in your html code frame : CTRL + V

<center><table border="0" cellpadding="0" cellspacing="0" width="820"> <tbody><tr> <td><img src="http://craxor.free.fr/pic/horserunning.gif" height="486" width="820"></td> </tr> </tbody></table> <table border="1" bordercolor="#a30875" cellpadding="0" cellspacing="1" width="818"> <tbody><tr> <td colspan="2" bgcolor="#999999"><div align="center"> <br> <h3><font color="#a30875" face="Papyrus">Here is the description of my farm</font></h3> <br>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br> <br><br> </div></td> </tr> <tr> <td bgcolor="#cccccc" valign="top" width="299"><div style="border: 0px none ; overflow: auto; float: left; margin-left: 20px; margin-right: 10px; width: 269px; height: 300px;"> <br> <h3><font color="#a30875" face="Papyrus">Here you put a nice title</font></h3> Text Text Text Text Text Text Text Text Text<br> Text <br> Text <br> Text <br> Text <br> Text Text Text Text Text Text Text Text Text <br> Text Text Text Text Text Text Text Text Text <br> Text <br> Text <br> Text Text Text Text Text Text Text Text Text <br> Text Text Text Text Text Text Text Text Text <br> <br><br> </div></td> <td bgcolor="#e4e4e4" valign="top" width="518"><div style="border: 0px none ; overflow: auto; float: left; margin-left: 20px; margin-right: 0px; width: 498px; height: 300px;"> <br> <h3><font color="#a30875" face="Papyrus">Here you put a nice title</font></h3> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br> Text <br> Text <br> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br> Text <br> Text <br> Text <br> Text <br> Text <br> Text <br> Text <br><br> <h3><font color="#a30875" face="Papyrus">Here you put a nice title</font></h3> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br> Text <br> Text <br> Text <br> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br> Text <br> Text <br> Text <br> Text <br> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br><br> </div></td> </tr> <tr> <td colspan="2" bgcolor="#999999"><div align="center"> <br><br> <h3><font color="#ffffff" face="Papyrus">Other text here, or pictures</font></h3> <br>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br> <br><br></div></td> </tr> </tbody></table></center>

the result

layout N°6

elements for the layout

background picture

I took a basic picture, I added the title, and made a special area on the left to put the rollbox over it.
(using photoshop)
dimensions : 820 X 580

color for the boxe

color of the titles :
color: rgb(111, 65, 4);

use your own picture

keep the same dimensions : width=820 - change the height values, host your picture and get an url, and replace in my code, after: background=

html code

to copy this code, click inside the frame,
CTRL + C
and paste it in your html code frame : CTRL + V

<table style="width: 820px; height: 580px;" cellpading="0" align="center" background="http://craxor.free.fr/pic/Wild-Horse.gif" border="0" cellspacing="0"> <tbody> <tr> <td height="120" width="20"></td> <td colspan="2" height="120"></td> </tr> <tr> <td height="400" width="20"></td> <td height="400" valign="top" width="375"> <div style="overflow: auto; width: 375px; height: 400px; float: left; margin-left: 10px; margin-right: 10px;"> <span style="font-weight: bold; color: rgb(111, 65, 4);"> <h3>Here text in a rollbox : </h3>as soon as there is too much text to fit in the cell, appears a scroller ...<br>it's very usefull<br>to put a lot of informations<br>look !<br>it will do that :</span><br><br><br><span style="font-weight: bold; color: rgb(153, 153, 153);">bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br><br><br></span> </div> </td> <td height="400"></td> </tr> <tr> <td colspan="3" height="60"><div align="right"><font color="#ffffff">- layout example by CraXoR -</font></div></td> </tr> </tbody></table>

the result

layout N°7

elements for the layout

background picture

I took a basic picture, I added the titles, and made 3 special areas to put the rollbox over them.
(using photoshop)
dimensions : 800 X 700

color for the boxes

color of the titles and texts:
color: rgb(252, 252, 252);

color of background :
color: #7a7523

use your own picture

keep the same dimensions : width=800 - change the height values, and you will have to change the dimensions of the boxes too, host your picture and get an url, and replace in my code, after: background=

html code

to copy this code, click inside the frame,
CTRL + C
and paste it in your html code frame : CTRL + V

<center> <table background="http://craxor.free.fr/crixorcluwb/images/wildpony.png" border="0" height="700" width="800"> <tbody> <tr> <td colspan="5" height="165"></td> </tr> <tr> <td height="210" width="35"></td> <td height="210" valign="top" width="360"><div style="overflow: auto; width: 360px; height: 205px;"><span style="color: rgb(252, 252, 252);"><br> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br> <br> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br> <br> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br> <br> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br> </span></div></td> <td height="210" width="10"></td> <td height="210" width="330"></td> <td height="210"></td> </tr> <tr> <td colspan="5" height="60"></td> </tr> <tr> <td height="225" width="35"></td> <td height="225" width="360"><div style="overflow: auto; width: 360px; height: 225px;"><span style="color: rgb(252, 252, 252);"><br> <font size="3"><strong>My horses</strong></font><br>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br> <br> <font size="3"><strong>Reservations and offers:</strong></font><br> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br> <br> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br> <br> <font size="3"><strong>Stallions currently up for stud:</strong></font><br> <br> <b>Name </b><i> affix</i><br> GP: <br> BLUP: <br> Skills: <br> Fee: eq <br><br><br> <font size="3"><strong>Broodmares:</strong></font><br> <br> <b>Name </b><i> affix</i><br> GP: <br> BLUP: <br> Skills: <br><br><br> <font size="3"><strong>For Sale:</strong></font><br> <br> <b>Name </b><i> affix</i> <br> Breed : <br> GP: <br> BLUP: <br> Skills: <br> Price: 500eq and 1 Pass OR 3500eq <br><br> </span></div></td> <td height="225" width="10"></td> <td height="225" width="330"><div style="overflow: auto; width: 330px; height: 225px;"><span style="color: rgb(252, 252, 252);"><br> <br> <b>date</b><br> Text text text text text text text text text text text text <br> Text text text text text text text text text text text text <br> Text text text text text text text text text text text text <br> <br> <b>date</b><br> Text text text text text text text text text text text text <br> Text text text text text text text text text text text text <br> Text text text text text text text text text text text text <br> <br> <b>date</b><br> Text text text text text text text text text text text text <br> </span></div></td> <td></td> </tr> <tr> <td colspan="5"></td> </tr> </tbody> </table></center>

the result

same example, with other pictures

Arabians background picture

In the top code of the layout, change the picture url and put:

http://craxor.free.fr/crixorcluwb/images/arabians.png

Welsh ponies background

Special layout for Irish-Tetrarch, not avalaible

Wild pony background picture inverted

In the top code of the layout, change the picture url and put:

http://craxor.free.fr/crixorcluwb/images/wildponyleft.png

The position of the boxes have changed, so the layout code is different.

html code

to copy this code, click inside the frame,
CTRL + C
and paste it in your html code frame : CTRL + V

<center> <table background="http://craxor.free.fr/crixorcluwb/images/wildponyleft.png" border="0" height="700" width="800"> <tbody> <tr> <td colspan="5" height="165"></td> </tr> <tr> <td height="210" width="40"></td> <td height="210" valign="top" width="295"></td> <td height="210" width="15"></td> <td height="210" width="360"><div style="overflow: auto; width: 360px; height: 205px;"><span style="color: rgb(252, 252, 252);"><br> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br> <br> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br> <br> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br> <br> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br> </span></div></td> <td height="210"></td> </tr> <tr> <td colspan="5" height="60"></td> </tr> <tr> <td height="225" width="40"></td> <td height="225" width="295"><div style="overflow: auto; width: 330px; height: 225px;"><span style="color: rgb(252, 252, 252);"><br> <br> <b>date</b><br> Text text text text text text text text text text text text <br> Text text text text text text text text text text text text <br> Text text text text text text text text text text text text <br> <br> <b>date</b><br> Text text text text text text text text text text text text <br> Text text text text text text text text text text text text <br> Text text text text text text text text text text text text <br> <br> <b>date</b><br> Text text text text text text text text text text text text <br> </span></div></td> <td height="225" width="15"></td> <td height="225" width="360"><div style="overflow: auto; width: 360px; height: 225px;"><span style="color: rgb(252, 252, 252);"><br> <font size="3"><strong>My horses</strong></font><br>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br> <br> <font size="3"><strong>Reservations and offers:</strong></font><br> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br> <br> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br> <br> <font size="3"><strong>Stallions currently up for stud:</strong></font><br> <br> <b>Name </b><i> affix</i><br> GP: <br> BLUP: <br> Skills: <br> Fee: eq <br><br><br> <font size="3"><strong>Broodmares:</strong></font><br> <br> <b>Name </b><i> affix</i><br> GP: <br> BLUP: <br> Skills: <br><br><br> <font size="3"><strong>For Sale:</strong></font><br> <br> <b>Name </b><i> affix</i> <br> Breed : <br> GP: <br> BLUP: <br> Skills: <br> Price: 500eq and 1 Pass OR 3500eq <br><br> </span></div></td> <td></td> </tr> <tr> <td colspan="5"></td> </tr> </tbody> </table></center>

layout examples

layout N°1

elements for the layout

html code

the result

examples on howrse

layout N°2

elements for the layout

Header :

Center :

Footer :

html code

the result

layout N°3

elements for the layout

html code

the result

layout N°4 for EC page

elements for the layout

html code

the result

layout N°5

elements for the layout

html code

the result

layout N°6

elements for the layout

html code

the result

layout N°7

elements for the layout

html code

the result

same example, with other pictures

html code

you want more ?

good links

and...

sponsored links