Olá, Visitante. Por favor Entre ou Registe-se se ainda não for membro.
4 de Dezembro de 2008, 21:32:07
Início Ajuda Pesquisa Entrar Registe-se
Notícias: REGISTE-SE JÁ NO REDCODESTUDIO!
A sua Comunidade de Desenvolvimento Web


+  Redcodestudio
|-+  Webmaster's Lounge
| |-+  Tutoriais e Howto's
| | |-+  [Howto's]: CSS
« anterior seguinte »
Páginas: [1] Ir para o fundo Imprimir
Autor Tópico: [Howto's]: CSS  (Lida 2522 vezes)
redhotmustang
Administrador
Emblema de Bronze
*****
Offline Offline

Mensagens: 515



Ver Perfil WWW
« em: 5 de Março de 2007, 00:55:35 »

Os Howto's relativos ao tema das CSS são respostas rápidas a problemas com os quais nos deparamos e queremos deixar escrito nalgum lado, caso nos escapem da memória.

Notem que os Howto's são diferentes dos tutoriais na medida em que são menos extensos e menos explicativos.

Todos os Howto's do Redcodestudio sobre o tema CSS, deverão ser colocados neste tópico apenas, pelo menos por enquanto.

Lista de Howto's sobre CSS

- Link sempre encostado ao fundo da página

Cumps.
Registado

Programação Web e Flash ActionScript

Se quiser agradecer a qualquer membro que o tenha ajudado, fale do Redcodestudio aos seus amigos!
Problemas c/ o fórum? Envia-me 1 mail
gimbras
Emblema de Prata
****
Offline Offline

Mensagens: 1103



Ver Perfil WWW
« Responder #1 em: 5 de Março de 2007, 01:08:43 »

Link sempre encostado ao fundo da página

E que tal começar já por um?

Sempre gostei daquele truque onde à medida que fazemos scroll down numa página temos sempre a companhia de uma div que contém um link para voltar ao topo da página.

É uma óptima técnica de evitar termos de colocar o mesmo link (Voltar ao Topo) vezes e vezes sem conta.

Mas como se faz com as CSS?

Simples. Temos de nos perguntar o queremos fazer.
A resposta é que desejamos que exista um link sempre encostado ao canto inferior direito da nossa página.

Então e como fazê-lo?

Ainda mais simples.
Criamos uma div cuja posição está definida para estar a zero pixels da margem direita, e a zero pixels da margem do fundo da página.

Código:
.divTopo {
position:fixed;
bottom:0;
right:0;
}


E no nosso HTML, temos de dar à nossa div a class acabada de criar.

Código:
<div class="divTopo"><a href="#topo">Voltar ao Topo</a></div>


Simples.

Cumps.
PS: Não funciona no Internet Explorer, pelo menos na versão 6.
Registado

redhotmustang
Administrador
Emblema de Bronze
*****
Offline Offline

Mensagens: 515



Ver Perfil WWW
« Responder #2 em: 5 de Março de 2007, 01:18:17 »

Este primeiro Howto, é um exemplo perfeito do que queremos. Contamos com os vossos!

PS: É um excelente exemplo, contudo como foi o primeiro Howto o gimbras quis aprimorar mais a coisa e apresentou o contexto do problema antes da sua resolução.

Isto nem sempre é necessário. Basta dar um título ao Howto, e colocar a resposta. Curto e rápido.

Cumps.
Registado

Programação Web e Flash ActionScript

Se quiser agradecer a qualquer membro que o tenha ajudado, fale do Redcodestudio aos seus amigos!
Problemas c/ o fórum? Envia-me 1 mail
Páginas: [1] Ir para o topo Imprimir 
« anterior seguinte »
Ir para:  


Entrar com nome de utilizador, password e duração da sessão


Powered by MySQL Powered by PHP Powered by SMF 1.1.4 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks
XHTML 1.0 válido! CSS válido!
Página criada em 0.052 segundos com 19 procedimentos.