Ir para conteúdo
Fórum Script Brasil
  • 0

"link flutuante" no site


Felipe M. C.

Pergunta

buenas !

sempre dei umas bisbilhotadas no site, em geral, para alguns esclarecimentos quanto a algumas dúvidas que tive e me impressiona a prontidão dos membros deste fórum para auxiliar aos que lhes vêm solicitar ajuda...

bom, agora, sou mais um ! hehe..

estou com um projeto de um blog com assuntos diversos, com contribuições de alguns amigos e outros "grandes" do meio blogueiro.

mas, por hora, o que montei foi apenas o layout dele, que ainda está bem toscão, na questão de banners, menus, organização, ... mas isso tudo será melhorado !

uma coisa que me pareceu bem interessante para que eu colocasse em meu blog foi um tipo de link flutuante que vi num site bastante interessante que conheci há pouco tempo:

http://papodehomem.com.br

me refiro ao link do merchan da axe que fica fixo no topo da página... (perdão se não pode esse tipo de propaganda de site aqui no fórum! se não puder, edito o post na mesma hora...)

tentei ver o css do blog e copiar/editar alguns códigos, mas não funcionou quando testei.

como a verba tá curta para um domínio .com, .com.br, etc., estou hospedando o site, temporariamente, pelo blogger...

não sei se tem algo a ver com a hospedagem, pois vi algumas diferenças no código fonte do site e do meu blog quando inseri as tags...

enfim... será que é possível usar isso no blogger ? como ?! que partes do css e do código do site precisaria editar para usar ?

e, também, como faço para ter o arquivo .css em separado do código do blog ? isso só acontece em domínios registrados desse tipo ???

agradeço desde já a atenção e a quem puder me ajudar !!!! muito obrigado.

abraços.

Felipe.

Editado por Felipe M. C.
Link para o comentário
Compartilhar em outros sites

12 respostass a esta questão

Posts Recomendados

  • 0

No blogger, pelo que sei há uma opção para editar o CSS ...

Acho que não dá para hospedar arquivos .css no servidor do blogger, mas indo em Layout -> Editar HTML, você edita o HTML ...

falou E VLW!

Link para o comentário
Compartilhar em outros sites

  • 0

certo, isso eu tenho noção. mas sobre a minha solicitação, isso seria o de menos agora...

o que tá me quebrando a cabeça é esse código pra fazer um link tipo o desse site, pois não sei que partes do código do css eu copio/altero e como/onde adicionar o elemento na página para que fique do mesmo modo que neste site.

se alguém puder me ajudar nisso, agradeço muito !

Link para o comentário
Compartilhar em outros sites

  • 0

resposta simples, prática e fácil:

CSS ->

crie sua div, posicione ela no topo da página e add essas propriedados

