[Hi5-Tutorial] Criar Secções ( Anchors )

Tutorial dedicado á criação de "secções" (Anchors)
Created by http://daniel0011..hi5.com ExeqeD' @



secçoes 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="#ExeqeD1">TITULO 1</a>
<br><br><a href="#ExeqeD2">TITULO 2</a>
<br><br><a href="#ExeqeD3">TITULO 3</a>
<br><br><a href="#ExeqeD4">TITULO 4</a>
<br></div>

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

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


escrevem1


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


escrevem2


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


escrevem3


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


escrevem4


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



secçoes com um menu lateral do lado direito


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="ExeqeD1">
<div style="width: 500px; height: 300px; overflow: auto;" align="justify"> </a>
<fieldset>


escrevem 1


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


escrevem 2


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


escrevem 3


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


escrevem 4


</fieldset>
</div>

<th><td>
<div style="width: 90px; height: 400px;" class="structurediv" align="center">
<br> <br>
<br><br><a href="#ExeqeD1">TITULO 1</a>
<br><br><a href="#ExeqeD2">TITULO 2</a>
<br><br><a href="#ExeqeD3">TITULO 3</a>
<br><br><a href="#ExeqeD4">TITULO 4</a>
<br></div>
</td></th>
</div></table>





secçoes 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="#ExeqeD1">TITULO 1</a>
<a href="#ExeqeD2">TITULO 2</a>
<a href="#ExeqeD3">TITULO 3</a>
<a href="#ExeqeD4">TITULO 4</a>

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

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


escrevem1


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


escrevem2


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


escrevem3


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


escrevem4


</fieldset>

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




secçoes com um menu na horizontal, em baixo



Código:

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

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


escrevem1


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


escrevem2


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


escrevem3


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


escrevem4


</fieldset>

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

<a href="#ExeqeD1">TITULO 1</a>
<a href="#ExeqeD2">TITULO 2</a>
<a href="#ExeqeD3">TITULO 3</a>
<a href="#ExeqeD4">TITULO 4</a>

</div>

</table>



secçoes com dois menus na horizontal, um em cima e outro em baixo


Código:


em breve




seccoes 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="#ExeqeD1">TITULO 1</a>
<br><br><a href="#ExeqeD2">TITULO 2</a>
<br><br><a href="#ExeqeD3">TITULO 3</a>
<br><br><a href="#ExeqeD4">TITULO 4</a>
<br></div>

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

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


escrevem 1


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


escrevem 2


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


escrevem 3


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


escrevem 4


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


escrevem 5


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


escrevem 5


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


escrevem 6


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


escrevem 7


</fieldset>
</div>
<a name="ExeqeD8">
<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="#ExeqeD5">TITULO 5</a>
<br><br><a href="#ExeqeD6">TITULO 6</a>
<br><br><a href="#ExeqeD7">TITULO 7</a>
<br><br><a href="#ExeqeD8">TITULO 8</a>
<br></div>
</td></th>
</div></div>
</td></tr></table>


Created by ExeqeD' @




"Codigo" extra (necessario):

Alargar a secção do about me:


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

Centrar a o profile (opcional):


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


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

exemplo:


Código:

...

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

<br><br>

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

...

<table style="margin: 0px auto;"> se alterarem a espesura de 0px para 1px ou mais irao criar um border



Resultado "Final":

https://2img.net/h/i220.photobucket.com/albums/dd245/Punkecas/hi5tut.jpg

espero que isto vos seja útil (e que parem de me perguntar como é q eu fiz o meu hi5)