Últimos assuntos
» Onde você vive?
Sab Nov 28, 2009 3:09 pm por sensata

» [Web Expert] - Quantos amigos há em seu perfil?
Sab Out 24, 2009 10:12 pm por Russel Crowe

» ..:::80's Series Fórum:::..
Seg Set 14, 2009 8:20 am por BPinho

» [Informática]Oque é HTML 5?
Qua Set 09, 2009 4:27 pm por Harker

» Parceria com Gcn-Grand Chase Novidades
Qua Set 09, 2009 4:25 pm por Harker

» Anúncio: Alterações na Administração - Saída do Fundador Expert
Seg Set 07, 2009 7:40 am por Harker

» Regras da sessão de "Publicidade"
Dom Ago 30, 2009 10:59 pm por Harker

» Regras da sessão de "Publicidade"
Dom Ago 30, 2009 10:54 pm por Harker

» Regras da sessão de "Publicidade"
Dom Ago 30, 2009 10:53 pm por Harker

» Regras da sessão de "Publicidade"
Dom Ago 30, 2009 10:52 pm por Harker

» Regras da sessão de "Publicidade"
Dom Ago 30, 2009 10:50 pm por Harker

» Regras da sessão de "Publicidade"
Dom Ago 30, 2009 10:47 pm por Harker

» Regras da sessão de "Publicidade"
Dom Ago 30, 2009 10:45 pm por Harker

» Entrada/Saída da Staff
Sex Ago 28, 2009 10:39 am por Harker

» [Informática] Um pixel muda tudo
Qua Ago 26, 2009 2:47 pm por Harker

» Troca de nick
Qua Ago 26, 2009 2:43 pm por Harker

» Multi-Fórum - De tudo um pouco um pouco de tudo
Qua Ago 26, 2009 9:20 am por Skulcs

» Super Web - Seu site de entretenimento
Qua Ago 26, 2009 9:16 am por Skulcs

» Portal Connected, desde design a programação! Registre-se
Qua Ago 26, 2009 9:14 am por Skulcs

» Solicitação de parceria com Br-Grand Chase
Ter Ago 25, 2009 11:22 am por Harker

Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Conectar-se

Esqueci minha senha

Votação

[Forumeiros] Que versão prefere?

0% 0% [ 0 ]
57% 57% [ 4 ]
0% 0% [ 0 ]
43% 43% [ 3 ]

Total dos votos : 7

Parceiros
                                       BohrerWP! Sempre com voce!   BohrerWP! Sempre com voce!   Visite o Reiro Sims!  
Palavras chave

Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 19 em Qui Out 07, 2010 12:02 am

Imagem flutuante

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

Imagem flutuante

Mensagem por Harker em Sab Jul 04, 2009 2:07 pm

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




1º - 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)

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.



2º - 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;

3º - 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.


4º - 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)


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


4º - Resultado final, com uma imagem de exemplo:

(carregue na imagem para aumentar)

__________________________________________________________________________


©️ Fórum dos Fóruns



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

_________________
Dicas Importantes:
- Respeite as Regras
- Esqueci a senha
- Lista de FAQ
- Não peça ajuda por MP
avatar
Harker
Administrador
Administrador

Idade : 22
Pontos : 930
Reputação : 7
Nº Mensagens : 365
Localização : Curitiba - PR
Profissão : Estudante
Humor : Triste :'(
Inscrito dia : 05/06/2009

http://webexpert.forumeiros.com/forum.htm

Voltar ao Topo Ir em baixo

Re: Imagem flutuante

Mensagem por Designer Vibe02 em Sab Jul 04, 2009 5:07 pm

POderia Dar O Codigo Completo OK

Designer Vibe02
**

Pontos : 64
Reputação : 0
Nº Mensagens : 34
Inscrito dia : 08/06/2009

Voltar ao Topo Ir em baixo

Re: Imagem flutuante

Mensagem por ~LemOn em Sab Jul 04, 2009 5:35 pm

Muito bom o tutorial !
avatar
~LemOn
*****

Idade : 27
Pontos : 397
Reputação : 3
Nº Mensagens : 180
Localização : No WebExpert
Profissão : Mecher em fóruns
Humor : Legal quando obedecem as regras =)
Inscrito dia : 18/06/2009

http://www.habbingo.forumeiro.org

Voltar ao Topo Ir em baixo

Re: Imagem flutuante

Mensagem por angel37 em Sex Jul 24, 2009 10:27 am

muito obrigada por esse tutorial,esta muito bem feito,alem que e muito util
avatar
angel37
***

Idade : 46
Pontos : 126
Reputação : 0
Nº Mensagens : 90
Inscrito dia : 15/06/2009

http://www.fibrosequistica.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Imagem flutuante

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


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