Tutorial para a criação de "secções"

Secções com um menu lateral do lado esquerdo

Código:

<table style="margin: 0px auto;"><tr><td>
<div style="width: 90px; height: 400px;" class="structurediv" align="center">
<br> <br>
<br><br><a href="#sec1">TITULO 1</a>
<br><br><a href="#sec2">TITULO 2</a>
<br><br><a href="#sec3">TITULO 3</a>
<br><br><a href="#sec4">TITULO 4</a>
<br></div>

</td><td valign="top">
<div style="width: 502px; height: 300px; overflow-y: hidden;" class="structurediv">

<a name="sec1">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem1


</fieldset>
</div>
<a name="sec2">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem2


</fieldset>
</div>
<a name="sec3">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem3


</fieldset>
</div>
<a name="sec4">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem4


</fieldset>
</div>
</div>
</td></tr></table>

Secções com um menu na horizontal, em cima

Código:

<table style="margin: 0px auto;">
<div style="width: 500px; height: 50px;" class="structurediv" align="center">

<a href="#sec1">TITULO 1</a>
<a href="#secs2">TITULO 2</a>
<a href="#sec3">TITULO 3</a>
<a href="#sec">TITULO 4</a>

</div>
<td valign="top">
<div style="width: 502px; height: 300px; overflow-y: hidden;" class="structurediv">

<a name="sec1">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem1


</fieldset>
</div>
<a name="sec">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem2


</fieldset>
</div>
<a name="sec3">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem3


</fieldset>
</div>
<a name="sec4">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem4


</fieldset>

</div></div></td></tr></table>


Secções com dois menus laterais, um do lado esquerdo e outro do lado direito

Código:

<table style="margin: 0px auto;"><tr><td>
<div style="width: 90px; height: 400px;" class="structurediv" align="center">
<br><br>
<br><br><a href="#sec1">TITULO 1</a>
<br><br><a href="#sec2">TITULO 2</a>
<br><br><a href="#sec3">TITULO 3</a>
<br><br><a href="#sec4">TITULO 4</a>
<br></div>

</td><td valign="top">
<div style="width: 502px; height: 300px; overflow-y: hidden;" class="structurediv">

<a name="sec1">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem 1


</fieldset>
</div>
<a name="sec2">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem 2


</fieldset>
</div>
<a name="sec3">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem 3


</fieldset>
</div>
<a name="sec4">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem 4


</fieldset>
</div>
<a name="sec5">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem 5


</fieldset>
</div>
<a name="sec5">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem 5


</fieldset>
</div>
<a name="sec6">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem 6


</fieldset>
</div>
<a name="sec7">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem 7


</fieldset>
</div>
<a name="sec8">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem 8


</fieldset>
</div>

<th><td>
<div style="width: 90px; height: 400px;" class="structurediv" align="center">
<br> <br>
<br><br><a href="#sec5">TITULO 5</a>
<br><br><a href="#sec6">TITULO 6</a>
<br><br><a href="#sec7">TITULO 7</a>
<br><br><a href="#sec8">TITULO 8</a>
<br></div>
</td></th>
</div></div>
</td></tr></table>

colocar os "titulo" dentro de caixas, usem a tag fieldset !

Código:

<fieldset><a href="#sec1">TITULO 1</a></fieldset>

<br><br>

<fieldset><a href="#sec2">TITULO 2</a></fieldset>

...

<table style="margin: [color=red]0[/color]px auto;">

se alterarem a espesura de 0px para 1px ou mais irao criar um border








Created by SadunY

Depois mudem

-onde diz Escreve aqui 1,2,3,4....
-titulo1,2,3,4
-cor texto,cor linhas, cor fundo,url imagem fundo

Alguma duvida que tenham a criar/usar secções, digam !!!???

"Codigo" extra (necessario):

Alargar a div do hi5 (about me)

Código:

<style type="text/css">
<!-- http://urbanzone.forumeiros.com/forum.htm -->
.box_profile_info_small_content { width:650px !important;}
#content-left { width:650px; height:900px  !important;}
#content-right {width:0px !important;}
#interests, #lifestyle { width:650px; height:800px !important;}
</style>

Centrar a o profile (opcional):

Código:

<style type="text/css">
<!-- http://urbanzone.forumeiros.com/forum.htm -->
#content-left { padding-left:250px; padding-right:250px; }
</style>

Obrigado pela ajuda estou em testes a ver se dá resultado e parte das cenas já funcionam o que me falta é colocar o menu no topo pois fica sempre em baixo.

Eu penso que o melhor lugar para este topico deve ser em html...

na boa Por mim pode mudar-lo para "html" !!!!

Topico movido de Tutorias para HTML

oK my friend PaulO