Ir para conteúdo

POWERED BY:

Arquivado

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

Didiron

[Resolvido] Retirar espaçamento entre menu e div conteudo

Por , em Desenvolvimento frontend

Recommended Posts

Didiron    0

Didiron
Postado

Boa Tarde pessoal.

 

Estou com um pequeno problema que estou tendo, já tentei de várias formas, mas até agora nada conseguiu me ajduar, por isso decidi recorrer a vocês. Estou fazendo um site e existe um espaço bem pequeno entre o menu e o box de conteúdo, conforme vocês podem ver na imagem abaixo:

imagemtopo.jpg

 

Alguem sabe alguma forma de retirar aquele espaço? E grudar o box de conteudo branco com o menu?

 

Segue o html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="estilos/estilos.css" rel="stylesheet" type="text/css" />
<title>Info Jurid - Portal de Notícias Jurídicas</title>
</head>

<body>
<div id="login">
<form name="login" action="" method="post">
   	<label>
       	<span>Usuário: </span>
           <input type="text" name="usuario" />
       </label>

       <label>
       	<span>Senha: </span>
           <input type="password" name="senha" />
       </label>
       <input type="submit" name="logar" value="" class="btn_logar" />
   </form>
</div>

<div id="topo">
<div id="background_topo">
   	<div id="info-topo">
       	<img src="imagens/img_titulo.jpg" width="306" height="28" alt="Portal de Notícias Jurídicas" />
           <div id="pesquisa">
               <form action="" method="post">
               	<label>
                       <img src="imagens/img_pesquisa.png" width="41" height="40" />
                       <input type="text" placeholder="Pesquisar por título" />
                       <input type="submit" value="" class="btn" />
                   </label>
               </form>
           </div>
           <div id="link-topo">
           	<a href="#">Pesquisa Avançada</a>
       	</div>
           <div id="saudacao">
           	Quarta-feira, 4 de julho de 2012
           </div>
       </div>
   </div>
</div>

<div id="menu"><!--div menu-->
  	   <div id="content-menu">
         <ul>
             <li><a href="index.html">Início</a></li>
             <li><img src="imagens/barra.jpg" width="2" height="40" /></li>
             <li><a href="#">Institucional </a></li>
             <li><img src="imagens/barra.jpg" width="2" height="40" /></li>
             <li><a href="col.html">Colunistas </a></li>
             <li><img src="imagens/barra.jpg" width="2" height="40" /></li>
             <li><a href="#">Livraria</a></li>
             <li><img src="imagens/barra.jpg" width="2" height="40" /></li>
             <li><a href="#">Contato</a></li>
             <li><img src="imagens/barra.jpg" width="2" height="40" /></li>
             <li><a href="#">Tickets</a></li>	
             <li><img src="imagens/barra.jpg" width="2" height="40" /></li>
             <li><a href="#">Cadastro</a></li>
             <li><img src="imagens/barra.jpg" width="2" height="40" /></li>
             <li><a href="#">Painel do Assinante</a></li>
             <li><img src="imagens/barra.jpg" width="2" height="40" /></li>
             <li><a href="#">Revistas</a></li>
             <li><img src="imagens/barra.jpg" width="2" height="40" /></li>
             <li><a href="#">Pesquisa Avançada</a></li> 

      </ul>
     </div>
</div>

<div id="conteudo">

</div>


</body>
</html>

 

E o css

body{padding:0;margin:0;background:#0D1321;}
input:focus{outline:none;}
#login{width:1000px;height:30px;margin:0 auto;}
#login form{float:right;margin:5px 0;}
#login form label{margin-left:15px;}
#login form label span{font-family:Verdana, Geneva, sans-serif;font-size:14px;color:#C5D0E7;}
#login form label input{width:130px;height:18px;background-color:#0D1321;border:1px solid #24365B;font-family:Verdana, Geneva, sans-serif;font-size:12px;color:#C5D0E7;padding:0 3px;}
#login form .btn_logar{width:24px;height:21px;background:url(../imagens/btn_logar.png);border:0;cursor:pointer;}
#topo{background:url(../imagens/bg_topo.jpg);background-repeat:repeat-x;width:100%;height:203px;}
#topo #background_topo{width:1000px;height:203px;background:url(../imagens/img_topo.jpg);margin:0 auto;}
#info-topo{width:430px;height:203px;margin-left:570px;text-align:right;padding-top:25px;}
#pesquisa{width:431px;height:46px;}
#pesquisa form{text-align:right;margin-left:20px;margin-top:10px;}
#pesquisa form label img{float:left;margin:2px 0 0 0;padding:0;}
#pesquisa form label input{margin:2px 0 0 0;padding:0;width:290px;height:40px;border:0;float:left;font-family:Verdana, Geneva, sans-serif;font-size:14px;color:#999;}
#pesquisa form label .btn:hover{background:url(../imagens/icon-buscar.png);width:80px;height:44px;border:0;cursor:pointer;margin:0;padding:0;}
#pesquisa form label .btn{background:url(../imagens/icon-buscar-rol.png);width:80px;height:44px;border:0;cursor:pointer;margin:0;padding:0;}
#link-topo{margin-top:10px;}
#info-topo #link-topo a{font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#FFF;text-decoration:none;font-weight:500;}
#info-topo #link-topo a:hover{text-decoration:underline;color:#C5D0E7;}
#saudacao{font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#FFF;margin-top:30px;}
#menu{width:100%;height:44px;background:url(../imagens/bg-normal.jpg);background-repeat:repeat-x;margin:0 auto;padding:0 0 0 0;text-align:left;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:500;}
#content-menu{width:1000px;margin:0 auto;}
#menu ul{padding:0;margin:0;float:left;list-style:none;width:1000px;}
#menu ul li img{float:left;margin-top:2px;}
#menu ul li{display:inline;}
#menu ul li a{float:left;height:30px;margin:2px 0 0 0;padding-top:12px;padding-left:15px;padding-right:15px;text-decoration:none;color:#172C3D;}
#menu ul li a:hover{background:url(../imagens/bg-rollover.jpg);color:#FFF;margin:0;}
#conteudo{background:#FFF;width:980px;height:500px;margin:0 auto;padding:10px;}

 

Agradeço muito a quem ajudar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

MafnGamer    13

MafnGamer
Postado

Cara eu não sei se é o jeito certo mas tenta usar margin top no box até ele grudar no menu. Se de certo avise me

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Vianna /+/    7

Thiago Vianna /+/
Postado

Gambiarra, mas vai funcionar...

 

margin-top: -3px;

 

na div de baixo ;)

 

 

EDIT: Testei seu código aqui, alterando as imagens de fundo por cores sólidas, e não ficou com o espaçamento. Não foi o bg do menu que "acabou" ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Didiron    0

Didiron
Postado

Pessoal muito obrigado, consegui resolver com o margin top negativo. Nem sabia que isso era possível. Infelizmente terá que ser na gambiarra mesmo.

 

Muito Obrigado.

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