Conectar-se

Esqueci minha senha

Os membros mais ativos do mês

Quem está conectado
2 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 2 Visitantes

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 19 em Ter Jan 03, 2012 9:38 am
Últimos assuntos
» Equipe Web ASA Fórum
Dom Jun 24, 2012 11:15 am por Alisson Silva

» [Re-Apresentação] Fábio
Sex Maio 25, 2012 4:45 pm por Fábio

» PixelZIP ~ design&programção em só lugar
Sex Maio 25, 2012 4:44 pm por Fábio

» Pedido de logo
Dom Maio 20, 2012 10:06 am por Alisson Silva

» Kernel - Apresentação
Sab Maio 19, 2012 9:49 am por Alisson Silva

» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sab Maio 19, 2012 9:48 am por Alisson Silva

»  HEBBO HOTEL 24 HORAS ONLINE !!
Sex Maio 04, 2012 7:20 pm por Alisson Silva

» Pedido de Layout
Sex Maio 04, 2012 5:23 pm por Fonsecca

» [RESOLVIDO]TV CCE HPS 2071-D (IMAGEM SÓ EMBAIXO, ACIMA, LINHAS DE RETRAÇO E FAIXA PRÊTA NO TOPO DA TELA).
Qua Abr 11, 2012 4:07 pm por Fry

» [contato] Deixo aqui meus contatos virtuais
Qua Abr 11, 2012 3:25 pm por Fry


[TUTORIAL] Imagem flutuante

Ir em baixo

[TUTORIAL] Imagem flutuante

Mensagem por Fry em Sab Dez 31, 2011 8:35 am

A imagem flutuante é uma figura que fica em uma posição na página e acompanha a barra de rolagem. Sua utilidade é variada, desde informações e, até mesmo um pequeno logotipo do fórum.



--> Tutoriais, Dicas e Astúcias <--
Imagem flutuante




- Inserindo o códgo CSS
Para a mensagem funcionar correctamente, você deverá adicionar um código CSS na sua folha de estilos para que ela não apresente problemas:

Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS
(clique na imagem para aumentar)
[Você precisa estar registrado e conectado para ver este link.]

Onde terá de adicionar o seguinte código:
#flutuante {
display: scroll;
position: fixed;
Posição

}
Iremos compreender como definir a posição da imagem na página no próximo passo, então leia-o antes de adicionar este código á sua Folha de estilos CSS. Após adicionado, não se esqueça de clicar em Validar para salvar as alterações no código CSS.



- Definir a posição da imagem no fórum;
Para estas configuração, terá de ser adicionado algumas propriedades onde está escrito "posição" no código CSS apresentado no item anterior.

Vejamos como devemos fazer a configuração:
Primeiro deveremos definir onde ela estará posicionada em relação ao topo ou a parte inferior do fórum. Veja a aplicabilidade:
top:10px;

Vermelho -> Deverá ser top para topo da página ou bottom para a parte inferior. Lembre-se que se adicionar um não necessitará adicionar o outro.
Verde -> É a distância entre o topo ou a parte inferior, dependerá do que foi definido na indicação dada acima.

Após definir a posição vertical, teremos de definir se ele estará localizado á direita ou á esquerda. Vejamos como estruturar:
left:5px;

Vermelho -> Deverá ser left para a esquerda da página ou right para a margem direita da página. Lembre-se que se adicionar um não necessitará adicionar o outro.
Verde -> É a distância entre a margem e a imagem direita ou esquerda, dependerá do que foi definido na indicação dada acima.

Como resultado final á adicionar, no caso deste exemplo teríamos:
top: 10px;
left: 5px;



- Elaborar o código HTML
Após inserir o código CSS teremos de trabalhar o código para que o mesmo funcione. Para isso somente terá de adicionar a este código predefinido o endereço da imagem:
<img id="flutuante" src="Endereço_da_imagem" />

Vermelho -> Será o endereço da imagem que deseja adicionar. Lembre-se de que o mesmo terá de estar em um formato de imagem, caso contrário o código não irá funcionar perfeitamente.


- Teremos de inserir o código para que funcione em todas as páginas:
Devemos colocá-lo em um campo que seja mostrado em todas as páginas, como somente há um campo que se encaixe neste requisito, a descrição do seu fórum será comprometida com este código. Pode manter ambos em funcionamento, para isso basta separar o código da descrição.

Para adicionar o código aceda a:
Painel de Controle -> Geral -> Fórum -> Configurações

Ele deverá ser adicionado ao campo "Descrição do site". Caso encontre códigos nesta área, deverá colá-lo primeiro, antes de tudo mais que possa existir neste campo.

(carregue na imagem para aumentar)
[Você precisa estar registrado e conectado para ver este link.]


Foi mencionado este exemplo, mas poderá colocar este código em qualquer parte do Fórum, desde que aceite HTML, poderá fazê-lo em widgets, mensagem da Home Page, ou em mensagens, desde que estas aceitem a linguagem HTML (este não muito recomendável).


- Resultado final, com uma imagem de exemplo:

(carregue na imagem para aumentar)
[Você precisa estar registrado e conectado para ver este link.]





© Fórum dos Fóruns



[Você precisa estar registrado e conectado para ver esta imagem.] Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Imagem flutuante
avatar
Fry
Admintradores
Admintradores

Posts Posts : 175
Idade Idade : 19
Respeito Respeito : 0
Web Moedas Web Moedas : 415

http://Em breve...

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

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