Ir para conteúdo

POWERED BY:

Arquivado

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

Carlos Maniero

Tutorial - Centralizando Varias Divs Com Position Absolute

Por , em Desenvolvimento frontend

Recommended Posts

Carlos Maniero    0

Carlos Maniero
Postado

Olá, eu sou Carlos Maniero tenho 16 anos e vou da uma forcinha ai com esse problema que causa tantos problemas pra que quer montar um layout rápido.

 

Que usa o DW conhece a ferramenta Draw AP Div, não é? Ela permite você criar divs com position absolute(layers), o que é uma grande praticidade por gerar o css automaticamente. Pra quem não tem conhece o DW ou não conhece a ferramenta abaixo tem um exemplo de layer.

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:18px;
top:14px;
width:225px;
height:250px;
z-index:1;
background-color: #666666;
}
#apDiv2 {
position:absolute;
left:268px;
top:14px;
width:225px;
height:250px;
z-index:2;
background-color: #666666;
}
#apDiv3 {
position:absolute;
left:37px;
top:115px;
width:438px;
height:62px;
z-index:4;
text-align: center;
background-color: #CCCCCC;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}
.email {
color: #666;
}
#apDiv4 {
position:absolute;
left:78px;
top:96px;
width:347px;
height:101px;
z-index:3;
background-color: #999999;
}
#apDiv5 {
position:absolute;
left:0;
top:0px;
width:515px;
height:277px;
z-index:0;
background-color: #FFFFFF;
border:1px, solid , #000;
}
-->
</style>
</head>

<body>
<div id="apDiv5"></div>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3">Carlos Maniero<br />
 <span class="email"><a href="mailto:carlosmaniero@gmail.com" class="email">carlosmaniero@gmail.com</a></span><br />
</div>
<div id="apDiv4"></div>
</body>
</html>

 

Pronto ai vem aquela duvida cruel e agora como eu faço pra centralizar isso?

Eu mesmo já tive esse problema mais não consegui achar a solução no fórum, então teimoso do jeito que sou fiquei tentando, tentando e tentando, até que finalmente encontrei a solução e acho interessante compartilhar a solução com os usuarios do Forúm.

 

Primeiramente tentei colocar tudo dentro de uma tabela uma tática boa apesar de primeiramente não ter dado certo, após o primeiro fracasso tentei centralizar tudo com css, também sem sucesso e depois de certa insistência achei a solução.

 

Para centralizar divs basta colocar tudo dentro de uma Div com Position Absolute e depois tudo dentro de uma tabela alinhada no centro vamos ao código.

 

Primeiro Vamos criar o código CSS da div centro que é super simples:

 

.centro {
position:absolute;
}

 

Agora vamos inserir ela no código HTML que vai ficar assim:

 

<div class="centro">
<div id="apDiv5"></div>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3">Carlos Maniero<br />
 <span class="email"><a href="mailto:carlosmaniero@gmail.com" class="email">carlosmaniero@gmail.com</a></span><br />
</div>
<div id="apDiv4"></div>
</div>

 

e por ultimo é só colocar tudo dentro de uma tabela centralizada:

 

<table width="515px" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<div class="centro">
<div id="apDiv5"></div>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3">Carlos Maniero<br />
 <span class="email"><a href="mailto:carlosmaniero@gmail.com" class="email">carlosmaniero@gmail.com</a></span><br />
</div>
<div id="apDiv4"></div>
</div>
</td>
</tr>
</table>

 

O resultado final é esse:

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:18px;
top:14px;
width:225px;
height:250px;
z-index:1;
background-color: #666666;
}
#apDiv2 {
position:absolute;
left:268px;
top:14px;
width:225px;
height:250px;
z-index:2;
background-color: #666666;
}
#apDiv3 {
position:absolute;
left:37px;
top:115px;
width:438px;
height:62px;
z-index:4;
text-align: center;
background-color: #CCCCCC;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}
.email {
color: #666;
}
#apDiv4 {
position:absolute;
left:78px;
top:96px;
width:347px;
height:101px;
z-index:3;
background-color: #999999;
}
.centro {
position:absolute;
}
#apDiv5 {
position:absolute;
left:0;
top:0px;
width:515px;
height:277px;
z-index:0;
background-color: #FFFFFF;
border:1px, solid , #000;
}
-->
</style>
</head>

<body>
<table width="515px" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<div class="centro">
<div id="apDiv5"></div>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3">Carlos Maniero<br />
 <span class="email"><a href="mailto:carlosmaniero@gmail.com" class="email">carlosmaniero@gmail.com</a></span><br />
</div>
<div id="apDiv4"></div>
</div>
</td>
</tr>
</table>
</body>
</html>

 

Simples não é?

 

Olha que achou interessante e quiser colocar no seu site só peço que entre em contato comigo:

 

carlosmaniero@gmail.com

 

também estou a procura de contatos profissionais no Grande ABC -SP

 

Espero ter ajudado até mais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Tópico movido:

 

Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Webstandards: CSS / XML / XHTML / HTML » Artigos, Tutoriais e Matérias (Webstandards)

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

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