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

UrbanZone :: Informática ::  :: Web :: html | Css

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

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

Mensagem por Saduny em 2009-05-24, 9:35 pm

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


Última edição por Sล∂uηy em 2009-05-24, 10:13 pm, editado 1 vez(es)


avatar
Saduny
Moderador

Masculino
Posts : 422 País de Origem :

Ver perfil do usuário http://correiacv.hi5.com/friend/p418283374--+%C2%A2%CF%83%D1%8F%

Voltar ao Topo Ir em baixo

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

Mensagem por Saduny em 2009-05-24, 9:36 pm

"Codigo" extra (necessario):

Alargar a div do hi5 (about me)

Código:
<style type="text/css">
<!-- http://urbanzone.withme.us/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.withme.us/forum.htm -->
#content-left { padding-left:250px; padding-right:250px; }
</style>


avatar
Saduny
Moderador

Masculino
Posts : 422 País de Origem :

Ver perfil do usuário http://correiacv.hi5.com/friend/p418283374--+%C2%A2%CF%83%D1%8F%

Voltar ao Topo Ir em baixo

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

Mensagem por Storm em 2009-05-24, 10:15 pm

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.


avatar
Storm
Sub Admin

Masculino
Posts : 852 País de Origem :

Ver perfil do usuário http://pwp.netcabo.pt/fernando.martim/

Voltar ao Topo Ir em baixo

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

Mensagem por Lyrical em 2009-05-25, 4:54 am

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



Paulo Rosa aka lyrical / lirycal_s, from Beira Moçambique, Mtc, é um graffiteiro um dos melhores que ja vi, free vector wallpaper graffiti
avatar
Lyrical
Administrador

Masculino
Posts : 1146 País de Origem :

Ver perfil do usuário http://urbanzone.withme.us

Voltar ao Topo Ir em baixo

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

Mensagem por Saduny em 2009-05-26, 2:56 pm

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


avatar
Saduny
Moderador

Masculino
Posts : 422 País de Origem :

Ver perfil do usuário http://correiacv.hi5.com/friend/p418283374--+%C2%A2%CF%83%D1%8F%

Voltar ao Topo Ir em baixo

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

Mensagem por Lyrical em 2009-05-26, 3:04 pm

Topico movido de Tutorias para HTML



Paulo Rosa aka lyrical / lirycal_s, from Beira Moçambique, Mtc, é um graffiteiro um dos melhores que ja vi, free vector wallpaper graffiti
avatar
Lyrical
Administrador

Masculino
Posts : 1146 País de Origem :

Ver perfil do usuário http://urbanzone.withme.us

Voltar ao Topo Ir em baixo

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

Mensagem por Saduny em 2009-05-26, 3:09 pm

oK my friend PaulO Very Happy


avatar
Saduny
Moderador

Masculino
Posts : 422 País de Origem :

Ver perfil do usuário http://correiacv.hi5.com/friend/p418283374--+%C2%A2%CF%83%D1%8F%

Voltar ao Topo Ir em baixo

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

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

UrbanZone :: Informática ::  :: Web :: html | Css

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum