Publicado por: Paulo Fernandes | 17/Dez/2008

Firefox utilizando muita memória????

Opa!

Galera não sei se acontece com todos, mas o meu firefox fica ocupando muita memória.

Achei neste blog aqui http://rafaelsteil.com a solução para os meus problemas, [ ainda estou testando, mas já vi melhoras ].

Aqui estão as modificações que o post diz e o que significa, no blog de Rafael tem muito mais explicado, para quem quiser ver, o link é este aqui: contornando-consumo-excessivo-de-memoria-do-firefox

#1 browser.cache.memory.capacity
Controla quanto de memória é utlizado para cachear as páginas. No campo “Filter“, digite “browser.cache.memory.capacity“. Caso nada seja retornado, você deverá criar este valor. Para tanto, clique com o botão direito do mouse, e selecione New -> Integer. O campo “New Integer value”, digite “browser.cache.memory.capacity”, e no próximo diálogo informe o valor em KB do cache. Eu utilizei 1024 (1 MB).

Caso a chave já exista, mude-a para o valor que desejar.

#2: browser.cache.disk.capacity
Determina quanto de espaço em disco é utlizado para cachear as páginas. Defina para o valor que desejar. Eu utilizei 5000.

#3: config.trim_on_minimize
Esta opção, que parece funcionar apenas em Windows (utilzo Mac), informa ao Firefox para liberar memória quando for minimizado para a barra de tarefas. Para criar esta chave, caso não exista, clique com o botão direito e escolha New -> Boolean, definindo seu valor para “true”.

#4: network.prefetch-next
Quando definido para “true” (New -> Boolean), informa ao Firefox para fazer “pre fetching” (”busca em background”) de todos os links definidos com o atributo “rel=prefetch”. Eu deixei essa opção para “false”, pois não quero que páginas que muito provavelmente não acessarei fiquem consumindo minha banda e memória RAM.

#5: browser.sessionhistory.max_total_viewers
Controla quantas páginas ficarão no histórico dos botões “Voltar” (Back) e “Avançar” (Forward) do browser. Eu deixe essa opção (New -> Integer) para um valor baixo, como 5.

Rafael, se ficar ofendido com a cópia que fiz, me informe que eu removerei-a.

até mais galera

abraços

5 Comentários

Publicado em Navegador | Tags:,

Publicado por: Paulo Fernandes | 26/Nov/2008

img ou background – Qual Devo Usar???

Opa!

Faz tempo que não posta né galera. Fim de ano as coisas são corridas aqui na empresa, ainda mais com mudança.

Este artigo deverá ser bem rápido, mas espero que ajude muitos a escolher a melhor forma de usar as imagens.

Uma dúvida que apareceu há algum tempo, creio que seja no Fórum Imasters, ou em algum outro lugar é a seguinte:

Quando devo usar a tag img ou a propriedade do CSS background?

Na minha opinião, a tag img deve ser usada quando queremos de fato inserir uma imagem na página HTML.

Já o background deve ser usado quando queremos colocar um fundo em algum elemento da página ou usar o IR ( Image Replacement ).

Isso é uma coisa muito óbvia.

Mas o que devemos fazer quando a empresa não tem um logo bem definido, o logo da empresa é escrito no Photoshop com uma fonte bonita?

Nesse caso se você usar apenas a imagem, não é muito recomendavel, pois se o cliente estiver com um navegador modo texto ou algum programa leitor de tela não conseguirá ler a imagem( eu sei que é até possível ler pelo atributo alt, mas não vamos entrar em detalhes ). E usar via CSS com a propriedade background, também não é muito legal, pois vai que o CSS não é carregado? ( não estou levando em contato as técnicas de IR  – Image Replacement em consideração OK? )

Nesta situação recomendo que seja utilizado as duas coisas dá seguinte forma.

HTML

<h1>Texto <img src=”imagem.jpg” alt=”Texto” /></h1>

e no CSS

h1 {
background:#FFFFFF url(imagem.jpg) no-repeat scroll left center;
color:#FFFFFF;
font-size:1px;
text-indent:-99999px;
}

Bom por hoje é somente isso!

Caso tenha algum erro ou problema.

Pode postar um comentário que lhe ajudarei.

Abraço e até o próximo.

Deixe um comentário

Publicado em CSS, XHTML | Tags:

Publicado por: Paulo Fernandes | 13/Out/2008

Rodapé no Final da Página – Independente da Resolução

Opa!

