Home  Fórum  Sobre  Contato 

Informações

Você está vendo Fixando um conteudo na tela usando CSS. Você pode deixar um comentário ou um trackback esse post
Há 8 comentários.

December 2007
M T W T F S S
« Nov   Jan »
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Páginas

  • Contato
  • sitemap
  • Sobre

Categorias

  • ClubePC (13)
  • Desenvolvimento (37)
    • AJAX (2)
    • HTML-CSS (15)
    • Javascript (5)
    • Jquery (1)
    • MySQL (7)
    • PHP (18)
      • Aprendendo PHP (6)
    • Scripts (4)
  • Designer (42)
    • CG (12)
      • 3ds Max (6)
    • Photoshop (20)
  • Diversos (26)
  • Download (55)
  • Games (20)
  • Guia de Compra (2)
  • Hardware (7)
  • Humor (11)
  • Internet (31)
    • Blogs (3)
    • Firefox (8)
  • Notícias (33)
  • Rapidinha (6)
  • Softwares (45)
  • Windows (32)
  • Links

    • Contato
    • Download de filmes
    • Efeito Azaron
    • MeioBit
    • Site da Morróida

Site Meta

Syndicate this site using RSS 2.0The latest comments to all posts in RSS 2.0
  • Register
  • Log in
Dec-07 06

Fixando um conteudo na tela usando CSS

Enviado por: Thales RB. .     8 comentários.     Categorias: HTML-CSS

Como eu já havia falado antes o Internet Explorer 6 não reconhece o comando position: fixed(o IE7 já reconhece) então para podermos fixar um conteudo na tela precisamos usar um hack.

Veja aqui um exemplo de como é um conteudo fixo

Vejamos então como fazer isso.

Nos navegadores descentes(qualquer um que não seja o IE), usamos os seguintes atributos do CSS para fixar um conteudo na tela:

[code="css"]

Algum conteudo aqui

[/code]

Sendo o left e top as distancias que o conteudo irá ficar em relação a tela.

Como o IE 6 ou anterior não reconhece esse comando precisamos usar o seguinte hack:

[code="css"]

Algum conteudo aqui

[/code]

O * html é um hack que indica que o conteudo só será executado no IE 5 ou 6, e para alterar a altura que o conteudo ficará na tela é só mudar o numero em body.scrollTop+100+”px”

Como eu havia explicado no post anterior você pode colocar o dois css #meudiv que o segundo só será executado no IE e o primeiro em todos os outros navegadores

Mas com esse hack o conteudo fixo, fica um pouco estranho no IE, pois ao mover a tela, é como se o conteudo o se movesse também, e ele retorna para posição fixa, principalmente se for algo grande(muitas linhas), veja o exemplo para saber do que estou falando.

E no fórum tem um exemplo de uso disso na imagem de ir ao topo(irei colocar algo parecido aqui no blog)

   7,596 visualizações

Tags: CSS, CSS-Hacks, HTML Básico

Leia também

  • Tornando uma imagem transparente com CSS usando o filtro alpha
  • Mudando o layout dos formulários HTML
  • CSS Hacks o que são e pra que servem?
  • Visualizar imagens .PNG transparentes no IE 6
  • Listagem de comandos do HTML

Adicionando o efeito de neve ao seu site »« Desligando o seu computador com a Impressora

Thiago
Comment on January 8th, 2008.

Nossa, essa eu nunca tinha visto, mas cara eu preciso deixar uma div fixada no rodap

Thales RB
Comment on January 8th, 2008.

d

andremamp
Comment on April 22nd, 2008.

Obrigado.
Ajudou muito este seu artigo.
Para mim foi muito util a parte
* html #meudiv q ser

hhhhhhhhhhhhhhhhh
Comment on July 25th, 2008.

jjjjjjjjjjjjjjjjjjjjj

ssssssss
Comment on July 25th, 2008.

ssssssssss

Dexter
Comment on November 8th, 2008.

pow me salvou de uma naba gigantescca aqui meu v

-6
Comment on November 16th, 2008.

I have bookmarked this page too. Great resource.

yuri
Comment on September 26th, 2011.

mas quando minimiza ele não sai da posição

Deixe um comentário

Os campos nome e e-mail são obrigatorios(o e-mail não será exibido), a URL é opcional.

Os comentários podem ter os seguintes comandos:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>







Posts mais vistos

  • Download Vray 1.5 para 3ds Max
  • Emulador Nintendo DS – No$GBA
  • Pacote de fontes Graffiti
  • Como fazer formulários em HTML/PHP
  • Detonado – Castlevania: Portrait of Ruin – NDS
  • Detonado – Castlevania Order of Ecclesia – NDS
  • Instalar o Windows XP em Hds SATA
  • Tutorial Básico PHP (Aprenda PHP)
  • Download Photoshop CS3
  • Download de modelos de carros para o 3ds Max

Comentarios recentes

  • william on Dicas – Yu-Gi-Oh! Nightmare Troubadour – NDS
  • joao victor on 300 3D Smileys para MSN
  • Tutorial Básico PHP - Riba Developer on Instalando o Apache, PHP, Mysql no Windows
  • pedro henrique on Digimon World Dawn/Dusk – DNA/Armor Digivolution
  • Eduardo on Query String

Tags

3ds Max 3ds Max Basico Aprendendo PHP Brushes ClubePC Computação Grafica CSS CSS-Hacks Designer Detonados Diversos Download Downloads Firefox Fontes Games Google Hardware HTML Básico Humor Icones Internet Internet Explorer Javascript Jogos-PC Microsoft MySQL mysql-basico NDS Notícias Office Photoshop PHP PHP Basico Portable Rapidinha Script Sobre Softwares tags-HTML Wallpapers Windows Windows-Vista Windows-XP WordPress
eXTReMe Tracker