hola el problema q tengo es el siguiente, necesito poner una imagen debajo del menu, y por alguna razon me queda un espacio en blanco entre las imagenes. probe todo lo que pude y nada funciona.
no encuentr ningun margin o padding que este molestando ni nada... aca les dejo una foto, la franja negra es la imagen de la q hablo, y tendria q ir pegada al menu en ves de tener ese espacio en blanco
y aca les dejo el codigo
lo que esta marcado en rojo es la imagen que me queda mal posicionada
lo primero es el codigo del menu, y lo segundo es el css del menu
Código:
<div id="menu" align="center"><ul>
<li><img src="images/menu-left.png" alt="" style="margin:0px; padding:0px" /></li>
<li class="nivel1"><a href="index.html" onmouseover="act('one')" onmouseout="inact('one')" class="nivel1"><img src="images/home.jpg" name="one" border="0" alt="" /></a>
</li>
<li class="nivel1"><a href="#" class="nivel1" onmouseover="act('two');act2('two')" onmouseout="inact('two')"><img src="images/musica.jpg" name="two" border="0" alt=""/></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul class="dos">
<li><a href="#" class="nivel1" onmouseover="act('two')" onmouseout="inact('two')"><img src="images/musica-1.png" alt=""/></a></li>
<li><a href="#" class="nivel1" onmouseover="act('two')" onmouseout="inact('two')"><img src="images/musica-2.png" alt=""/></a></li>
<li><a href="#" class="nivel1" onmouseover="act('two')" onmouseout="inact('two')"><img src="images/musica-3.png" alt=""/></a></li>
<li><a href="#" class="nivel1" onmouseover="act('two')" onmouseout="inact('two')"><img src="images/musica-4.png" alt=""/></a></li>
<li><a href="#" class="nivel1" onmouseover="act('two')" onmouseout="inact('two')"><img src="images/musica-5.png" alt=""/></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine.jpg" name="three" border="0" alt=""/></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul class="tres">
<li><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine-1.png" alt=""/></a></li>
<li><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine-2.png" alt=""/></a></li>
<li><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine-3.png" alt=""/></a></li>
<li><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine-4.png" alt=""/></a></li>
<li><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine-5.png" alt=""/></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1" onmouseover="act('four')" onmouseout="inact('four')"><img src="images/moda.jpg" name="four" border="0" alt=""/></a>
</li>
<li class="nivel1"><a href="#" class="nivel1" onmouseover="act('five')" onmouseout="inact('five')"><img src="images/arte.jpg" name="five" border="0" alt=""/></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul class="cinco">
<li><a href="#" class="nivel1" onmouseover="act('five')" onmouseout="inact('five')"><img src="images/arte-1.png" alt=""/></a></li>
<li><a href="#" class="nivel1" onmouseover="act('five')" onmouseout="inact('five')"><img src="images/arte-2.png" alt=""/></a></li>
<li><a href="#" class="nivel1" onmouseover="act('five')" onmouseout="inact('five')"><img src="images/arte-3.png" alt=""/></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1" onmouseover="act('six')" onmouseout="inact('six')"><img src="images/galeria.jpg" name="six" border="0" alt=""/></a>
</li>
<li class="nivel1"><a href="#" class="nivel1" onmouseover="act('seven')" onmouseout="inact('seven')"><img src="images/foro.jpg" name="seven" border="0" alt=""/></a>
</li>
<li class="nivel1"><a href="#" class="nivel1" onmouseover="act('eight')" onmouseout="inact('eight')"><img src="images/contacto.jpg" name="eight" border="0" alt=""/></a>
</li>
<li><img src="images/menu-right.jpg" alt="" style="padding-left:1px; padding-bottom:0px; margin-bottom:0px"/></li><li><img src="images/submenu-home.jpg" style="margin-top:0px" alt=""/><img src="images/flags.jpg" alt="" usemap="#flags" border="0"/>
</li>
</ul>
</div>
Código:
* { margin: 0px;
padding: 0px; outline: 0;
}
#menu {
width: 100%px;
position: relative;
margin-bottom:0px;
}
#menu ul {
list-style-type: none;
}
#menu ul li.nivel1 {
float: left;
width: 111px;
position: relative;
}
#menu ul li {
float: left;
}
#menu ul li a {
background-image:url(images/submenu-bg.png);
display: block;
text-decoration: none;
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
color: #000;
position: relative;
}
#menu ul li a.nivel1 {
display: block!important;
display: none;
}
#menu ul li ul {
display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
display: block;
position: absolute;
width: 816px;
}
#menu ul li ul li a {
width: auto;
}
#menu ul li ul li a:hover {
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul.uno {left: -32px;}
ul.dos {left: -143px;}
ul.tres {left: -255px;}
ul.cuatro {left: -32px;}
ul.cinco {left: -146px;}