Fazia tempo que eu não postava não é. Bem aqui vai um rápido post para demonstrar a técnica do “Rodapé no Final da Página – Independente da Resolução”.

Devemos criar um código da seguinte forma:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>..:: Rodapé no Final da Página – Independente da Resolução by aprendacss.wordpress.com ::..</title>
</head>
<body>
<div id=”tudo”>
<div id=”cabecalho”>
<h1><a href=”http://aprendacss.wordpress.com”>Aprenda CSS</a></h1>
</div>
<div id=”conteudo”>
<p>Aqui vai o conteudo da página.</p>
</div>
<div id=”rodape”>
<p>
Todos Direitos Reservados – <a href=”http://aprendacss.wordpress.com”><strong>Aprenda CSS</strong></a> – 2008
</p>
</div>
</div>
</body>
</html>

Após ter o código base, devemos criar um arquivo css que informe que o corpo do documento tem o height de 100%.

html, body {
height: 100%;
}

* html #tudo {height: 100%;}

No trecho acima, informo para o html e body ter um height de 100%. E informo que a div#tudo deve ter um height de 100% também.

#tudo {

width: 790px;

margin: 0 auto;

text-align: left;

position: relative;

min-height: 100%;

}

Aqui está um ponto importante. Explicarei linha a linha deste trecho acima.

  1. Largura fixa de 790px;
  2. Centralizo o layout ao centro;
  3. Alinha o texto do layout a esquerda;
  4. Posiciono o container relativamente.
  5. Defino que a altura minima será de 100% [ para navegadores mais recentes - FireFox por exemplo ]

#conteudo {
padding-bottom:    50px;
}

Acima foi definido um padding-bottom, apenas para o texto não ficar colado no rodapé.

#rodape {
position: absolute;
bottom: 0;
height: 35px;
line-height: 35px;
text-align: center;
width: 100%;
}

Explicarei linha a linha para ficar bem claro.

  1. Posiciono ele absolutamente;
  2. Coloca ele na posição 0 do rodapé;
  3. Digo que terá uma altura de 35px;
  4. Informo que a altura da linha será de 35px;
  5. Alinho o texto ao centro;
  6. Digo que a largura será de 100%;

Pronto temos o nosso layout completo. Abaixo está o código completo para quem quiser ver! Coloquei no código abaixo algumas cores, para vocês verem a diferença. Esqueci de comentar que para um melhor resultado sempre é bom utilizar a técnica de CSS Reset.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>..:: Rodapé no Final da Página – Independente da Resolução by aprendacss.wordpress.com ::..</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

* html #tudo {height: 100%;}

body {
background-color: #CCC;
}

#tudo {
width: 790px;

margin: 0 auto;

text-align: left;

position: relative;

min-height: 100%;

background-color: #FFF;
}

#conteudo {
padding-bottom: 50px;
}

#rodape {
position: absolute;
bottom: 0;
height: 35px;
line-height: 35px;
text-align: center;
width: 100%;
background-color: #0FF;
}

#cabecalho {
background-color: #FF0;
}
</style>
</head>
<body>
<div id=”tudo”>
<div id=”cabecalho”>
<h1><a href=”http://aprendacss.wordpress.com”>Aprenda CSS</a></h1>
</div>
<div id=”conteudo”>
<p>Aqui vai o conteudo da página.</p>
</div>
<div id=”rodape”>
<p>
Todos Direitos Reservados – <a href=”http://aprendacss.wordpress.com”><strong>Aprenda CSS</strong></a> – 2008
</p>
</div>
</div>
</body>
</html>

Até o próximo galera.

Fonte base: http://themaninblue.com/writing/perspective/2005/08/29/

Editado em 21/10/2008:

Substituição de

height: auto !important;
height: 100%;

por

* html #tudo {height: 100%;}

9 Comentários

Publicado em CSS | Tags:, , , ,

Publicado por: Paulo Fernandes | 10/Set/2008

Alterando a largura de um elemento via Javascript

Bom galera.

Resolvi criar este post aqui por uma dúvida em um dos forúns que participo http://forum.imasters.com.br.

A dúvida está neste post aqui. Abaixo está a solução para o problema. Este será um dos post que não terá imagem, por se tratar de uma coisa simples, devem existir outras formas para se fazer isto, mas essa é a mais ditádica que eu consegui.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt-br” lang=”pt-br”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Alterando a largura de um elemento via Javascript by AprendaCSS.wordpress.com</title>
<style type=”text/css”>
#esquerda {
width: 20%;
background-color: #CCC;
height: 500px;
float:left;
}
#direita {
width: 80%;
background-color: #AFA;
height: 500px;
float: left;
}

