Jump to content


Photo

Dúvida - Text Align


  • Faça o login para participar
6 replies to this topic

#1 Natalia Regina

Natalia Regina

    Novato no fórum

  • Usuários
  • 3 posts
  • Sexo:Não informado
  • Localidade:São Caetano do Sul, SP

Posted 18/10/2009, 15:26

Olá!

Estou tentando fazer um layout em css e estou usando a propriedade text-align no body. Em uma versão mais antiga do IE o layout aparece centralizado, já na versão mais atual do FF aparece encostado à margem.

Segue o código:

<html>
 <head>
  <title>***UNIVERSO SABOR***</title>
  <style type="text/css">
   body
	{
		margin: 0;
		padding: 0;
		font: arial, hevetica, sans-serif;
		text-align: center;
		color: #000000;
		background-color: #ffffff;
	}
	
	#container
	{
		width: 800px;
		height: 500px;
		text-align: left;
		background-color: red;
		border: 1px solid black;
	}

		#header
	{
		height: 105px;
		background-color: fuchsia;
	}

	#mainnav
	{
		height: 28px;
		background-color: green;
	}

	#menu
	{
		
		margin-top: 5px;
		margin-left: 10px;
		float: left;
		width: 180px;
		height: 300px;
		background-color: yellow;
	}

	#contents
	{
		margin-left: 200px;
				margin-top: 5px;
		margin-right: 10px;
		height:300px;
		background-color: aqua;
	}

	#footer	
	{
		clear: both;
		margin-top: 10px; 
		height: 30px;
		background-color: lime;
	}
  </style>
 </head>
 <body>
	<div id="container">
	<div id="header"></div> 
	<div id="mainnav"></div>
	<div id="menu"></div>
	<div id="contents"></div>
	<div id="footer"></div>
  </div>
 </body>
</html>

alguém pode me ajudar a manter o layou centralizado?

Desde já agradeço.

#2 douglash

douglash

    Novato no fórum

  • Usuários
  • 17 posts
  • Sexo:Não informado

Posted 18/10/2009, 18:10

Olá!

Estou tentando fazer um layout em css e estou usando a propriedade text-align no body. Em uma versão mais antiga do IE o layout aparece centralizado, já na versão mais atual do FF aparece encostado à margem.

Segue o código:

<html>
 <head>
  <title>***UNIVERSO SABOR***</title>
  <style type="text/css">
   body
	{
		margin: 0;
		padding: 0;
		font: arial, hevetica, sans-serif;
		text-align: center;
		color: #000000;
		background-color: #ffffff;
	}
	
	#container
	{
		width: 800px;
		height: 500px;
		text-align: left;
		background-color: red;
		border: 1px solid black;
	}

		#header
	{
		height: 105px;
		background-color: fuchsia;
	}

	#mainnav
	{
		height: 28px;
		background-color: green;
	}

	#menu
	{
		
		margin-top: 5px;
		margin-left: 10px;
		float: left;
		width: 180px;
		height: 300px;
		background-color: yellow;
	}

	#contents
	{
		margin-left: 200px;
				margin-top: 5px;
		margin-right: 10px;
		height:300px;
		background-color: aqua;
	}

	#footer	
	{
		clear: both;
		margin-top: 10px; 
		height: 30px;
		background-color: lime;
	}
  </style>
 </head>
 <body>
	<div id="container">
	<div id="header"></div> 
	<div id="mainnav"></div>
	<div id="menu"></div>
	<div id="contents"></div>
	<div id="footer"></div>
  </div>
 </body>
</html>

alguém pode me ajudar a manter o layou centralizado?

Desde já agradeço.


Olá, vc está querendo centralizar o layout, certo? então o melhor modo é usar margin:0 auto.
Tente do modo abaixo:

<html>
 <head>
  <title>***UNIVERSO SABOR***</title>
<style type="text/css">
   *{
	margin:0;
	padding:0;
   }
   body
	{
		font: arial, hevetica, sans-serif;
		text-align: center;
		color: #000000;
		background-color: #ffffff;
	}
	
	#container
	{
		width: 800px;
		margin:0 auto;
		background-color: red;
		border: 1px solid black;
	}

		#header
	{
		height: 105px;
		background-color: fuchsia;
	}

	#mainnav
	{
		height: 28px;
		background-color: green;
	}

	#menu
	{
		margin:3px 0 3px 3px;
		float: left;
		width: 180px;
		height: 300px;
		background-color: yellow;
	}

	#contents
	{
		margin:3px 0 3px 3px;
		float:left;
		width:605px;
		height:300px;
		background-color: aqua;
	}

	#footer	
	{
		clear: both;
		height: 30px;
		background-color: lime;
	}
  </style>
