[Tutorial] Secçoes

Secçoes com menu lateral no 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="#ByPunkeCas1">TITULO 1</a>
<br><br><a href="#ByPunkeCas2">TITULO 2</a>
<br><br><a href="#ByPunkeCas3">TITULO 3</a>
<br><br><a href="#ByPunkeCas4">TITULO 4</a>
<br></div>

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

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


escrevem1


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


escrevem2


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


escrevem3


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


escrevem4


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



Secçoes com menu na horizontal:

Código:

<a href="#ByPunkeCas1">TITULO 1</a>
<a href="#ByPunkeCas2">TITULO 2</a>
<a href="#ByPunkeCas3">TITULO 3</a>
<a href="#ByPunkeCas4">TITULO 4</a>

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

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


escrevem1


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


escrevem2


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


escrevem3


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


escrevem4


</fieldset>

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

Secçoes com dois menus laterais, um do lado esquerdo 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="#ByPunkeCas1">TITULO 1</a>
<br><br><a href="#ByPunkeCas2">TITULO 2</a>
<br><br><a href="#ByPunkeCas3">TITULO 3</a>
<br><br><a href="#ByPunkeCas4">TITULO 4</a>
<br></div>

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

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


escrevem 1


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


escrevem 2


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


escrevem 3


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


escrevem 4


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


escrevem 5


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


escrevem 5


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


escrevem 6


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


escrevem 7


</fieldset>
</div>
<a name="ByPunkeCas8">
<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="#ByPunkeCas5">TITULO 5</a>
<br><br><a href="#ByPunkeCas6">TITULO 6</a>
<br><br><a href="#ByPunkeCas7">TITULO 7</a>
<br><br><a href="#ByPunkeCas8">TITULO 8</a>
<br></div>
</td></th>
</div></div>
</td></tr></table>


Código extra (necessario)

Código:

<style type="text/css">
#content-left, #col1 {
width: 650px;
padding-left: 0px;
}
</style>


Centrar o profile (opcional)

Código:

<style type="text/css">#content-left { padding-left:250px; padding-right:250px; } <style>

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

Código:

...

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

<br><br>

<fieldset><a href="#ByPunkeCas2">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

Fonte:Punkecas --> Forumhi5 -> Fazganza -> meu bloco de notas -> e agora qui