#esq, #dir {
margin: 10px;
}
</style>
<script type=”text/javascript”>
function espande(estado){
if( estado == “normal” ) {
document.getElementById(’esquerda’).style.width = “20%”;
document.getElementById(’direita’).style.width = “80%”;
document.getElementById(’dir’).href = “javascript: espande(’diminui_esquerda’);”;
document.getElementById(’dir’).innerHTML = “Expandir para Direita”;
document.getElementById(’esq’).href = “javascript: espande(’diminui_direita’);”;
document.getElementById(’esq’).innerHTML = “Expandir para Esquerda”;
} else if ( estado == “diminui_esquerda” ) {
document.getElementById(’esquerda’).style.width = “10%”;
document.getElementById(’direita’).style.width = “90%”;
document.getElementById(’dir’).href = “javascript: espande(’normal’);”;
document.getElementById(’dir’).innerHTML = “Voltar ao Normal”;
document.getElementById(’esq’).href = “javascript: espande(’normal’);”;
document.getElementById(’esq’).innerHTML = “Voltar ao Normal”;
} else if ( estado == “diminui_direita” ) {
document.getElementById(’esquerda’).style.width = “90%”;
document.getElementById(’direita’).style.width = “10%”;
document.getElementById(’dir’).href = “javascript: espande(’normal’);”;
document.getElementById(’dir’).innerHTML = “Voltar ao Normal”;
document.getElementById(’esq’).href = “javascript: espande(’normal’);”;
document.getElementById(’esq’).innerHTML = “Voltar ao Normal”;
}
}

</script>
</head>
<body>

<div id=”esquerda”>
<p>
<a id=”esq” href=”javascript: espande(’diminui_direita’);”> Expandir para Esquerda </a>
</p>
</div>

<div id=”direita”>
<p>
<a id=”dir” href=”javascript: espande(’diminui_esquerda’);”> Expandir para Direita </a>
</p>
</div>

</body>
</html>

Abaixo tem uma explicação de um bloco de código, os outros são iguais, apenas mudando os parametros.

document.getElementById(’esquerda’).style.width = “20%”;
document.getElementById(’direita’).style.width = “80%”;
document.getElementById(’dir’).href = “javascript: espande(’diminui_esquerda’);”;
document.getElementById(’dir’).innerHTML = “Expandir para Direita”;
document.getElementById(’esq’).href = “javascript: espande(’diminui_direita’);”;
document.getElementById(’esq’).innerHTML = “Expandir para Esquerda”;

document.getElementById(’esquerda’) significa que estou percorrendo toda a página procurando por um elemento que tenha o id igual a esquerda.

Linha 1: Atribuo 20% do tamanho da tela para o elemento que tem o id igual a esquerda.

Linha 2: Atribuo 80% do tamanho da tela para o elemento que tem o id igual a direita

Linha 3: Altero o atributo href do elemento que tem o id igual a dir.

Linha 4: Substituo o conteúdo do elemento que tem o id igual a dir.

Linha 5: Altero o atributo href do elemento que tem o id igual a esq.

Linha 6: Substituo o conteúdo do elemento que tem o id igual a esq.

Bom é isso ai pessoal, caso alguém tenha dúvida, poste que responderei com o maior prazer.

Até o próximo.

2 Comentários

Publicado em CSS, Javascript | Tags:, , ,

Publicado por: Paulo Fernandes | 4/Set/2008

Faux Columns – Simulando Colunas

Opa galera!
Hoje falarei sobre uma técnica legal, ela se chama Faux Columns(Colunas Falsas), muito legal quando queremos trabalhar com layout de duas colunas.
A técnica Faux Columns é muito utilizada. Consiste em simular a reprodução do fundo no layout da página mesmo que o espaço nem esteja sendo utilizado, dando a idéia de colunas falsas.
Vejam o código do layout sem a técnica.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Faux Columns – by aprendacss.wordpress.com</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
#tudo {
width: 800px;
margin: 0 auto;
text-align: left;
}
#topo {
background-color: #AAC;
height: 200px;
}
#esq, #dir {
height: auto;
}
#esq {
float: left;
width: 200px;
background-color: #555;
}
#dir {
float: right;
width: 580px;
background-color: #F00;
}
#rodape {
clear: both;
background-color: #AAF;
height: 50px;
}
</style>
</head>

