Postagens | Dicas blog, Imagem, Pc Windows

Div ou imagem parada e ou sobreposta

Se você quer sobrepor um conteúdo com uma div ou imagem tente algumas tags style="position:absolute; z-index: 100;" ou manter parado position:fixed; e alinhamentos left:1px; top:1px;
Para esconder displey:none;

Talvez uma dica de busca seja posicionamento de div css
Posicionamento de imagem css position:absolute;

Esse post tenta mostrar como eu fiz para deixar essa div com imagem sobre o texto e outras divs, porém está complicado por que no IE 6(Internet Explorer 6) e anterior não funciona.

Se você usa o Mozilla está vendo ela parada no canto inferior direito da tela.
No IE 6 ela está no fim da página, isso por que não funciona nele, e não funciona com determinada versão de html quer tentar entender leia colocar cor na scrollbar no blogspot(com IE).

As imagens que usei são essas, ficaria melhor com uma gif transparente, mais ta funcio.
Se clicar na imagem no canto direito e inferior(ou a que está zanzando, quando desse a página) a pagina vai ao topo.
Se for usar uma imagem publicada no blogger, como eu fiz é bom não pegar essa que abre em uma pagina quando clica sobre ela, mas sim aquela indicada no código fonte <img src="http.... e ao invés de aparecer na pagina talvez irá baixar a imagem perguntando se é pra salvar ou abrir. Um exp: é link que deixei abaixo de 2 imagens.
http://3.bp.blogspot.com/_NrcfzTud13U/R_nZC8mUR7I/AAAAAAAAABA/emL7FGn8soc/s200/top.GIF




http://2.bp.blogspot.com/_NrcfzTud13U/R_nY2smUR6I/AAAAAAAAAA4/TDid1yqZu9w/s200/subir.GIF

Essa parte(abaixo) irá após <style type='text/css'> ou no caso do HTML do blogger algo como <![CDATA[/*
Mas dento do style, ou entre um dos códigos acima e antes de seu "fechamento" com </style> Isso no caso de style CSS incluso na página.


<style type='text/css'>

div.irtopo img { position:fixed; bottom:0; right:0;display:block;color:#333;text-align:center;
}/* a.irtopo img {display:none;} */
<!--[if lte IE 6]>
div.irtopo img {
position:absolute; bottom:-100px; right:0;
text-align:left; width:expression(document.body.clientWidth
> 1000? "1000px": "auto" ); width:73%;
}<![endif]-->

</style>


Div ou imagem que fica parada e ou sobreposta mesmo subindo a pagina usa apenas CSS





A DIV coloquei no final do HTML entre as <body> </body>



<div class='irtopo'><a href='#header'><img alt='Subir ao topo' src='http://3.bp.blogspot.com/_NrcfzTud13U/R_nZC8mUR7I/AAAAAAAAA
BA/emL7FGn8soc/s200/top.GIF'/></a></div>
O #header é o endereço dessa mesma página, um link ancora, no código do pagina(como a maioria dos blogspots) a div que está no topo tem a ID="header" e isso que faz página subir.

Então além do blogger, qualquer página ou blog pode usar isso, basta observar a primeira div do html que tenha uma ID e colocar no link essa id, acompanhada do #


Vou deixar como exemplo essa pagina abaixo.


facilefunciona blogspot div imagem nÃo respeita scroolbar


Div ou imagem que fica parada(mesmo subindo a página) e ou sobreposta ao texto, imagem e outras DIVs(nesse blog não é visível com o Explorer 7 ou... devido as configurações do meu HTML, com mozilla versão mais recente da data desse post era, veremos daqui...) veja melhor aqui.... Usando apenas CSS
pode ser um menu, um link bastante usado ou o que for interessante ==>>¬

7 comentários:

  1. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
  2. Sérgio Mello

    Se você usar um iframe por baixo desse elemento fica um efeito ruim, parece que a imagem ou elemento com fixed fica pulando ou fica por baixo ao rodar o mouse.

    Outro problema, o uso de iframe atrapalha muito para você conseguir um lugar nas buscas da web, Pelo seu menu parece que você quer colocar muito conteúdo(isso é bom),mas, devido o fato do conteúdo estar em iframes há uma grande chance desse conteúdo não ter bom valor para sites de busca, ou, os sites de busca irão levar o visitante para a página do iframe e ele não vai ver o menu, vai ficar perdido.

    ResponderExcluir
  3. Obrigado pela pronta resposta.

    Entendi que devo usar Ajax ou, pela pressa, Joomla.


    Sérgio Mello

    ResponderExcluir
  4. Sérgio Mello

    Resolvi remover seu comentário anterior por conter email, para evitar mais spam.

    Quanto ao uso de Ajax, é bom, mas existem restrições também relacionadas aos sites de busca, Leia aqui, Já o joomla não tenho idéia.

    Se sua intenção é deixar a navegação rápida, pode ser bom procurar formas de reduzir; o código das páginas, peso de imagens, usar arquivos externos, etc. Tente buscar na web por compressão dos arquivos.

    Você deve se perguntar o que é mais interessante; ter 100 visitantes acessando 2 páginas em html e através de busca na web ou, 50 visitantes acessando 3 "páginas" com maior velocidade em ajax e chegaram ali por outras fontes.

    ResponderExcluir
  5. Ok, Blogger, mais claro que isso impossível.

    Muito obrigado pelas orientações.

    Bom trabalho e um abraço!

    ResponderExcluir
  6. Anônimo24/10/11

    eu tive a ideia de colocar uma imagem entre o plano de fundo e a postagem,isto é possível?

    ResponderExcluir
  7. Fabricio Santana

    Não entendi muito bem o que você quis dizer, mas muita coisa é possível, pra quem usa o blogger tem a opção de colocar logotipo que fica no topo acima do post.

    Já o código acima é para deixar a imagem fixa em uma parte da tela, aqui no blog eu usei para por a seta de subir que fica no canto inferior direito, deve ter o cuidado com esse código porque ele deixa a div e imagem sobre os outros elementos, assim, os outros podem não aparecer quando a pessoa rodar a página.

    ResponderExcluir

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!

Google

Postagens Populares