"link flutuante" no site

[Felipe M. C.]

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 Junho 2, 2008 por Felipe M. C.

[Felipe M. C.]

alguém, por favor ?! :unsure:

[seth]

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!

[Felipe M. C.]

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 !

[Eric Freitas]

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

[Felipe M. C.]

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!

[Eric Freitas]

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

[Felipe M. C.]

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 !!!!

[JCMPJ]

chiiiii!

#axe

Então é:

<div id="axe">

id não class

[Felipe M. C.]

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 !!!

[JCMPJ]

Coloca tudo assim: <head> bla bla bla <style type="text/css"> bem aqui as suas marcações </style></head>

[Añd®é™]

Para por um desses flutuantes na minha pagina que é com o HTML seria qual tag a implantar para ter um banner pessoal que fosse "link" e "flutuaasse pelo site"

Gerente proprietario da sala Coca_Cola na Brasil Chat

[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>