<body>
<div id=”tudo”>
<div id=”topo”> Topo </div>
<div id=”esq”>Esquerda<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id=”dir”>Direita</div>
<div id=”rodape”>Rodape</div>
</div>
</body>
</html>

Sem a Técnica

Sem a Técnica

Para aplicar a técnica basta inserir esta parte aqui no código.

#tudo {
background: transparent url(fundo.jpg) repeat-y left center;
}

Olha como fica o código completo, agora aplicando a técnica.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Faux Columns – by aprendacss.wordpress.com</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
#tudo {
width: 800px;
margin: 0 auto;
text-align: left;
background: transparent url(fundo.jpg) repeat-y left center;
}
#topo {
background-color: #AAC;
height: 200px;
}
#esq, #dir {
height: auto;
}
#esq {
float: left;
width: 200px;
background-color: #555;
}
#dir {
float: right;
width: 580px;
background-color: #F00;
}
#rodape {
clear: both;
background-color: #AAF;
height: 50px;
}
</style>
</head>

<body>
<div id=”tudo”>
<div id=”topo”> Topo </div>
<div id=”esq”>Esquerda<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id=”dir”>Direita</div>
<div id=”rodape”>Rodape</div>
</div>
</body>
</html>

Com a Técnica de Faux Columns

Com a Técnica de Faux Columns

A imagem fundo.jpg é essa imagem aqui.

Filete do Fundo

Filete do Fundo

Essa imagem é um filete que deve conter 800px de largura, tem esse valor pois é o valor que defini para o meu layout, e pode ser 1px de altura, para ficar mais leve, aqui coloquei maior apenas para vocês verem.

Pronto aqui foi aplicada e técnica de Faux Collumns, espero que gostem.

Até o próximo.

Deixe um comentário

Publicado em CSS | Tags:, , ,

Publicado por: Paulo Fernandes | 2/Set/2008

Google Chrome – O Navegador do Google

Opa!

Galera aqui vai uma postagem bem rápida para dizer que o novo navegador está disponível para download.

Agora é a vez do google entrar no mundo dos navegadores.

Google Chrome

Segue link para download Google Chrome.

Até a próxima galera

Abraço

Deixe um comentário

Publicado em Navegador | Tags:,

Publicado por: Paulo Fernandes | 25/Ago/2008

Validando DOCTYPE STRICT usando target na TAG A

Olá galera

Estou dando uma passada rápida por aqui apenas para mostrar como podemos validar um documento usando o DOCTYPE STRICT e colocando a na TAG A o atributo target.

Se você tentar validar um documento neste formato aqui!

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Validando DOCTYPE STRICT usando target na TAG A – by aprendacss.wordpress.com</title>
</head>
<body>
<a href=”http://aprendacss.wordpress.com” target=”blank”>AprendaCSS</a> – 2008
</body>
</html>

Aparecerá esta mensagem para você.

Porém se adicionar está clausúla “[ <!ATTLIST a target CDATA #IMPLIED> ]” no final do seu DOCTYPE, dessa forma aqui:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” [ <!ATTLIST a target CDATA #IMPLIED> ]>

Pronto o seu problema está resolvido. O código final fica assim:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” [ <!ATTLIST a target CDATA #IMPLIED> ]>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Validando DOCTYPE STRICT usando target na TAG A – by aprendacss.wordpress.com</title>
</head>
<body>
<p>
<a href=”http://aprendacss.wordpress.com” target=”blank”>AprendaCSS</a> – 2008
</p>
</body>
</html>

Apenas para lembrar que o DOCTYPE Transitional aceita normalmente este atributo na TAG A. Este artigo é só para informar que existem formas de validar o target usando o DOCTYPE STRICT.

Referência: http://krijnhoetmer.nl/stuff/html/strict-doctype-target/

Bom galera é isso e até mais.

7 Comentários

Publicado em XHTML | Tags:, , , ,

Publicado por: Paulo Fernandes | 12/Ago/2008

Z-Index

Olá galera.

Como prometido, hoje explicarei o poder da propriedade z-index.

Geralmente ouvimos as pessoas falar sobre eixo X e eixo Y, que seriam respectivamente as linhas Horizontais e Verticais. O Z-index é o que define a Profundidade, seria o eixo Z.

Imagine em um edificio. Se fossemos definir o eixo X, Y e Z, teriamos:

  • X=> Quantidade de metros da fachada;
  • Z=> Quantidade de metros da porta ao fundo;
  • Y=> Quantidade de apartamentos, altura;

Bom, se nossa área fosse construção, teriamos entendido, mas como é programação, talvez tenha ficado um pouco vaga essa idéia. Mas se pararmos para pensar um pouco e pegarmos o artigo anterior onde faço referência ao Position Absolute, talvez fique mais claro. Vamos analizar o segundo print daquele artigo, o que temos está abaixo, tanto o código quanto o print.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Z-index by aprendacss.wordpress.com</title>
<style type=”text/css”>

#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
}

#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
}

