css

Introdução

Nota: Se você está à procura de uma técnica CSS para centrarhorizontalmente uma página na tela consulte este tutorial.

Neste tutorial vou mostrar a técnica CSS para posicionar um objeto ou uma página com altura definida no meio da tela do monitor do usuário, ou seja centrar na horizontal e na vertical, independente da resolução. Ao final da leitura desse tutorial você estará capacitado a posicionar com uso das CSS um objeto em qualquer lugar na tela, do monitor do usuário.

Posicionando uma imagem

Vou iniciar mostrando como posicionar uma imagem na tela. Usarei a imagem abaixo que nomeei de logo.gif:

O código HTML que coloca a imagem na tela é mostrado a seguir.

&lt;body&gt;
	&lt;img src="logo.gif" width="220" height="80" alt="logo do site Maujor" /&gt;
&lt;/body&gt;

<body>

</body>

Página mostrando a renderização do código acima

Como você observou, a imagem está posicionada no canto superior esquerdo da tela com as margens superior (aproximadamente 20px) e esquerda (aproximadamente 10px) padrão, variando conforme o navegador usado.

Vamos a seguir atribuir um id para a imagem e estilizar o posicionamento da id. Escolhi o nome imgpos para o idda imagem e o HTML agora é:

&lt;body&gt;
	&lt;img src="logo.gif" width="220" height="80" alt="logo do site Maujor" id="imgpos" /&gt;
&lt;/body&gt;

<body>

</body>

As regras CSS para posicionamento.

A propriedade CSS que possibilita posicionar um elemento qualquer (no nosso caso o elemento img que tem aid="imgpos") é a propriedade position complementada pelas propriedades left e top. O valor absolute para a propriedade position quando declarado para um elemento X controla a posição do elemento tomando como origem do sistema de coordenadas o canto superior esquerdo do primeiro box ancestral de X que tenha sido posicionado com os valores fixed, relative ou absolute (Ver o tutorial Posicionando relativamente o absoluto). Caso não exista um elemento ancestral posicionado, a origem do sistema de coordenadas será o canto superior esquerdo da tela.

A regra CSS mostrada a seguir posiciona de forma absoluta em relação ao canto superior esquerdo da tela o elemento com id="imgpos" .

#imgpos {
	position: absolute; 
	left: 90px; /* posiciona a 90px para a esquerda */ 
	top: 70px; /* posiciona a 70px para baixo */
	}

#imgpos {

position: absolute;

left: 90px; /* posiciona a 90px para a esquerda */

top: 70px; /* posiciona a 70px para baixo */

}

Observe a figura explicativa.

Mostra um logo no meio e as distâncias conforme o código acima

Notar que regra CSS a definição da posição absolute e das coordenadas (left ) que define o quanto a imagem dista da margem esquerda e (top) que define o quanto a imagem dista do topo.

A referência, como já foi dito acima é o canto superior esquerdo da tela e o ponto que ocupa a posição definida é o canto superior esquerdo da figura ou elemento posicionado.

IMPORTANTE: Você poderá alterar as referências da tela e consequentemente da figura ou elemento posicionado, mudando as propriedades para right e bottom . E valem as combinações para os quatro cantos da tela.

left e top: referência é o canto superior esquerdo; 
left e bottom: referência é o canto inferior esquerdo; 
right e <code>top</code> : referência é o canto superior direito; 
right e bottom: referência é o canto inferior direito.

left e top: referência é o canto superior esquerdo;

left e bottom: referência é o canto inferior esquerdo;

right e <code>top</code> : referência é o canto superior direito;

right e bottom: referência é o canto inferior direito.

Qualquer unidade de medida CSS pode ser usada para definir as coordenadas, inclusive medidas relativas como, por exemplo, porcentagens.

Assim é válido declarar:

#imgpos {
	position: absolute;
	left: 50%;
	top: 50%
	}

#imgpos {

position: absolute;

left: 50%;

top: 50%

}

Desafio:

Você seria capaz de interpretar a regra acima e imaginar qual a posição ocupada pelo logo na tela já que a regra diz: posicione 50% para a esquerda e 50% para baixo na tela.

Página mostrando a posição ocupada pelo logo

Era esta a posição que você imaginou? Ou imaginou a figura no centro da tela?

Lembre-se o ponto que está a 50% do topo e 50% para a esquerda é o canto superior esquerdo da figura.

A figura não está no centro da tela. Volte lá e confira!

Posicionando no centro da tela

Conseguimos posicionar o canto superior esquerdo da figura no meio da tela com os valores declarados em porcentagens. E agora, para que o CENTRO da figura ocupe o meio da tela basta arrastar a figura para a esquerda e para cima de um valor igual a:

para a esquerda: metade da largura da figura;

para cima: metade da altura da figura.

A figura é um retângulo de 220 x 80 e os valores para arrastar são:

para a esquerda: 220px/2 = 110px;

para cima: 80/2 = 40px.

A propriedade CSS que determina o afastamento em volta dos elementos é margin.

Como a figura deve ser arrastada para a esquerda basta declarar uma margin-left negativa! E o arrastar para cima consegue-se com uma margin-top negativa!

