layouts

layouts

the profile page

Here is the profile page, with the white area in which you will put all what you want to present you, or your breeding farm, or anything you like...

This area has a fixed width = 820 px

but its height is not definied, it can be as high as you need

background picture

If you choose to have a background picture all over the area, take one with its width < 820 px

Like this one (800px X 600px) >

picture in the area

The background picture fits well in the white area...

Like this >

For the moment, I've only created a "table",
with a background picture,
but I've not already written anything.

the part: <tbody><tr><td></td></tr></tbody>

of the html code, is where you will determine columns and rows,
to add your texts in. For the moment there is only one row with one column.

The html code gives :
the dimensions of the table
the url of the background picture
the border (0 for no border)
the space between cells, the space inside cells around text or pictures

html code :
<table style="width: 800px; height: 600px;" align="center" background="http://craxor.free.fr/crixorcluwb/images/arabsun01_800.jpg"
border="0" cellspacing="0" cellpading="0" >
<tbody><tr><td></td></tr></tbody></table>

how to make a basic table

the basic table

<table> - goes at the beginning of the table
</table> - goes at the end of the table

rows and columns

<tr> - is the beginning of a row
</tr> - is the end of a row
<td> - is the beginning of a column
</td> - is the end of a column

example : 2 rows and 3 columns = 6 cells

TEXT 1	TEXT 2	TEXT 3
TEXT 4	TEXT 5	TEXT 6

(in this example, no borders, and no background color)

what's a cell ?

it's the zone determined by its place in a row and in a column

table with 2 rows and 3 columns :

making zones for table

Looking at the picture, you choose the zones where you want to put text, and then you determine the heights and widths of the rows and columns of your layout.

In my example, I choose to have 3 zones with text, leaving the zone with the horse picture empty >

You note the widths and heights of the zones and get :
1st row : top margin, height=90
2nd row : margin 20, picture 380, margin 20, text 325, margin
3rd row : central margin, height=50
4th row : margin 20, text 380, margin 20, text 325, margin
5th row : bottom margin, height=35

html code

html code :

result

The text is in a cell :

on row 2 => column 4

on row 4 => column 2 and column 4

In the html code, I've added the codes to put a color on the texts :

white :
<span style="color: rgb(255, 255, 255);"> text </span>

yellow :
<span style="color: rgb(255, 255, 102);"> text </span>

how to put a rollbox in a cell

choose a cell

in this example, I chose the cell : row 2 => column 4

change the cell code and put a rollbox code

old cell code :

new code for the rollbox :

<td valign="top" width="325">
<div style="overflow: auto; width: 315px; height: 200px;">
<span style="font-weight: bold; color: rgb(255, 255, 255);">
<b>Here text in a rollbox : <br>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 :</b></span><b><br><br><span style="font-weight: bold; color: rgb(255, 153, 0);">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></span></b>
</div>
</td>

result

The text is in a rollbox:

on row 2 => column 4

In the html code of rollbox you have :

width: 315px; height: 200px;
(dimensions of the rollbox)

<span style="font-weight: bold; color: rgb(255, 255, 255);"> </span>
(style of the text)

<br>
(to jump to next lign)

how to put a fieldset in a cell

choose a cell

in this example, I chose the cell : row 4 => column 2

change the cell code and put a fielset code

old cell code :

new code for the fieldset :

<td valign="top" width="380"><center>
<fieldset style="border: 1px solid rgb(255, 255, 255); height: 180px; width: 340px;"><legend align="left" style="font-family: century gothic; color: rgb(255, 255, 255); font-size: 15px;"><b>NEWS OF THE DAY ...</b></legend><font style="font-family: century gothic; color: rgb(255, 255, 255); font-size: 14px; text-align: center;">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<br><br>hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br><br>welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome </font></fieldset>
</center></td>

result

The fielset is in a cell :
on row 4 => column 2

In the html code :

border: 1px solid rgb(255, 255, 255);
(thickness and color of border)

height: 180px; width: 340px;
(dimensions of fielset)

<legend align="left" style="font-family: century gothic; color: rgb(255, 255, 255); font-size: 15px;"> </legend>
(style of title)

<font style="font-family: century gothic; color: rgb(255, 255, 255); font-size: 14px; text-align: center;"> </font>
(style of text)

add text under the picture

If you want to have a longer profile, but not changing your background picture,
you can add another table under the first table you created to put the picture in.

We will use the table code with a background color, and not to see the difference when we are changing table, take the color of the very bottom of the background picture.

Here the color is :

#131200

So the code for the new table will be that sort :

(here I put 1 row with 3 columns, and chose the height=50 - but you can have this table as long as you want... its height will automatically raise when you add things (texts, pictures...) in it.)

html code :
<table style="width: 800px;" cellpading="0" align="center" background="http://craxor.free.fr/crixorcluwb/images/arabsun01_800.jpg" border="0" cellspacing="0">
<tbody>
HERE ALL THE CODE FOR THE TEXT IN ROWS AND COLUMNS, AS SEEN ABOVE
</tbody></table>

<table align="center" bgcolor="#131200" cellpadding="0" cellspacing="0" width="800">
<tbody><tr>
<td height="50" width="100"></td>
<td height="50" width="550"><br><br><span style="color: rgb(255, 220, 2);">On the bottom of the profile, you can add more text... You just have to note the color of the background at the very bottom : here it's : #131200<br>and choose this color as the background color of another table you put under the first one which is including the picture<br>
<h3>you can also write bigger !</h3></span><br><br>
</td>
<td height="50" width="150"></td>
</tr></tbody></table>

layout : picture + rollbox

On top of the page,
a first table with a picture in background
dimensions : 800px X 360px

the picture url is :
http://craxor.free.fr/crixorcluwb/
images/arabsun02_800.jpg

Then we put a second table, including a big rollbox.
The background color of the table is the color of the bottom of the background picture used on top of the page.

Here the color is :

#e47d01

Column 1 : margin = 60
<td height="300" width="60"></td>

Column 2 : height = 300
we put a rollbox code
(dimension of rollbox : heigh 200 and width 630)

Then you can put all what you want : text, pictures...

Column 3 :margin
<td></td>

html code :
<table style="width: 800px;" align="center" background="http://craxor.free.fr/crixorcluwb/images/arabsun02_800.jpg" border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td height="360"></td></tr></tbody></table>

<table align="center" bgcolor="#e47d01" cellpadding="0" cellspacing="0" width="800">
<tbody>
<tr>
<td height="300" width="60"></td>
<td height="300" width="650">
<div style="border: 1px solid rgb(0, 0, 0); overflow: auto; float: left; width: 630px; height: 200px; background-color: rgb(194, 106, 0);">
text text text text text <br>

text text text text text <br>
</div>
</td>
<td></td>
</tr></tbody></table

you want more ?

good links

go up