Criação de secções

**branquinha** Sex Ago 07, 2009 2:47 pm

Secções situadas na parte lateral esquerda do perfil:

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="#1">Sobre mim</a> <br><br><a href="#2">Bem-Vindos</a> <br><br><a href="#3">Friends</a> <br><br><a href="#4">Photos</a> <br></div> </td><td valign="top"> <div style="width: 502px; height: 300px; overflow-y: hidden;" class="structurediv"> <a name="1"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> Eu sou o "nome do user". </fieldset> </div> <a name="2"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> Hi, </fieldset> </div> <a name="3"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> My Friends </fieldset</div> <a name="4"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> My Pictures </fieldset> </div> </div> </td></tr></table>

Secções situadas na parte lateral direita do perfil:

Código:: <table style="margin: 0px auto;"><tr><td> </td><td valign="top"> <div style="width: 502px; height: 300px; overflow-y: hidden;" class="structurediv"> <a name="**********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO </fieldset> </div> <a name="**********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO 2 </fieldset> </div> <a name="**********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO 3 </fieldset> </div> <a name="**********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO 4 </fieldset> </div> <th><td> <div style="width: 90px; height: 400px;" class="structurediv" align="center"> <br> <br> <br><br><a href="#**********">TITULO 1</a> <br><br><a href="#**********">TITULO 2</a> <br><br><a href="#**********">TITULO 3</a> <br><br><a href="#**********">TITULO 4</a> <br></div> </td></th> </div></table>

Secções com um menu horizontal, no topo do perfil:

Código:: <table style="margin: 0px auto;"> <div style="width: 500px; height: 50px;" class="structurediv" align="center"> <a href="#***********">TITULO 1</a> <a href="#***********">TITULO 2</a> <a href="#***********">TITULO 3</a> <a href="#***********">TITULO 4</a> </div> <td valign="top"> <div style="width: 502px; height: 300px; overflow-y: hidden;" class="structurediv"> <a name="*******"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO </fieldset> </div> <a name="********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO2 </fieldset> </div> <a name="*******"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO3 </fieldset> </div> <a name="*********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO4 </fieldset> </div></div></td></tr></table>

Secções com um menu horizontal, no rodapé do perfil:

Código:: <div style="width: 502px; height: 300px; overflow-y: hidden;" class="structurediv"> <a name="**********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO </fieldset> </div> <a name="**********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO2 </fieldset> </div> <a name="**********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO3 </fieldset> </div> <a name="**********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO4 </fieldset> </div></div> <table style="margin: 0px auto;"> <div style="width: 500px; height: 50px;" class="structurediv" align="center"> <a href="#**********">TITULO 1</a> <a href="#**********">TITULO 2</a> <a href="#**********">TITULO 3</a> <a href="#**********">TITULO 4</a> </div> </table>

Secções com dois menus laterais, um situado no lado esquerdo e outro no 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="#***********">TITULO 1</a> <br><br><a href="#***********">TITULO 2</a> <br><br><a href="#***********">TITULO 3</a> <br><br><a href="#***********">TITULO 4</a> <br></div> </td><td valign="top"> <div style="width: 502px; height: 300px; overflow-y: hidden;" class="structurediv"> <a name="***********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO1 </fieldset> </div> <a name="***********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO2 </fieldset> </div> <a name="***********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO3 </fieldset> </div> <a name="***********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO 4 </fieldset> </div> <a name="***********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO5 </fieldset> </div> <a name="***********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO5 </fieldset> </div> <a name="***********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO6 </fieldset> </div> <a name="***********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO7 </fieldset> </div> <a name="***********"> <div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a> <fieldset> TEXTO8 </fieldset> </div> <th><td> <div style="width: 90px; height: 400px;" class="structurediv" align="center"> <br> <br> <br><br><a href="#***********">TITULO 5</a> <br><br><a href="#***********">TITULO 6</a> <br><br><a href="#***********">TITULO 7</a> <br><br><a href="#***********">TITULO 8</a> <br></div> </td></th> </div></div> </td></tr></table>

Para os códigos atrás indicados funcionarem, deverão usar o seguinte:

Alargar a secção do sobre mim:

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

Centrar o perfil (opcional):

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

Para colocar os "titulos" dentro de caixas, deverá usar a tag fieldset:

Código:: <fieldset><a href="#***********">TITULO 1</a></fieldset> <br><br> <fieldset><a href="#***********">TITULO 2</a></fieldset> <table style="margin: 0px auto;">

Para criar um border deverão aumentar o valor de px (pixeis) para um valor superior a 0