Espaço misterioso entre as Divs

[Juliano.net 2]

Galera, estou fazendo um código de menu com submenu horizontal, mas na hora da exibição, a div do menu fica com um espaço de uma linha em relação à div do submenu.

 

 

 

Aqui vai o código:

 

 

 

HTML

 

<div id="ContainerMenu">		<div id="BarraMenu">		 <ul>		  <li class="MenuAtivo"><a href="#">PROCESSO</a></li>		  <li><a href="~/producao/default.aspx" runat="server">PRODUÇÃO</a></li>		  <li><a href="#">METALURGIA</a></li>		  <li><a href="#">EQUIPAMENTO</a></li>		  <li><a href="#">RELATÓRIO</a></li>		  <li><a href="#">CONFIGURAÇÃO</a></li>		  <li><a href="#">LOGOUT</a></li>		 </ul>		</div>		<div id="BarraSubmenu">		 <ul id="SubmenuProcesso">		  <li><a href="~/processo/acompanhamento_corrida.aspx" runat="server">ACOMPANHAMENTO CORRIDA</a></li>		  <li><a href="~/processo/acompanhamento_tratamento.aspx" runat="server">ACOMPANHAMENTO DE TRATAMENTO</a></li>		  <li><a runat="server" href="~/processo/entrada_dados.aspx">ENTRADA DE DADOS</a></li>		  <li><a runat="server" href="~/processo/placas.aspx">PLACAS</a></li>		  <li><a runat="server" href="~/processo/padrao.aspx">PADRÃO</a></li>		  <li><a runat="server" href="~/processo/sip.aspx">SIP</a></li>		 </ul>		 <ul id="SubmenuMetalurgia" class="SubmenuInvisivel">		  <li><a runat="server" href="~/metalurgia/pratica_lingotamento.aspx">PRÁTICA LINGOTAMENTO</a></li>		  <li><a runat="server" href="~/metalurgia/programa_veio.aspx">PROGRAMA VEIO</a></li>		  <li><a runat="server" href="~/metalurgia/programa_geral.aspx">PROGRAMA GERAL</a></li>		  <li><a runat="server" href="~/metalurgia/programa_tratamento.aspx">PROGRAMA TRATAMENTO</a></li>		  <li><a runat="server" href="~/metalurgia/cadastro_aco.aspx">CADASTRO DE AÇO</a></li>		  <li><a runat="server" href="~/metalurgia/instrucao_operador.aspx">INSTRUÇÃO OPERADOR</a></li>		  <li><a runat="server" href="~/metalurgia/programa_agitador.aspx">PROGRAMA AGITADOR</a></li>		 </ul>		 <ul id="SubmenuEquipamento" class="SubmenuInvisivel">		  <li><a runat="server" href="~/equipamento/gerenciamento_cadastro.aspx">GERENCIAMENTO CADASTRO</a></li>		  <li><a runat="server" href="~/equipamento/historico_acao.aspx">HISTÓRICO DE AÇÃO</a></li>		 </ul>		 <ul id="SubmenuConfiguracoes" class="SubmenuInvisivel">		  <li><a runat="server" href="~/configuracao/atributos.aspx">ATRIBUTOS</a></li>		  <li><a runat="server" href="~/configuracao/GruposDadosConstantes.aspx">GRUPOS DE DADOS / CONSTANTES</a></li>		  <li><a runat="server" href="~/configuracao/LimitesValores.aspx">LIMITES / VALORES</a></li>		 </ul>		</div>	   </div>

 

 

CSS

 

#ContainerMenu ul{ list-style: none;}#BarraMenu{ background-image: url(/n2_lc1/images/MenuPrincipal.jpg); background-repeat: repeat-x; border-top: solid 1px #b7b482; border-right: solid 1px #b7b482; border-left: solid 1px #b7b482;}#BarraMenu ul{ list-style: none; height: 1%; display: table;}#BarraMenu ul li { float: left; margin: 0 4px;}#BarraMenu ul li a { 	display: block; 	float: left; 	padding: 5px 12px; 	font-weight: bold; 	font-family: Verdana, Arial;	font-size: small;	text-decoration: none;	color: Black;}#BarraSubmenu{ background-color: #e6e6da; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}#BarraSubmenu ul { height: 1%; display: table; list-style: none;}#BarraSubmenu ul li { float: left; margin: 0px 4px; } #BarraSubmenu li a { 	display: block; 	float: left; 	padding: 5px 12px; 	font-weight: bold; 	font-family: Verdana, Arial;	font-size: small;	text-decoration: none;	color: Black;}

 

 

 

 

Alguém sabe o que está errado?

[Guilherme Rambo 4]

Pareço ateh chato, pq sempre mando por isso:

* {margin:0;padding:0;}

[RoXbY 3]

acho que também pode ser isso:#BarraSubmenu{background-color: #e6e6da;padding: 0px 0px 0px 0px; isso pode ser substituido por isso: padding:0px;margin: 0px 0px 0px 0px; isso tbm, apenas um 0px;}mas tenta colocar:margin:0pxe tbm margin-left:-1px;não lembro ao certo, mas fiz algo parecido, provavelmente não seja em uma margin e sim em uma variável de largura, não tenho certeza. da uma olhada.

[Juliano.net 2]

Valeu galera...Inside, o asterisco indica que vai aplicar as propriedades a todos elementos?

[Giovani 104]

o asterisco indica que vai aplicar as propriedades a todos elementos?

Exatamente isso! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Juliano.net 2]

Ah, mais uma coisa...

Quanto a pessoa clicar em um dos itens do menu, ele ficará com background diferenciado. Isso eu já fiz. Mas eu queria poder colocar uma linha separando o menu do submenu.

 

Eu poderia colocar uma borda nas DIVs do menu e submenu, mas próximo ao item que recebeu o clique eu quero que fique parecendo que são o mesmo. Vou explicar melhor.

 

Se vocês olharem bem, verão que o menu Processo tem um degradê invertido do restante da barra, assim ele fica combinando com a barra de submenu. Mas se eu colocar borda em toda div do menu, vai ficar com um corte e não parecerá que o submenu está relacionado com o menu ativo.

 

Tentei colocando border-bottom em cada <LI> do menu, mas eles ficam com espaços entre si e não preenchem toda a barra do menu.

 

O que sugerem?

 

A imagem é esta:

[Giovani 104]

Naquele link que te passei sobre o menu em abas não tem isso?

[Juliano.net 2]

O do link que você me passou não tem essa borda que estou falando...

 

 

 

saca só: http://www.brunodulcetti.com/artigos/menu_abas_sem/

[Giovani 104]

Olha só esse link!

 

[]'s

 

tag pesquisada: abas