</head>  
 <body>
	<div id="container">
	<div id="header"></div> 
	<div id="mainnav"></div>
	<div id="menu"></div>
	<div id="contents"></div>
	<div id="footer"></div>
	</div> 
</body>
</html>


#3 Natalia Regina

Natalia Regina

    Novato no fórum

  • Usuários
  • 3 posts
  • Sexo:Não informado
  • Localidade:São Caetano do Sul, SP

Posted 21/10/2009, 21:10

Funcionou! Obrigada, Douglash!

Agora, se naum for pedir muito, sou praticamente novata em CSS. Então será que vc poderia me explicar esse código?

EDIT: Deixem que eu me espresse melhor, quero saber o porque desse margin 0 auto alinhar o layout no centro da tela. Aproveitando o embalo, outra dúvida: e se eu quisesse alinhá-lo verticalmente tbm no centro da tela? O que deveria usar?

Grata!

Edição feita por: Natalia Regina, 21/10/2009, 21:17.


#4 Kahor

Kahor

    12 Horas

  • Usuários
  • 230 posts
  • Sexo:Masculino

Posted 23/10/2009, 10:03

A propriedade margin tem 4 "sub-elementos"

margin-top <~ margem de topo
margin-bottom <~ margem de rodapé, abaixo
margin-left <~ margem esquerda
margin-right <~ margem direita

Ai voce pode colocar no CSS os 4 ex.: {margin-top: 0; margin-bottom: 0;}

E tambem pode mesclar 2 ou 4 elementos junto ex.:

{margin: 0 0;} <~ sendo que o primeiro é o margin-top e o segundo margin-left
{margin: 0 0 0 0;} <~ 1º margin top ; 2º margin left ; 3º eu nao lembro mas deve ser o margin-right ; 4º margin-bottom

E o auto é para ficar automatico, indepedente da resolução do monitor da pessoa que acessa, e para deixar auto na vertical voce colocar auto nos 2.

#5 Paulo Freitas

Paulo Freitas

    ××××××× LRU #456504 ××××××× ××××××× LRM #364686 ×××××××

  • Ex-Admins
  • 5612 posts
  • Sexo:Masculino
  • Localidade:Campinas - SP

Posted 24/10/2009, 09:53

E tambem pode mesclar 2 ou 4 elementos junto ex.:

{margin: 0 0;} <~ sendo que o primeiro é o margin-top e o segundo margin-left
{margin: 0 0 0 0;} <~ 1º margin top ; 2º margin left ; 3º eu nao lembro mas deve ser o margin-right ; 4º margin-bottom

Na verdade é possível informar 1, 2, ou 4 propriedades. E tu se enganou legal nas explicações das margens. :P

2px de margem para cima, direita, baixo e esquerda (sentido do relógio):

margin: 2px;
2px de margem para cima e para baixo e 4px de margem para esquerda e direita:

margin: 2px 4px;
Mesma coisa que o anterior: 2px de margem para cima, 4px de margem para direita, 2px de margem para baixo e 2px de margem para esquerda (sentido do relógio):

margin: 2px 4px 2px 4px;
Nenhuma margem:

margin: 0; /* e não 'none' como muitos usam */
[]’sAté mais

#6 Natalia Regina

Natalia Regina

    Novato no fórum

  • Usuários
  • 3 posts
  • Sexo:Não informado
  • Localidade:São Caetano do Sul, SP

Posted 27/10/2009, 18:53

Kahor e Paulo, obrigada por tirarem minhas dúvidas.

#7 Rick.hjpbarcelos

Rick.hjpbarcelos

    Novato no fórum

  • Usuários
  • 21 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP

Posted 30/10/2009, 04:44

O jeito mais indicado é esse:

#container	{	   
		width: 800px;
		margin: 0 auto;
		height: 500px;
		text-align: left;
		background-color: red;
		border: 1px solid black;
}





2 user(s) are reading this topic

0 membro(s), 2 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq