Postagens
Male
Posted by 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.
[codebox]
<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>
[/codebox]
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:
[codebox]
.centro {
position:absolute;
}
[/codebox]
Agora vamos inserir ela no código HTML que vai ficar assim:
[codebox]<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>[/codebox]
e por ultimo é só colocar tudo dentro de uma tabela centralizada:
[codebox]<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>[/codebox]
O resultado final é esse:
[codebox]<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>[/codebox]
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.
- Victor Gamarra likes this
