Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Andreatti

[Resolvido] Centralizando a Pagina

Por , em Desenvolvimento frontend

Recommended Posts

Andreatti    0

Andreatti
Postado

Ola a todos.

Sou iniciante em HTML e estou com essa duvida.

Fui encaminhado a postar minhas duvidas neste forum. Estive olhando um tutorial na internet, mais especificamente neste link: http://maujor.com/dicas/pg_centrada.php , quando me deparei com a seguinte situação:

 

 

"MAS QUE DROGA! O Internet Explorer interpreta errado a regra como ela foi mostrada acima. Ela funciona e centraliza a página em todos os brownsers, menos no IE :-(.

 

Devemos então usar um artifício (hack) para fazer funcionar no IE. Basta declarar text-align:center; no elemento body da página e isto resolve, mas cria outro problema. Além de centralizar no IE coloca os textos também centralizados na página. E, para corrigir isto declaramos na #tudo, text-align:left; UFA! obrigado ao IE pelos seus "bugs" para as CSS. "

 

Eu fiz o teste com este tutorial utilizando uma pagina que comeei omo aprendizado no meu curso. Fuincionou corretamente no FireFox, porem como nem tudo é perfeito, nada deu certo no IE, fiz varias mudanças e nada.

 

Segue o codigo:

 

<HTML>
<HEAD>
<TITLE>USANDO CSS - PARTE 01</TITLE>

<!--AQUI COMEÇA O CSS-->
<STYLE TYPE="text/css">

BODY {
	MARGIN: 0;
	PADDING: 0;
	BACKGROUND: #121212;
	COLOR: #999
	TEXT-ALIGN: CENTER;
}

P {
	MARGIN-LEFT: 5PX;
	MARGIN-BOTTOM: 5PX;
	MARGIN-TOP: 5PX;
	FONT-SIZE: 92.5%;
	FONT-FAMILY: HELVETICA, SANS-SERIF, TAHOMA;
	COLOR: RED;
}

#TUDO {
	WIDTH: 760px;
	MARGIN: 0 auto;          
	PADDING: 10px;
	TEXT-ALIGN: LEFT;
}

H1 {
	COLOR: YELLOW;
}

H2 {
	COLOR: GREEN;
}


</STYLE>
<!--AQUI TERMINA O CSS-->

</HEAD>


<BODY>
<DIV ID="TUDO">
<HR> <B>CONTROLANDO O BODY E O PARAGRAFO (P).</B> <HR>
<H1> EXEMPLO 1</H1>
<H2>LEIA ATENTAMENTE</H2>	
<P>ESTA PAGINA UTILIZA O <B>CSS</B> (<I>CASCADING STYLE SHEETS</I>) PARA 
FORMATAR O CORPO DA MESMA (SEU <B>BODY</B>.
<P>ENTAO DEFINIMOS AS MARGENS DO TOPO (<B>TOP</B>) , DIREITA (<B>RIGHT</B>), 
ESQUERDA (<B>LEFT</B>) E FUNDO (<B>BOTTOM</B>).
<P>TAMBEM DEFINIMOS AS CORES DE FUNDO (<B>BACKGROUND</B>) E DA FONTE (<B>COLOR</B>).
<P>APROVEITE PARA ALTERAR OS VALORES DESSES ATRIBUTOS, SEMPRE OBSERVANDO
SUAS CONSEQUENCIAS SOBRE A APRESENTAÇÃO DA PAGINA.
</DIV>
</BODY>
</HTML>

Como sou iniciante nao sei realmente o que esta dando errado.

Alguem pode me ajudar?

Obrigado desde ja.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Troque:

<HTML>
<HEAD>
por:

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

sem DOCTYPE, o IE renderiza em Quirks Mode, esse hack do text-align é para IE5.x .. pode abandonar isso, já dá para nivelar pelo IE6.

 

escreva as tags e atributos HTML em minusculo

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

pois é..

 

<!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>	<title>USANDO CSS - PARTE 01</title><style type="text/css">* {	margin: 0;	padding: 0;}body {	background: #121212;	color: #999}p {	margin-left: 5px;	margin-bottom: 5px;	margin-top: 5px;	font-size: 92.5%;	font-family: helvetica, sans-serif, tahoma;	color: red;}#tudo {	width: 760px;	margin: 0 auto;          	padding: 10px;}h1 {	color: yellow;}h2 {	color: green;}</style></head><body>	<div id="tudo">	<hr />		<strong>controlando o body e o paragrafo (p).</strong> <hr>	<h1> exemplo 1</h1>	<h2>leia atentamente</h2>       	<p>esta pagina utiliza o <strong>css</strong> (<i>cascading style sheets</i>) para 	formatar o corpo da mesma (seu <strong>body</strong>.	<p>entao definimos as margens do topo (<strong>top</strong>) , direita (<strong>right</strong>), 	esquerda (<strong>left</strong>) e fundo (<strong>bottom</strong>).	<p>tambem definimos as cores de fundo (<strong>background</strong>) e da fonte (<strong>color</strong>).	<p>aproveite para alterar os valores desses atributos, sempre observando	suas consequencias sobre a apresentação da pagina.	</div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito