Alinhar DIV (Html e CSS)

Lu Reis · 21 de maio de 2011

E ae pessoal,

Algum tempo atras eu estava com duvidas quanto ao alinhamento total do site, ate que eu consegui um esquema (usado no body) para deixar o mesmo centralizado.

Junto com essa questão eu pensei também quanto a como usar os Position, eu anteriormente usava sempre como Absolute, ate que certa vez eu vi o meu site em um outro monitor e percebi que estava tudo desalinhado.

E a partir de agora, quero usar o Relative, porém, ainda tenho muitas duvidas ...

Usando o relative eu devo sempre determinar o Top, Height, Width, Left/Right ?!

Porque é necessário usar o Float ( ao menos no meu caso é), pois, quando eu tiro o float, ele cria uma barra horizontal ?!

Eu usando o Float + Relative, quando abrir o site em um monitor de resolução diferente ele vai ficar certinho !?

Gostaria de mais dicas quanto a essa parte de ALINHAMENTO DE DIVS usando o Relative !

Segue meus codigos :

HTML

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html>
<head>
<title>Teste</title>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1">

<link rel="SHORTCUT ICON" href="imagens/estrutura/logo.ico"/>
<link rel="stylesheet" href="estilo.css" type="text/css" media="screen">

</head>
<body>
<div id="tudo">
	<div id="conteudo">
             <div id='imglogocorpo'><img src='imagens/estrutura/logo.png'></div>
             <div id='imgtour'><img src='imagens/estrutura/tour.png'></div>
             <div id='imgconta'><img src='imagens/estrutura/conta.png'></div>
         <div id="divlogin">
            <table border="0px" cellspacing='10px' cellpadding='0px' id='tablelogin'>
               <tr>
                  <td align='right'>E-mail:</td>
                  <td><input type='text' id='text1' style='width: 200px;'></td>
               </tr>
               <tr>
                  <td align='right'>Senha:</td>
                  <td><input type='password' id='text1' style='width: 200px;'></td>
               </tr>
            </table>

         </div>
		 <div id='imgentrar'><img src='imagens/estrutura/entrar.png'></div>
             <div id='esenha'>Esqueceu sua senha?</div>
             <div id='ausuario'>Ainda não é usuário?</div>
             <div id='textorodape'>Quem Somos | Politica de Uso | Contato | Anuncie</div>
 	</div>
</div>
</body>
</html>

CSS

body {
	margin:0px;
	padding:0px;
      background: #125447 url('imagens/estrutura/fundo3.png');
	background-color :#ffffff;
      background-repeat: repeat-x;
      text-align: center;
      font-size: 10px;
      font-family: arial;
	}
#tudo {
	width: 950px;
	margin:0px auto;			
      text-align: left;
      height: 430px;
	}
#conteudo {
      position: relative;
      top: 0px;
      height: 100%;
	padding: 0px;
	background-color: #ffffff;
      font-size: 20px;
      font-family: arial;
	background-image:url('imagens/estrutura/fundo3.png');
	}

#topo {
	padding: 0px;
      height: 34px;
      background: #125447 url('imagens/estrutura/fundo3.png');
      overflow: hidden;

	}
#corpo {
	padding: 0px;
      height: 150px;
      background: #ffffff;
      overflow: hidden;
	}
#rodape {
	padding: 0px;
      height: 150px;
      background: #99ccfe url('imagens/estrutura/f1.png');
      border: 0px red solid;
      overflow: hidden;
	}
#imglogotopo {
      position: relative;
      top: 3px;
      left: 4px;
      float: left;
      }
#imglogocorpo {
      position: relative;
      top: 50px;
      left: 0px;
       }

#imgtour {
      position: relative;
      top: 320px;
	left: 135px;
	float: left;
       }

#imgconta {
      position: relative;
      top: 320px;
	left: 210px;
	float: left;
       }

#imgseparador1{
      position: relative;
      top: 0px;
      left: 40px;
      }

#imgseparador2{
      position: relative;
      top: 0px;
      left: 80px;
      }
#divlogin{
      position: relative;
      font-family: arial;
      font-size: 10px;
      top: 100px;
	right: 0px;
	float: right;
      overflow: hidden;
      background-color: transparent;
      height: 170px;
      width: 250px;
      }
#divresto{
	padding: 0px;
      background: transparent;
      border: 0px;
      overflow: hidden;
	}
#divinfo{
	padding: 10px;
      background: transparent;
      overflow: hidden;
      float: left;
	}

#divlog{
	padding-left: 5px;
	padding-right: 5px;
      background: transparent;
      overflow: hidden;
      float: left;
      border: 1px #cccccc solid;
	}
#divlog1{
	padding: 9px;
      background: transparent;
      overflow: hidden;
      float: left;
      border: 1px #cccccc solid;
	}

#divbotoes{
	width: 985px;
      height: 150px;
      top: 80px;
      position: relative;
	padding: 0px;
      background: #ffffff;
      overflow: hidden;
      float: right;
	}
#text1{
      border: 1px #cccccc solid;
      height: 30px;
      font-size: 15px;
      font-family: arial;
      color: #555555; 
      padding: 0px;
      margin: 0px;
     }
#tablelogin{
      position: relative;
      top: 10px;
      font-size: 14px;
      font-family: arial;
      font-weight: bold;
	color: white;
      width: 100%;
}


#imgentrar{
      position: relative;
      top: 205px;
	left: 270px;
	float: left;
}

#esenha{
      position: relative;
	font-size: 14px; 
	font-family: arial;
	color: #ffffff;
	top: 170px;
	left: 710px;
	float: left;;
	}

#ausuario{
      position: relative;
	font-size: 14px; 
	font-family: arial;
	color: #000000;
	top: 250px;
	left: 370px;
	float: left;;
	}

#textorodape{
      position: relative;
	font-size: 14px; 
	font-family: arial;
	color: #000000;
	top: 380px;
	left: 60px;
	float: left;;
	}

DiF · 21 de maio de 2011

nao necessariamente... você pode usar position absolute com medidas liquidas. direto..

exemplo:

position: absolute;

top: 10%;

left: 50%;

margin-left: -421px;

isso faz com que sua div fique sempre a 10 % do topo e 50% da lateral esquerda independentemente da resoluçao e tamanho do monitor. e -421px da margem esquerda referente aos 50% de left.

a posiçao relativa você usa para posicionar uma div em relaçao a outra que esta "acima" ou melhor.. a que vem antes...

a posiçao absoluta ja diz tudo.. é absoluto é aquela posiçao e se tiver q passar por ciam vai ficar por cima a menos que use um z-index para manipular a sobreposiçao.

o float left faz com que alinhe a esquerda flutuante.. teoricamente o jeito certo deposicionar duas divs por exemplo é a primeira deixar com float left e a segunda sem float.. assim elas ficam uma do lado da outra... mas depende da situaçao também.. nao é sempre que precisa ser assim...

Eu usando o Float + Relative, quando abrir o site em um monitor de resolução diferente ele vai ficar certinho !? Nao. isso nao determina as posiçoes que fique "certinho" o melhor a fazer é utilizar a medida liquida como eu falei anteriormente... com posiçao absoluta, top e left em percentagem.

Lu Reis · 21 de maio de 2011

então eu posso usar o Position Absolute pra fazer tudo ? Contanto que eu sempre especifique o Top e Left em % ?!

Já o Height e Widht posso usar em PX ?!

DiF · 21 de maio de 2011

exato, basta setar no seu container que no caso é a div id="tudo" a posiçao como absoluta, top e left em %. a largura e altura você pode setar em PX mesmo isso nao interfere.

você deve dar atençao a posiçao absoluta, e os eixos x e y. que no caso... é respectivamente: position: absolute, left ou right como eixo X e top ou bottom como eixo Y.

