Foros del Web » Creando para Internet » CSS »

Altura de Menu

Estas en el tema de Altura de Menu en el foro de CSS en Foros del Web. Hola que tal. tengo el siguiente Menu en html, Este menu tiene una imagen de fondo de 30 px.. el problema es que sobre la ...
  #1 (permalink)  
Antiguo 10/02/2011, 19:29
Avatar de leo_nqn  
Fecha de Ingreso: abril-2010
Ubicación: Neuquen
Mensajes: 461
Antigüedad: 7 años, 7 meses
Puntos: 24
Altura de Menu

Hola que tal. tengo el siguiente Menu en html, Este menu tiene una imagen de fondo de 30 px.. el problema es que sobre la imagen y debajo de esta me deja un espacio. Osea, el codigo del menu no me respeta la altura del div en el que se encuentra este menu. Les dejo El codigo html y css para que vean. seria ideal que la altura del menu sea la misma que la del div.. espero su respuesta saludos y muchas gracias!

HTML:
Código:
<div id="MenuPrinicipal">
<ul> 
        <li>Botón uno</li>  
        <li>Botón dos</li>  
        <li>Botón tres</li>  
</ul>
CSS:

Código:
#MenuPrinicipal{
	margin:auto;
	position:relative;
	width:960px;
	font:"Centaur";
	font-size:18px;
	/*background-image:url(Imagenes/menu-01.png);  */
}

#MenuPrinicipal ul li {  
        display: inline;  
        padding: 2px 7px;/* Separar el texto*/  
        margin:5px;  /*Separar los botones */
		/*background-color:#E4E4E4;  Color de fondo */  
}  
#MenuPrinicipal ul li:hover {  
        background-color:#FF0000;  /*Color de fondo sobre el boton */  
        cursor: pointer; /* cambiar el aspecto del puntero */  
}  
#MenuPrinicipal ul {  
        /* Linea para delimitar la botonera   
        border-bottom-width: 1px;  
        border-bottom-style: solid;  
        border-bottom-color: #E4E4E4;  */
		background-image:url(Imagenes/menu-01.png);
		height:30px;
}
__________________

Blog: http://leonardonqn.blogspot.com
Twitter:@Leo_FFerreyra
  #2 (permalink)  
Antiguo 10/02/2011, 21:23
Avatar de leo_nqn  
Fecha de Ingreso: abril-2010
Ubicación: Neuquen
Mensajes: 461
Antigüedad: 7 años, 7 meses
Puntos: 24
Respuesta: Altura de Menu

Solucionado : Gracias por las respuestas..

Hice lo siguiente con el codigo HTML:


Código:
<div id="MenuPrinicipal">
 
        <a href="principal.html"><li>Inicio</li></a>  
        <a href="contacto.php"><li>Contacto</li></a>  
        <a href="tratamientos.html"><li>Productos</li></a>
</div>
__________________

Blog: http://leonardonqn.blogspot.com
Twitter:@Leo_FFerreyra
  #3 (permalink)  
Antiguo 10/02/2011, 23:05
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Altura de Menu

La solución que aportas no lo es en absoluto. Una etiqueta <li> sólo puede ir dentro de <ul> o <ol>.
No tiene sentido tener elementos de lista fuera de una lista. Si ya no necesitas la lista, elimina los <li>.

Código HTML:
Ver original
  1. <div id="MenuPrinicipal">
  2.          <a href="principal.html">Inicio</a>  
  3.         <a href="contacto.php">Contacto</a>  
  4.         <a href="tratamientos.html">Productos</a>
  5. </div>

cambiando "#MenuPrincipal ul li" por "#MenuPrincipal a".

Otra alternativa sería mantener la lista. En ese caso te recomiendo usar enlaces dentro de la lista.
Código HTML:
Ver original
  1. <div id="MenuPrinicipal">
  2.   <ul>
  3.         <li><a href="principal.html">Inicio</a></li>  
  4.         <li><a href="contacto.php">Contacto</a></li>  
  5.         <li><a href="tratamientos.html">Productos</a></li>
  6.   <ul>
  7. </div>

El problema que tenías con la altura lo podías corregir modificando el padding y el margin.
En caso necesario puedes usar la propiedad height de la siguiente forma:

Código CSS:
Ver original
  1. #MenuPrinicipal ul li {  
  2.         display: inline-block; /*En lugar de inline */
  3.         padding: 2px 7px;/* Separar el texto*/  
  4.         margin:0 5px;  /*Separar los botones */ /* Eliminamos el margen superior e inferior*/
  5.         height: 24px; /* 30px de alto - 2px de padding arriba y abajo - 1px de borde de ul arriba y abajo*/
  6. }
  7. #MenuPrincipal ul{ margin:0; padding:0 }

Etiquetas: altura
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:55.