Página mostrando o logo no centro da tela.

E o código completo da página para seus estudos.

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;title&gt;Posicionar um objeto na tela&lt;/title&gt;
&lt;style type="text/css"&gt;
	#imgpos {
		position:absolute;
		left:50%;
		top:50%;
		margin-left:-110px;
		margin-top:-40px;
		}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;img src="logo.gif" width="220" height="80" 
alt="logo de 220 por 80 pixel" id="imgpos"&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Posicionar um objeto na tela</title>

#imgpos {

position:absolute;

left:50%;

top:50%;

margin-left:-110px;

margin-top:-40px;

}

</style>

</head>

<body>

<img src="logo.gif" width="220" height="80"

alt="logo de 220 por 80 pixel" id="imgpos">

</body>

</html>

Aplicando a técnica para uma página web

Você poderá aplicar esta técnica para posicionar uma página inteira no centro da tela. Isto só faz sentido prático quando a página tem altura reduzida e menor do que a altura total da tela. Se você tem uma página de entrada no site do tipo “Clique aqui para entrar” e que normalmente tem um design de dimensões reduzidas, poderá colocá-la no meio da tela com esta técnica.

Nota: A página que você vai visualizar foi desenvolvida com tabelas à maneira ultrapassada de projetar web sites. Usei um código HTML “ruim” apenas como ilustração da técnica, no entanto, ela é válida para sites desenvolvidos segundo os Padrõies Web.

Página de código ruim, exemplificando a técnica de centralização

O código fonte da página, mostra o uso da técnica.

Conclusões

Posicionar um elemento no centro da tela é uma tarefa bem simples com uso das CSS. Como você já deve ter concluido, usando esta técnica pode-se posicionar um elemento HTML em qualquer lugar na tela do usuário, tanto usando medidas absolutas como valendo-se de medidas relativas.

fonte: http://maujor.com/tutorial/meio_tela.php

Código CSS com seletores classe e id

No Tutorial Iniciante de CSS nós analisamos apenas os Seletores HTML – aqueles que representam uma tag HTML.

Você também pode definir seus próprios seletores na forma de seletores classe e ID.

A vantagem dissso é que você pode ter o mesmo elemento, mas apresentá-lo de modos diferentes dependendo de sua classe ou ID.

No CSS, um seletor de classe é um nome precedido por um ponto (.) e um seletor ID é um nome prededido por um sustenido (#).

O CSS fica mais ou menos assim:

<strong>#topo</strong> {
	background-color: #ccc;
	padding: 1em
}

<strong>.intro</strong> {
	color: red;
	font-weight: bold;
}

<strong>#topo</strong> {

background-color: #ccc;

padding: 1em

}

<strong>.intro</strong> {

color: red;

font-weight: bold;

}

O HTML se liga ao CSS usando os atributos id e class. Pra esse CSS, o HTML pode ser alguma coisa assim:

&lt;div <strong>id="top"</strong>&gt;

&lt;h1&gt;Acarajé de Chocolate&lt;/h1&gt;

&lt;p&gt;Essa é minha receita pra fazer acarajé usando só chocolate&lt;/p&gt;

&lt;p <strong>class="intro"</strong>&gt;Mmm mm mmmmm&lt;/p&gt;

&lt;/div&gt;

<h1>Acarajé de Chocolate</h1>

<p>Essa é minha receita pra fazer acarajé usando só chocolate</p>

<p <strong>class="intro"</strong>>Mmm mm mmmmm</p>

</div>

Veja que o primeiro parágrafo aparece diferente do segundo, já que no segundo foi aplicada a classe “intro”.

A diferença entre ID e classe é que ID só pode ser usado pra identificar um elemento, enquanto uma classe pode ser usada pra quantos elementos você quiser.

Você também pode aplicar um seletor pra um elemento HTML específico, basta declarar o seletor HTML primeiro. Assim

p.classe { qualquer coisa }

vai ser aplicado apenas a elementos parágrafo (p) que tenham a classe “classe”.

Na hora de criar nomes para suas classes e ID, procurem usar nomes que façam sentido e que representem a função daquele seletor. Evite nomes de classe como “texto-verde”, que representa apresentação. A vantagem do CSS é poder mudar todo o estilo do seu site de forma muito simples. Se você usa nomes assim, você perde flexibilidade. Quando, por exemplo, você quiser mudar o texto pra azul, ao invés de verde, você vai ter que 1)mudar o nome da classe para “texto-azul”, e mudar cada referência no seu HTML, ou 2)fazer com que a classe “texto-verde” mostre um texto azul. Estranho, não? Por isso, a classe “texto-destacado” ou “texto-forte” seria mais adequada.

fonte: http://codando.wordpress.com/2008/03/16/tutorial-intermedirio-de-css-seletores-classe-e-id/

RodrigoAC

:: Posicionar um objeto ou página no centro da tela ::

Introdução

Posicionando uma imagem

As regras CSS para posicionamento.

Posicionando no centro da tela

Aplicando a técnica para uma página web

Conclusões

Tutorial Intermediário de CSS: Seletores Classe e ID