#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
}

</style>
</head>
<body>
<div id=”posiciona1″></div>
<div id=”posiciona2″></div>
<div id=”posiciona3″></div>
</body>
</html>

Position Absolute, um elemento sobre o outro

Notamos que os elementos estão sobre-postos, mas porque só aparece o azul, que no caso é o último.

Aparece só o azul, porque a ordem natural do empilhamento(z-index), é a seguinte, o primeiro elemento do código recebe o z-index=1[ no caso a div com ID posiciona1 ], e o próximo elemento recebe z-index=2[ no caso a div com ID posiciona2 ] e assim por diante, esta é a ordem natural do empilhamento, e por esse motivo que aparece somente o azul sobre os outros. Abaixo definirei as posições dos elementos para que eles se sobreponham, porém na ordem natural.

#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
top:0;
}

#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
top:25px;
}

#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
top:50px;
}

Empilhamento Natural

Empilhamento Natural

Alterando o posicionamentoAlterando o posicionamento

Como podem observar apenas adicionei a propriedade top, você pode adicionar a outras propriedades como left, right e bottom.

Agora irei alterar a propriedade z-index para deixar o segundo elemento [ o box verde ] na frente dos outros e aproveito para finalizar o artigo colocando todo o código do exemplo HTML+CSS.

Até o próximo pessoal.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Z-index by aprendacss.wordpress.com</title>
<style type=”text/css”>

#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
top:40px;

}

#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
top:65px;
z-index:4;
}

#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
top:100px;
}

</style>
</head>
<body>
<div id=”posiciona1″></div>
<div id=”posiciona2″></div>
<div id=”posiciona3″></div>
</body>
</html>

Alterando a ordem de empilhamento dos Objetos

Alterando a Ordem de Empilhamento dos Objetos

8 Comentários

Publicado em CSS | Tags:, ,

Publicado por: Paulo Fernandes | 8/Jul/2008

Position Absolute

Olá galera!

Hoje explicarei um pouco sobre o poder do position absolute. Com esta propriedade do CSS, você consegue colocar o elemento em qualquer lugar da tela, basta apenas configurar opcionalmente as propriedades top, left, right, bottom.

Apenas uma observação sobre o position absolute, top, left, right e bottom.

  • Position Absolute coloca o elemento fixo na página, cuidado com o seu uso.
  • As propriedades top, left, right e bottom, sempre devem ser usadas com o position.

Bom chega de conversa e vamos ao código descobrir do que ele é capaz!

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Position Absolute by aprendacss.wordpress.com</title>
<style type=”text/css”>

#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
}

#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
}

#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
}

</style>
</head>
<body>
<div id=”posiciona1″></div>
<div id=”posiciona2″></div>
<div id=”posiciona3″></div>
</body>
</html>

Olha como deve ter ficado:

Sem position absolute

Agora se definirmos position: absolute neles, vamos ver o que acontece?

#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
}

#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
}

#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
}

Position Absolute Definido

Nossa só está aparecendo o último. Porque será?

Isso acontece devido a ordem de empilhamento do elementos, no próximo artigo, falarei sobre o empilhamento e a propriedade z-index. Mas agora vamos voltar ao position absolute. Lembra que acima alertei sobre o uso do position absolute, agora vocês viram o que acontece.

Vamos definir a propriedade top para as divs, posiciona2 e posiciona3, definiremos valores diferentes para notar o que acontecerá com o elemento, e para aproveitar tempo, definiremos a propriedade left para a div posiciona1.

#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
left: 150px;
}

#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
top: 0;
}

#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
top: 90px;
}

Posicionado Absolutamente com top e left Definidos

Pronto pessoal! Neste artigo apresentei o poder do position: absolute e das propriedades top e left;

No próximo artigo falarei sobre a propriedade z-index, e utilizarei o mesmo exemplo de código para ficar bem claro poder dessa combinação.

Até o próximo.

2 Comentários

Publicado em CSS | Tags:, , , , , ,

Publicado por: Paulo Fernandes | 28/Jun/2008

Centralizar Layout na Horizontal e na Vertical

Olá a Todos.

Bom galera neste artigo ensinarei a centralizar um layout na vertical e na horizontal independente da resolução, para isso precisamos saber exatamente duas coisas.

  1. Tamanho do layout na Vertical [ height ];
  2. Tamanho do layout na Horizontal [ width ];

Explicarei o conceito depois coloco o código e se achar necessário coloco mais algum comentário no final do artigo. Bem vamos aos conceitos.

Para alinhar na horizontal já expliquei, veja este artigo Centralizando na Horizontal, mas para este alinhamento aqui muda um pouco o conceito. Nossa como eu enrolei, colocarei os passos para eu não me perder!

  1. Definir uma largura e uma altura [ width / height ];
  2. Posicionar o elemento absolutamente [ position ];
  3. Definir onde o elemento deve ficar em relação ao topo e a esquerda [ top / left ];
  4. Definir as margens do topo e da esquerda [ margin-top / margin-left ];

Bom agora que definimos o que fazer, vamos ao código xHTML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Centralizando Layout na Vertical e na Horizontal by aprendacss.wordpress.com</title>
<style type=”text/css”>

#tudo {
width: 500px;
height: 500px;
background-color: #00F;
}

</style>
</head>
<body>
<div id=”tudo”>

</div>
</body>
</html>

Layout no Canto Esquerdo

Pronto desta forma já criei a div#tudo porém ela está posicionada na esquerda, agora vamos incrementar o código aos poucos, para ver o que acontece! Primeiro incremento, posicionar absolutamente, nada acontecerá, então vamos colocar mais alguns elementos, e seguindo nossa orderm agora vem os posicionamentos referente a topo (top) e esquerda (left).

#tudo {
width: 500px;
height: 500px;
position: absolute;
top:50%;
left:50%;
background-color: #00F;
}

Layout Com Top e Left Definidos

Nossa o que aconteceu aqui!? :/

Calma vamos entender. position: absolute; “coloca” o elemento onde mandarmos e para onde nós mandamos ele? Cuidado com a resposta. ;) Bem nós mandamos ele ficar à 50% do topo e à 50% da esquerda, e é exatamente a onde ele está tente redimensionar a janela e verá para onde ele irá. [ ele não pode mudar muita coisa não, tem que ficar a 50% do topo e da esquerda de acordo com o tamanho da janela que você deixou ]

Bom agora que ele está a 50% do topo e da esquerda, vamos alinhá-lo utilizando as margens.

#tudo {
width: 500px;
height: 500px;
position: absolute;
top:50%;
left:50%;
margin-top: -250px;
margin-left: -250px;
background-color: #00F;
}

Layout Centralizado na Vertical e na Horizontal

Nossa ele ficou bem no meio, que legal! Vamos entender o porque de definir margem negativa!

Quando definimos uma margem queremos que ela exatamente tenha um espaço de um lugar, se definirmos um valor negativo, ela fará justamente o contrário, ela se aproximará mais do local.

Ok! Entendi, mas porque -250px? Bem se você está se perguntando isso, responderei para você, mas farei você pensar junto comigo. Está disposto a isso? Então vamos lá!

Defini o tamanho do meu layout sendo um quadrado de 500px de largura por 500px de altura, isso é óbvio pois é um quadrado e quadrado tem que ter os lados iguais, mas vamos continuar com o artigo, após isso defini que ele deveria ficar há 50% do topo e 50% da esquerda, mesmo que você não tenha prestado muita atenção, deve ter notado que o tamanho do quadrado está em pixel e o posicionamento em porcentagem. Bom já que a margem negativa aproxima ao invés de afastar se eu defini-la com pixels, eu estou aproximando ela do topo e da esquerda, por isso que ela fica bem no meio.

Ah! Agora eu entendi! Pelo menos eu acho!? Como eu faria se fosse um layout com 700px de largura por 400px de altura ?

Simples, essa margin-left deve ser o valor do width: dividido por 2, e a margin-top deve ser o valor do height dividido por 2. LEMBRANDO QUE SEMPRE NEGATIVOS.

Para ver o resultado acima, altera o código da div#tudo para esse:

#tudo {
width: 700px;
height: 400px;
position: absolute;
top:50%;
left:50%;
margin-top: -200px;
margin-left: -350px;
background-color: #F00;
}

Layout Centralizado na Vertical com Novo Tamanho

Bom é isso ai pessoal!

Se ainda tiverem dúvidas, não se acanhem, podem postar a vontade.

Até o próximo.

7 Comentários

Publicado em CSS | Tags:, , ,

Postagens Antigas »

Categorias