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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

» Troca de nick
Imagem flutuante EmptyQua Ago 26, 2009 2:43 pm por Harker

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

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

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

» Solicitação de parceria com Br-Grand Chase
Imagem flutuante EmptyTer 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?

Imagem flutuante Left_bar_bleue0%Imagem flutuante Right_bar_bleue 0% [ 0 ]
Imagem flutuante Left_bar_bleue57%Imagem flutuante Right_bar_bleue 57% [ 4 ]
Imagem flutuante Left_bar_bleue0%Imagem flutuante Right_bar_bleue 0% [ 0 ]
Imagem flutuante Left_bar_bleue43%Imagem flutuante Right_bar_bleue 43% [ 3 ]

Total dos votos : 7

Parceiros
      Imagem flutuante Ssssmah_cpia   Imagem flutuante Banneranime   Imagem flutuante Banner-project-forum   Imagem flutuante 27115256   Imagem flutuante 24098974f7c2554m3   Imagem flutuante Untitled-2-10   Imagem flutuante A5ceda6a715b8221513a3f9   Imagem flutuante Bannerspacetutoriais   Imagem flutuante Bannerplanet      Imagem flutuante Ndodp5   BohrerWP! Sempre com voce!   BohrerWP! Sempre com voce!   Visite o Reiro Sims!   Imagem flutuante Vhcenp
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 49 em Seg Set 02, 2019 4:49 pm

Imagem flutuante

Ir em baixo

Imagem flutuante Empty 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)
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.



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


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

(carregue na imagem para aumentar)
Imagem flutuante Final10

__________________________________________________________________________


©️ Fórum dos Fóruns



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

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

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

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

Voltar ao Topo Ir em baixo

Imagem flutuante Empty 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

Imagem flutuante Empty Re: Imagem flutuante

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

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

Idade : 29
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

Imagem flutuante Empty 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
angel37
angel37
***

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

http://www.fibrosequistica.forumeiros.com

Voltar ao Topo Ir em baixo

Imagem flutuante Empty Re: Imagem flutuante

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


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