Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Iae galerinha. Pois é, tô com um problema pra codar um layout.
/applications/core/interface/imageproxy/imageproxy.php?img=http://img2.imageshack.us/img2/7776/cce2010.jpg&key=8a643a17791982544c708ea6c0cc0a462c11b93f8f7ec0c12c0fd9aa1b539701" alt="Imagem Postada" />
Percebam na imagem que a parte do logo e da publicidade (além da parte 'minha conta') não estão centralizados com os demais conteúdos do site (tirem como referência a barra de busca). Em resolução 1024x768 ou menor, a centralização fica relativamente perfeita. Entretando, em resoluções maiores, como a da imagem, a centralização é deficiente.
O meu layout foi feito da seguinte forma: tenho uma div #topo_globo que envolve toda a parte citada, até a região da busca. Nessa div, o bg é uma imagem que abrange a parte maior do menu superior (mais larga), o bg do topo (aquele grandiente entre o menu e a busca) e o bg da busca. Dentro dessa div, coloquei uma div #logo_area que abrange a parte descrita por 'LOGO'. Essa div contém uma imagem de fundo que é responsável pelo efeito 'corner' e diminuição do menu à esquerda. Ainda dentro da #topo_globo, há uma div #menu_sup_area, responsável pela parte do menu, da publicidade e da 'minha conta', sendo que estas últimas estão envolvidas em outras divs com fins estilizadores.
Gostaria de saber o que devo fazer para fazer com que essa parte do layout fique centralizada com o resto do site.
Seguem códigos:
****
HTML:
<body>
<div id="topo_globo">
<div id="logo_area">
<img src="<? echo $URL;?>/imagens/logo.png" alt="logo" />
</div>
<div id="menu_sup_area">
<ul>
<li><a href="#">Anuncie Já!</a></li>
<img src="<? echo $URL;?>/imagens/menu_sup_sep.png" alt="sep" />
<li><a href="#">Categorias</a></li>
<img src="<? echo $URL;?>/imagens/menu_sup_sep.png" alt="sep" />
<li><a href="#">Minha Conta</a></li>
<img src="<? echo $URL;?>/imagens/menu_sup_sep.png" alt="sep" />
<li><a href="#">Cadastre-se</a></li>
<img src="<? echo $URL;?>/imagens/menu_sup_sep.png" alt="sep" />
<li><a href="#">Quem Somos</a></li>
<img src="<? echo $URL;?>/imagens/menu_sup_sep.png" alt="sep" />
<li><a href="#">Fale Conosco</a></li>
</ul>
<div id="publicidade_superior">
<center><img src="<? echo $URL;?>/imagens/banners_exemplos/468x160.png" alt="banner1" /></center>
</div>
<div id="mc_superior">
<form method="post" action="users.php">
<img src="<? echo $URL;?>/imagens/tag_mc_preto.png" alt="minha conta" />
<img src="<? echo $URL;?>/imagens/user_mc_preto.png" alt="usuário mc" />
<input type="text" name="usuario" class="mc_sup" />
<img src="<? echo $URL;?>/imagens/senha_mc_preto.png" alt="usuário mc" class="pw" />
<input type="password" name="senha" class="mc_sup" />
<input type="submit" name="logar" value="" class="ok_mc_sup" />
</form>
</div>
</div>
<div id="superior_busca">
<form method="get" action="busca.php">
<span>Buscar:</span>
<input type="text" name="q" class="campo_busca" />
<button type="submit" class="bt_busca_topo"></button>
<a href="busca">Mais opções</a>
</form>
</div>
</div>
<div id="main_contain">
<div id="apoio_esquerdo">
<div id="block_content">
<span class="esq_t_blo2ck">
</span>
<span class="cont_t_blo2ck">
oi
</span>
<span class="dir_t_bloc2k">
</span>
</div>
</div>
<div id="container">
oi
</div>
<div id="apoio_direito">
oi
</div>
</div>
<div id="footer">
<div id="footer_txt">
<div style="padding-left: 10px; width: 490px; float: left;">
© 2009 - <b><a href="<? echo $URL; ?>">Classificados CE</a></b> - Todos os direitos reservados<br />
Um site do grupo <a href="[http://www.bunecos.com">**BUNECOS.COM*** {
margin: 0;
padding: 0;
} font-family: Tahoma, Tahoma, Helvetica !important;
font-size: 11px;
color: #000;
min-width: 1000px;
background: #fff;
} text-decoration: none;
} text-decoration: underline;
}
#topo_globo {
width: 100%;
background: url(../imagens/bg_topo.png);
height: 216px;
overflow: hidden;
} color: #E0E0E0;
text-decoration: none;
} color: #fff;
text-decoration: none;
}
#logo_area {
width: 317px;
height: 168px;
background: url(../imagens/topo_01.png);
float: left;
}
#menu_sup_area {
width: 620px;
height: 168px;
float: left;
} padding-left: 5px;
} list-style: none;
display: block;
float: left;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
} float: left;
padding-top: 12px;
} float: left;
margin-left: 5px;
margin-right: 5px;
}
#mc_superior {
margin: 0 auto;
width: 468px;
} float: left;
margin-left: 10px;
padding-top: 2px;
} padding-top: 4px;
}
#superior_busca {
width: 690px;
clear: both;
margin-left: 20%;
margin: 0 auto;
} float: left;
font-size: 10px;
margin-top: 15px;
} float: left;
font-size: 12px;
text-transform: uppercase;
color: #fff;
font-weight: bold;
margin-top: 15px;
margin-right: 15px;
}
#main_contain {
margin: 0 auto;
margin-top: 10px;
width: 1000px;
min-height: 800px;
}
#apoio_esquerdo {
width: 130px;
float: left;
}
#container {
width: 750px;
float: left;
}
#apoio_direito {
width: 120px;
float: left;
}
#block_content {
clear: both;
display: block;
width: 128px;
height: auto;
}
.esq_t_block {
width: 9px;
float: left;
height: 21px;
background: url(../imagens/esq_title_big.png);
}
.cont_t_block {
float: left;
height: 21px;
background: url(../imagens/cont_titles_big.png);
}
.dir_t_block {
width: 4px;
float: left;
height: 21px;
background: url(../imagens/dir_titles_big.png);
}
#footer {
clear: both;
width: 100%;
background: url(../imagens/bg_footer.png);
height: 64px;
margin-top: 10px;
color: #766f6e;
} color: #766f6e;
}
#footer_txt {
width: 1000px;
margin: 0 auto;
padding-top: 7px;
}
#publicidade_superior {
margin: 0 auto;
margin-top: 60px;
width: 468px;
margin-bottom: 10px;
}Obrigado!
Carregando comentários...