Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou começando com css agora e só o topo do site fica centralizado , agora o corpo e o rodapé eu não consigo de nenhum jeito ¬¬
CSS
/ Inicio /
body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;}
#geral {margin:auto; width:1000px;}
/* background:url(imagens/bg.gif); /
/ Topo /
#logomarca span {display:none;}
#logomarca h1 {background:url(imagens/logomarca.jpg) no-repeat; width:151px; height:43px;}
/*
#lateral1 {background:url(imagens/topol.jpg) no-repeat; width:130px; height:100px; position:absolute;}
*/
#lateral1 {position:absolute; left:-35px; top:-460px;}
#lateral3 {position:absolute; left:744px; top:-460px;}
#lateral4 {background:url(imagens/lat2.jpg) repeat-y; position:absolute; width:15px; height:1020px; left:893px; top:196px; }
#lateral5 {background:url(imagens/lat1.jpg) repeat-y; position:absolute; width:15px; height:1020px; left:115px; top:196px;}
#topo {background:url(imagens/topom.jpg) repeat-x; height:100px; width:895px; position:absolute;}
#logomarca {position:absolute; width:151px; height:43px; left:200px; bottom:33px;}
/ Menu Principal /
#menup {position:absolute; width:480px; left:350px; bottom:28px;}
#menup ul {margin:0; padding:0;}
#menup li {float:left; list-style:none; margin:7px; padding-top:11px; padding-bottom:10px;}
#menup li a {text-transform:uppercase; color:#fff; font-size:12px; font-weight:bold; text-decoration:none; padding:5px;}
#menup li a:hover {background:url(imagens/fundo_menu.gif) repeat-x; color:#fff;}
#menup li a.current {background:url(imagens/fundo_menu.gif) repeat-x; color:#fff;}
/ --------------------------- /
#botaotopo {no-repeat; position:absolute; right:20px; top:4px;}
#botaotopo2 {no-repeat; position:absolute; right:133px; top:3.5px;}
#lateral2 {background:url(imagens/topor.jpg) no-repeat; width:130px; height:100px; position:absolute; right:-129px;}
#flash { no-repeat; position:relative; bottom:-100px;}
#corpo {position:absolute; left:300px; top:220px;}
/pag produtos/
#produtos {position:absolute; width:480px; left:450px; bottom:-50px; }
#produtos ul {margin:0; padding:0;}
#produtos li {float:left; list-style:none; margin:7px; padding-top:11px; padding-bottom:10px;}
#produtos li a {text-transform:uppercase; color:#fff; font-size:12px; font-weight:bold; text-decoration:none; padding:1px;}
#produtos li a:hover {background:url(imagens/fundo_menu2.gif) repeat-x; color:#fff;}
#produtos li a.current {background:url(imagens/fundo_menu2.gif) repeat-x; color:#fff;}
#produtos2 {position:absolute; width:480px; left:520px; bottom:-80px;}
#produtos2 ul {margin:0; padding:0;}
#produtos2 li {float:left; list-style:none; margin:7px; padding-top:11px; padding-bottom:10px;}
#produtos2 li a {text-transform:uppercase; color:#fff; font-size:12px; font-weight:bold; text-decoration:none; padding:1px;}
#produtos2 li a:hover {background:url(imagens/fundo_menu2.gif) repeat-x; color:#fff;}
#produtos2 li a.current {background:url(imagens/fundo_menu2.gif) repeat-x; color:#fff;}
#corpoprodutos1 {position:absolute; left:300px; top:-10px; font-size:11px;}
#corpoprodutos2 {position:absolute; left:300px; top:170px; font-size:11px;}
#corpoprodutos3 {position:absolute; left:300px; top:345px; font-size:11px;}
#corpoprodutos4 {position:absolute; left:300px; top:530px; font-size:11px;}
#corpoprodutos5 {position:absolute; left:300px; top:710px; font-size:11px;}
#corpo {position:absolute; margin:auto; left:300px; top:220px; }
/ rodape site /
#rodape {background:url(imagens/rodape.jpg) repeat-x; height:68px; width:770px; position:absolute; left:127px; bottom:-270px}
#rodape2 {background:url(imagens/rodape.jpg) repeat-x; height:68px; width:770px; position:absolute; left:127px; bottom:-620px}
#textorodape { font-family:"Comic Sans MS", cursive, cursive; color:#333333; font-size:12px; font-weight:600; position:absolute; left:150px; bottom:25px;}
#emilia {background:url(imagens/emilia.gif) no-repeat; width:60px; height:38px; position:absolute; right:190px; bottom:13px;}
#twitter {no-repeat; width:65px; height:46px; position:absolute; right:60px; bottom:8px; }
#youtube {no-repeat; width:92px; height:37px; position:absolute; right:10px; bottom:8px;}
/ fim rodape site /
/ fim site /
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="imagens/favicon.ico" type="image/x-icon" />
<title></title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="geral">
<div id="topo">
<div id="lateral1">
</div>
<div id="logomarca">
<a href="index.htm" title="Página Principal"><img src="imagens/logomarca.jpg" border=0 /></a>
</div>
<div id="menup">
<ul>
<li><a href="empfilosofia.htm" title="">A Empresa</a></li>
<li><a href="produtos.htm" title="Nossos Produtos">Produtos</a></li>
<li><a href="clientes.htm" title="Nossos Clientes">Clientes</a></li>
<li><a href="localizacao.htm" title="Localize a Nossa Loja">Localização</a></li>
<li><a href="contato.htm" title="Entre em Contato Conosco">Contato</a></li>
</ul>
</div>
<div id="botaotopo">
<img src="imagens/botMapaSite.jpg" border=0 />
</div>
<div id="botaotopo2">
<a id="botaotopo2" href="map.htm" title="Mapa do Site"><img src="imagens/bot2MapaSite.gif" border=0 /></a>
</div>
<div id="lateral2">
</div>
<div id="topodestaque1">
<img src="imagens/topodestaque.jpg" border=0 />
</div>
<div id="topodestaquetexto">
Linhas de Produtos
</div>
<div id="linhatexto">
___________________________________________________________________
</div>
<div id="produtos">
<ul>
<li><a href="prodMoveis.htm" title="Móveis">Móveis</a></li>
<li><a href="prodIndustrial.htm" title="Industrial">Industrial</a></li>
<li><a href="proLinhaInstitucional.htm" title="Linha Institucional">Linha Institucional</a></li>
</ul>
</div>
<div id="produtos2">
<ul>
<li><a href="proLixeiras.htm" title="Lixeiras">Lixeiras</a></li>
<li><a href="proOutros.htm" title="Outros">Outros</a></li>
</ul>
</div>
</div>
<div id="lateral4">
</div>
<div id="lateral5">
</div>
<div id="corpo">
<a href="prodMoveis.htm" title="Móveis"><img src="imagens/moveis.jpg" border=0 width="250" height="130" /></a>
<br />
<br />
<img src="imagens/barra.gif" border="0" width="700" />
<br />
<br />
<a href="prodIndustrial.htm" title="Produtos Industriais"><img src="imagens/industrial.jpg" border=0 width="250" height="130" /></a>
<br />
<br />
<img src="imagens/barra.gif" border="0" width="700" />
<br />
<br />
<a href="proLixeiras.htm" title="Lixeiras"><img src="imagens/lixeiras.jpg" border=0 width="250" height="130" /></a>
<br />
<br />
<img src="imagens/barra.gif" border="0" width="700" />
<br />
<br />
<a href="proLinhainstitucional.htm" title="Linha Institucional"><img src="imagens/utilidades.jpg" border=0 width="250" height="130" /></a>
<br />
<br />
<img src="imagens/barra.gif" border="0" width="700" />
<br />
<br />
<a href="proOutros.htm" title="Outros"><img src="imagens/outros.jpg" border=0 width="250" height="130" /></a>
<br />
<img src="imagens/barra.gif" border="0" width="700" />
<div id="corpoprodutos1">
<p><font color="#0000CC" size="+1"><p>Móveis</p></font></p>
<p>gdfgdfgdfgdg</b></p>
</div>
<div id="corpoprodutos2">
<p><font color="#0000CC" size="+1"><p>Industrial</p></font></p>
<p>dsdfsdf</p>
</div>
<div id="corpoprodutos3">
<p><font color="#0000CC" size="+1"><p>Lixeiras</p></font></p>
<p>ffsfsd</p>
</div>
<div id="corpoprodutos4">
<p><font color="#0000CC" size="+1"><p>Linha Institucional</p></font></p>
<p>dsadad</p>
</div>
<div id="corpoprodutos5">
<p><font color="#0000CC" size="+1"><p>Outros</p></font></p>
<p>Cone Sinalizador, Cesto Expositor e Suporte para Válvulas são</p>
<p>os produtos que fazem parte desta linha.</p>
</div>
<br />
<br />
*Fotos Ilustrativas
<br />
<br />
<img src="imagens/barra.gif" border="0" width="700" />
<br />
<br />
<br />
<br />
</div>
<div id="rodape2">
<div id="textorodape">
xcfgcgxvxcvxc
</div>
<div id="emilia">
</div>
<div id="twitter">
<a id="twitter" href=""><img src="imagens/twitter.gif" border=0 ></img> </a>
</div>
<div id="youtube">
<a id="youtube" href=""><img src="imagens/youtube.gif" border=0 ></img> </a>
</div>
</div>
</div>
</body>
</html>
Se alguma alma caridosa conseguir me dar uma luz , eu não quero que o site fique sem estar centralizado quando as resoluções estiverem diferentes
Carregando comentários...