Setembro 03, 2010, 01:57:32

Autor Tópico: [Hi5-Tutorial] códigos para fazerem Secções (NOVOS MENUS)  (Lida 175036 vezes)

0 Membros e 1 Visitante estão a ver este tópico.

  • *
  • Mensagens: 23.055
  • 342 créditos ( + )
  • Bons Posts: 211
  • Sexo: Masculino
    • Selminho Hi5
  • Referimentos: 361
Tutorial dedicado á criação de "secções" (Anchors)
Created by http://--drake--.hi5.com PunkeCas ®yaehhh!








Secções com um menu lateral do lado esquerdo



Código: [Seleccione]
<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ções com um menu lateral do lado direito



Código: [Seleccione]
<table style="margin: 0px auto;"><tr><td>

</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>

<th><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></th>
</div></table>

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



Código: [Seleccione]
<table style="margin: 0px auto;">
<div style="width: 500px; height: 50px;" class="structurediv" align="center">

<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ções com um menu na horizontal, em baixo



Código: [Seleccione]
<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>
<table style="margin: 0px auto;">
<div style="width: 500px; height: 50px;" class="structurediv" align="center">

<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>

</table>



Secções com dois menus na horizontal, um em cima e outro em baixo

Código: [Seleccione]


em breve



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



Código: [Seleccione]
<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>


Created by Punkecas ®

ps: para dois menus laterais têm de alargar a div no qual coloquem este "código" não para 650px mas sim para 750px


"Codigo" extra (necessario):

Alargar a div do hi5 (about me, interests, fav. music)

Código: [Seleccione]
<style type="text/css">
<!-- www.submundos.com/forum -->
.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: [Seleccione]

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


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

exemplo:

Código: [Seleccione]

...

<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



Resultado "Final" --> Secções com um menu lateral do lado esquerdo

http://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)   |||._.
agora é só usarem a vossa criatividade...e não a dos outros ...  |||._.
v1.2

Dirigido aos palhaços que copiam os meus tutoriais e dizem que foram eles que os criaram:

Muito sinceramente tenho pena de vocês, deve ser mesmo muito mau saber-se que não se têm capacidade para criar nada...por isso copiam o que os outros fazem né? Boa sorte, não será assim que conseguirão alguma coisa na vida. Desejo-vos mesmo muita sorte, pois só com ela é se vão safar no futuro.


By: PunkeCas














Outros tópicos úteis relacionados com o hi5:

[Hi5-Tutorial] O que é o ID?
[Hi5-Tutorial] Códigos, Truques e Dicas para o Hi5
[Hi5-Tutorial] Códigos para Personalizar Hi5
[Hi5-Tutorial] Códigos para personalizar texto
[Hi5-Tutorial] Códigos para Ocultarem itens
[Hi5-Tutorial] código para fazerem secções
[Hi5-Tutorial] Como colocar uma imagem de fundo
[Hi5-Tutorial] Cursores
[Hi5-Tutorial] Efeitos para imagens
[Hi5] Links úteis do hi5

Videos do Youtube a Reproduzir automaticamente
Colocar Imagens no Hi5 ou noutros sites

Qual o teu hi5?
Hi5 Submundos
« Última modificação: Maio 09, 2009, 15:39:21 por Riey »
Quando a boca não consegue dizer o que o coração sente o melhor é deixar a boca sentir o que o coração diz (A)


  • *
  • Mensagens: 11.862
  • 89628 créditos ( + )
  • Bons Posts: 50
  • Sexo: Masculino
    • Submundos
  • Referimentos: 583
Re: [Hi5] codigo para fazerem secçoes By: PunkeCas
« Responder #1 em: Junho 17, 2008, 20:50:26 »
bom post Punkecas ;)
« Última modificação: Junho 23, 2008, 19:56:05 por Riey »

"Quando a última árvore tiver caído, Quando o último rio tiver secado, Quando o último peixe for pescado, Vocês vão entender que... o dinheiro não se come. "