Posicionamento de imagens
Olá pessoal,
Eu estou com um problema de Posicionamento de imagens, na resolução que eu uso (1280 x 1024) o Menu e o Banner ficam centralizado, mas só que em 1024 x 768 não ficam, para entenderem melhor, segue a imagem dele em 1024 x 768:
Queria que o Banner e o Menu ficasse no centralizado e também queria que não tivesse aquele "espaçinho em branco" antes da linha (ver a flecha verde)
Meu index.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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Novo Site</title>
<link href="estilo2.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
</head>
<body onload="new ElementMaxHeight();">
<div id="topo">
<div id="main">
<div id="header">
<br/>
<div id="menu">
<div class="direitobg">
<div class="esquerdobg">
<div class="padding">
<ul>
<li><span>Início</span></li>
<li><a href="index-1.html">Sobre mim</a></li>
<li><a href="index-2.html">Serviços</a></li>
<li><a href="index-3.html">Portifólio</a></li>
<li><a href="index-4.html">Contato</a></li>
<li><a href="index-5.html">Fórum</a></li>
</ul>
<br class="clear" />
</div>
</div>
</div>
</div>
<div class="banner">
<div class="clear"></div>
</div>
<div id="quadros">
<div class="direitobg">
<div class="esquerdobg2">
<div class="padding2">
Teste TESTES TESTES TESTES TESTES TESTES TESTES TESTES TESTES TESTES TESTES TESTES TESTES TESTES
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="texto_principal">
Teste
</div>
<br/>
<div class="p1">
Teste.
</div>
<br/>
<!--começo do rodapé -->
<div id="rodape">
Testes - 2008 © • Direitos Reservados
</div>
<!--fim do rodapé-->
</div>
</div>
</div>
</body> Meu **estilo2.css**:html
{
font-family:Times New Roman, tahoma;
font-size:13px;
line-height:15px;
color:#868686;
}img {vertical-align:top;}
.clear { clear:both;}
#main { margin:0 auto;}
#header
{
height: 45px;
width: 100%;
background-image: url(header.jpg);
background-repeat: no-repeat;
background-position: 0 0;
border-bottom: 1px solid #fff;
position: relative;
border: 1px none #fff;
border-bottom: 1px solid #fff;
}#topo {background:url(images/header_tall.gif) top repeat-x;}
#menu
{
max-width: 780px;
background:url(images/menu_tall.gif) top repeat-x;
margin:10px 0 12px 250px;
}.direitobg {background:url(images/menu_right.gif) top right no-repeat;}
.esquerdobg {background:url(images/menu_left.gif) top left no-repeat; width:100%;}
.padding {padding:2px 0;}
#menu li {float:left; width:123px; background:url(images/menu_libg.gif) top right repeat-y; font-size:15px; text-align:center; padding:4px 0 5px 0; line-height:30px;}
#menu li a {color:#919191; text-decoration:none; font-weight:normal; font-size:15px;}
#menu li a:hover {color:#000000; text-decoration:underline;}
#menu li span {color:#000000; text-decoration:underline;}
#menu .last {background:none;}
.banner {background:url(images/banner.gif) top left no-repeat; padding:45px 300px 100px 414px; color:#ffffff; margin:10px 0 12px 250px;}
#quadros
{
max-width: 200px;
background:url(images/menu_tall.gif) top repeat-x;
margin:10px 0 12px 250px;
}.direitobg2 {background:url(images/menu_right.gif) top right repeat-x;}
.esquerdobg2 {background:url(images/menu_left.gif) top left repeat-y; width:100%;}
.texto_principal {text-align: center; color: #3d6f92; font-size: 18px;}
.p1 {padding:1px 250px 7px 250px;}
#rodape {background:url(images/header_tall.gif) top repeat-x; padding:23px 0 0 250px; color:#868686; font-size:12px;}
Estou aprendendo CSS, sou muito leigo ainda, quem puder me ajudar.
Agradeço desde já.
Até mais! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Discussão (5)
Carregando comentários...