estes você deve setar em % para se auto-ajustar em qualquer resoluçao e tamanho de monitor. o resto nao precisa estar em % porque ja vai estar dentro do container.

Lu Reis · 23 de maio de 2011

E se for numa resolução menor, ele não "expreme" tudo ?!

Ou ele cria as barras de rolagem horizontal e vertical !?

DiF · 23 de maio de 2011

bom nesse caso sim. pois a tecnica serve para ter uma largura fixa. ou seja, você nao esta usando a medida liquida. se for o caso.. você pode setar seu width da div "tudo" em % que ai vai acompanhar quando você redimencionar seu navegador... eu particularmente nao uso isso porque normalmente as pessoas usam o minimo de 1024 x 768 .... o monitor de 17'' ja esta bem comum... ainda tem gente que usa uma resoluçao menor do que isso.. ai nesse caso.. o melhor é fazer duas versões.. uma para 800 x 600 .. e outra pra resoluçoes mais altas. pra fazer isso.. basta criar 2 arquivos CSS e alterar com php... entre as duas...

enfim.. cabe a você decidir como vai fazer.. particularmente em todos meus sites seto o width do container em 960px. isso numa resoluçao de 1024 x 768 deve ficar ficar so com um pequeno espaço nas laterais..

Lu Reis · 24 de maio de 2011

Gostei da sua ideia ....

vou desenvolver ele todo usando um monitor à 1024;

E vou pesquisar por ai o esquema pra fazer o site reconhecer a resolução e alterar de css ( se voce souber me manda por favor)

Valeu pela força !

Roberto.Korea · 24 de maio de 2011

O CSS3 vais er uma mão na roda.

Vai melhorar muito o visual dos meus sistemas ^^.

DiF · 24 de maio de 2011

E vou pesquisar por ai o esquema pra fazer o site reconhecer a resolução e alterar de css

você pode descobrir o tamanho do monitor via javascript, se eu nao me engano com:


<script type="text/javascript">
  if (screen.width == 1024)
        alert ('resolução é 1024')
</script>

e depois com php.. selecionar o arquivo css adequado, mantendo seus arquivos css num banco de dados.. bom isso é só uma das soluçoes que você pode fazer.. certamente existem outros métodos...

O CSS3 vais er uma mão na roda.
Vai melhorar muito o visual dos meus sistemas ^^.

certamente!! por exemplo estou usando na parte de login do meu sistema do tcc a tag " placeholder" consiste em colocar alguma frase dentro do input e quando ganha foco.. a frase sai para escrever.. e quando perde o foco .. a frase volta.. normalmente fazemos isso ou com JS ou jQuery. infelizmente vou ter que implementar uma funçao em javascript alem desta tag.. porque como sempre... o IE9 nao renderizou esta tag CSS3..

ao meu ver.. o IE por mais que eles lançam outras versões.. sempre vai ficar atras do mozilla firefox, chrome.. safari eu nao sei porque eu nao tenho mac pra usa-lo então nao sei dizer se é bom. rsrs

Roberto.Korea · 24 de maio de 2011

Com certeza...

Quero utilizar umas tags que eu estava vendo nos meus projetos.

Tenho alguns projetos que estou pensando em fazer, mas vou usar um estilo de janelas, utilizando AJAX.

Mas como o meu forte não é o visual, estava pensando em usar as novas renderizações do CSS3.

Só que tem esse maldito problema do IE.

Como eu gosto de manter um padrão na programação, ainda preciso ver quais são as tag que o IE renderiza. Para não precisar ficar fazendo javascripts fora para que tenha o mesmo visual do CSS3.

Acho que o ano que vem, poderemos utilizar mais tags do CSS3.

Mas até lá, vamos brincar com as que já temos.

DiF · 24 de maio de 2011

certo, ate o ano q vem.. o css3 talvez possa ate ter tags novas... e também as IDE's tinham que se atualizar.. para reconhecer essas tags... por exemplo o eclipse for php helios... ele acusou "erro" na tag placeholder porque ele nao reconhece como tag do css3