[TUTORIAL] Imagem flutuante

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

[TUTORIAL] Imagem flutuante Empty [TUTORIAL] Imagem flutuante

Mensagem por Solkis em 30.05.09 22:30

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)
[TUTORIAL] Imagem flutuante 1114
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)
[TUTORIAL] Imagem flutuante Img_310

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)
[TUTORIAL] Imagem flutuante Final10




© Fórum dos Fóruns



[TUTORIAL] Imagem flutuante Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Imagem flutuante
Solkis

Solkis
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/01/2008
Mensagens : 9984
Pontos Ativos : 12077

Ver perfil do usuário https://ajuda.forumeiros.com

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


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