position:fixed;
z-index:5; /*5 porque num sei até qual você usa.. se algo passar por cima coloca 6, 7, 8 sei lá..

prontinho, sua div flutuante está funcionando!

fixed do posicionamento deixa o elemento fixo como já diz o nome

z-index é como se fossem camadas.

espero q tenha ajudado! =D

Link para o comentário
Compartilhar em outros sites

  • 0

desculpe a ignorância, mas o que eu tentei fazer, conforme tuas instruções, não funcionou... acho que não saquei muito bem (com certeza foi isso...) o que tu explicou!

o link foi tirado do site, mas, olhando o css que eles usam, acredito que seja essa parte abaixo a que tenho de copiar, certo ?!?!

---------------------------------

#axe {

height: 20px;

width: 100%;

margin: 0 auto;

background-color: #333333;

color: #fff;

font-size: 95%;

border-bottom:1px thin #333333;

position: fixed;

}

#axe a {

text-decoration:none;

color: #fff;

}

#axe a:hover {

text-decoration:none;

color: #ffcc33;

font-weight: bold;

}

--------------------------------

é aqui que eu deveria adicionar o "z-index:5;" ?

na verdade, ficou como elemento 13, mas isso não vem ao caso...

o que eu gostaria de saber é:

- o que tenho de adicionar ao html do blog para, depois de criado o elemento, funcione corretamente ?

- no novo elemento que adicionarei à página, o que devo colocar ???

se não for abusar muito da boa vontade de vocês, haveria a possibilidade de colocar o código completo, pros dois casos, de como devo usar isso ???

sou leigo nessas coisas e não sei como proceder corretamente para isso... foi mal !

novamente, agradeço a atenção !!! muito obrigado mesmo!

Link para o comentário
Compartilhar em outros sites

  • 0

você ta usando isso onde?

axe é uma div?

->position: fixed só vai fixar tua div, você pode subir ou decer a barra de rolagem q a div vai ficar estática sem movimento, não sei se essa propriedade funciona com span ou com elementos tipo a, ou img ou sei la uq..

o z-index como já dito é a camada.

imagine o 2 vem depois do 1 então 1 fica por trás do 2 e assim por diante.

pode ser teu navegador também q não trabalha muito com css o que é o caso do ie 6..

Link para o comentário
Compartilhar em outros sites

  • 0

desculpe a ignorância, mas não estou conseguindo acertar ao tentar inserir isso no blog... sou bastante leigo nessas coisas!

não sei se tu viu no site quando ele ainda aparecia, mas era uma barra fixa, escura que continha um texto publicitário da AXE e que abria outra página...

a div que ficava no site era mais ou menos assim:

<div class="axe">

<a href="http://www.um_endereço_qualquer.com.br">Exemplo</a>

</div>

e o trecho do arquivo .css que copiei do site, acredito eu que seja a formatação e definição das propriedades desse link...

o que eu estava tentando fazer era inserir esse trecho do css no html do blog e, após isso, criar um novo elemento dentro do layout dele com esse formato que citei acima... o resultado foi um link normal "intrometido" no meio da página! :wacko:

o browser, creio eu, que não influencie, pois uso o firefox 2.x e o ie 7...

não sei o que estou fazendo de errado, pois, aparentemente, era para ter funcionado...

vocês poderiam me orientar o que devo fazer, ou corrigir na forma atual que estou tentando fazer ???

haveria mais algum código para adicionar para que funcione ? talvez de outro css do site ?!

desculpem o abuso, mas teria como me passarem exatamente o que eu deveria inserir na página ?!?! seria algo só no layout do blog (a parte de adicionar elementos e tal...) ou tanto nessa como no html do template ????

muito obrigado pela atenção!!! valeu mesmo !!!!

Link para o comentário
Compartilhar em outros sites

  • 0

puts, que mancada... :P

bueno... agora o maldito ficou fixo lá ! valeu!!!

o problema é que o link não fica como no site, numa barra escura bem no topo da página...

ele está posicionado bem à esquerda e bem abaixo do topo da página..... :wacko:

agora, nesse caso, como o "position:fixed" e o "z-index" eu adicionei direto ao div, pelo ' style="" ' funcionaram, eu gostaria de saber se, levando em conta o resto das propriedades do trecho do css que eu copiei do site, para que funcione seria colocando tudo isso direto no style do div mesmo para resolver ?!

se for isso, como adicionar tudo o que está no código, inclusive as propriedades do hover no link ?????????

gostaria que ficasse bem no topo, em uma barra com a cor diferenciada do fundo da página, com as mesmas propriedades que ficavam como no outro site...

foi mal a minha falta de conhecimento nesse assunto, amigos...

os agradeço muito pela ajuda que estão dando !!!

Link para o comentário
Compartilhar em outros sites

  • 0
Guest gilvani perazza

css para fixar link:

a:link.x, a:visited.x, a:active.x {
  position: fixed;  /* IMPORTANTE essa regra mantem o link fixo*/
  /*
  outras propriedades
  */
}
a:hover.x {
  /*
  outras propriedades
  */
}

onde: x = nome da classe do link ex.:

<a class="x" href="">fixed link!!!</a>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...