Foros del Web » Creando para Internet » CSS »

Problemas con menu horizontal hecho con display:inside

Estas en el tema de Problemas con menu horizontal hecho con display:inside en el foro de CSS en Foros del Web. Tengo un problemita con un menu que estoy intentando que quede horizontal. Lo he probado con una lista y luego (actualmente) con div. El problema ...
  #1 (permalink)  
Antiguo 10/03/2008, 14:06
 
Fecha de Ingreso: diciembre-2007
Mensajes: 17
Antigüedad: 16 años, 11 meses
Puntos: 0
Problemas con menu horizontal hecho con display:inside

Tengo un problemita con un menu que estoy intentando que quede horizontal.
Lo he probado con una lista y luego (actualmente) con div.
El problema se presenta cuando indico, mediante display:inside, que quiero que no haya saltos de linea entre un div y otro (o entre un li y otro al principio).
En este caso no puedo indicar width y height para el div (o para el li) porque pasa de ellos. Si le pongo display:block va perfecto. Estoy utilizando una imagen de fondo y cuando el display es block, acepta el tamaño y la imagen se ve correctamente, cuando el display es inside solo veo un trocito de la imagen de fondo.

Aqui os pongo el código, tanto de las hojas de estilo como del html:

#menu{
width:670px;
height:50px;
}
.xx{
width:175px;
height:40px;
padding-left:40px;
background-image:url(imagenes/m1.jpg);
background-repeat:none;
display:inside;
}
--------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3c.org/1999/xhtml\" xml:lang="es" lang="es">

<head>

<title></title>



<link rel="stylesheet" type="text/css" href="nautica.css" />

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />



</head>

<body>



<div id="menu">



<div class="xx">Inicio</div>

<div class="xx">Ventas</div>

<div class="xx">Alquiler</div>

<div class="xx">Excursiones</div>

<div class="xx">Contacta</div>



</div>



</body>

</html>

----------------------------------------------------------------------------

Desde ya gracias por la ayuda.
  #2 (permalink)  
Antiguo 10/03/2008, 14:20
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años, 8 meses
Puntos: 36
Re: Problemas con menu horizontal hecho con display:inside

¿No es display: inline? Y lo del background, mide bien las medidas de tu fondo y luego las pones exactamente igual en .xx.
  #3 (permalink)  
Antiguo 10/03/2008, 14:38
 
Fecha de Ingreso: diciembre-2007
Mensajes: 17
Antigüedad: 16 años, 11 meses
Puntos: 0
Re: Problemas con menu horizontal hecho con display:inside

Perdón ... se me coló .... debería decir inline si señor. Las medidas son las correctas. Y aún así veo solo parte del fondo del botón.
  #4 (permalink)  
Antiguo 10/03/2008, 16:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 1 mes
Puntos: 280
Re: Problemas con menu horizontal hecho con display:inside

Hola, Caribeanpirate.

Tal y como lo estás haciendo, creo que se puede solucionar cambiando tu regla padding-left:40px; por padding: 10px 0px 10px 40px;, o la medida de relleno de arriba y abajo que tú necesites (10px y 10px en el ejemplo).

No obstante, no estoy seguro de que sea la mejor manera de hacerlo.
Mikel.
  #5 (permalink)  
Antiguo 11/03/2008, 05:35
 
Fecha de Ingreso: diciembre-2007
Mensajes: 17
Antigüedad: 16 años, 11 meses
Puntos: 0
Re: Problemas con menu horizontal hecho con display:inside

Hola Mikmoro.

Parece que algo se arregla con tu sugerencia. De todas maneras, ademas de ajustar el padding, para que la distancia entre un botón y otro sea la misma he tenido que utilizar un tipo de letra monoespacio y agregar &nbsp; para que todos los textos tuvieran la misma cantidad de caracteres. Haciéndolo así va quedando bien. Lo estoy probando en Firefox bajo Ubuntu. Si lo pruebo en Windows con IE y Forefox y va bien daré por cerrada la consulta. Mas tarde os cuento que tal va.

Gracias
  #6 (permalink)  
Antiguo 11/03/2008, 08:44
 
Fecha de Ingreso: diciembre-2007
Mensajes: 17
Antigüedad: 16 años, 11 meses
Puntos: 0
Re: Problemas con menu horizontal hecho con display:inside

Bien. En IE7 (no he podido probarlo en IE6) no hay problemas en cuanto al ancho pero si que lo hay en la altura. Solo veo el la imagen de fondo detrás del texto. Por encima y por debajo no ha cogido el padding.
Os vuelvo a poner el código tal como va quedando:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3c.org/1999/xhtml\" xml:lang="es" lang="es">

<head>

<title></title>



<link rel="stylesheet" type="text/css" href="nautica.css" />

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />



</head>

<body>



<div id="menu">



<div class="xx">Inicio&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

<div class="xx">Ventas&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

<div class="xx">Alquiler&nbsp;&nbsp;&nbsp;</div>

<div class="xx">Excursiones</div>

<div class="xx">Contacta&nbsp;&nbsp;&nbsp;</div>



</div>



</body>

</html>

----------------------------------------------------------------------------------------------------

#menu{
width:970px;
height:50px;
}
.xx{
font-family:courier;
font-size:.8em;
width:163px;
height:44px;
padding: 10px 25px 10px 50px;
background-image:url(imagenes/m1.jpg);
background-repeat:no-repeat;
display:inline;
}
--------------------------------------------------------------------------------

A ver si alguien encuentra el problema y la solución
  #7 (permalink)  
Antiguo 11/03/2008, 13:36
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años, 8 meses
Puntos: 36
Re: Problemas con menu horizontal hecho con display:inside

Sí, la he encontrado... algo bastante elemental... había que poner float: left en el .xx y quitar el display: inline. Sustitúyelo y verás como va (lo he probado, si no va, me vuelvo loco ).
  #8 (permalink)  
Antiguo 12/03/2008, 08:30
 
Fecha de Ingreso: diciembre-2007
Mensajes: 17
Antigüedad: 16 años, 11 meses
Puntos: 0
Re: Problemas con menu horizontal hecho con display:inside

Perfecto. Caso cerrado. Aunque me encantaría ver una explicación del por qué ha sucedido esto. Mas que nada porque así es como se entienden mejor las cosas y no es solo aplicar una solución puntual a un problema puntual.

Muchas gracias Raulmmmm.
  #9 (permalink)  
Antiguo 12/03/2008, 08:41
 
Fecha de Ingreso: septiembre-2007
Mensajes: 184
Antigüedad: 17 años, 2 meses
Puntos: 4
Re: Problemas con menu horizontal hecho con display:inside

Si colocas la propiedad display: inline; el elemento adquiere la visualizacion de un elemento en linea como si fuera texto normal, y los elementos en linea no pueden variar su altura (height) ajustandose el background al contenido.
Por eso para hacer menus horizontales es bueno que los elementos tengan display: block; asi se pueden ajustar alturas y otras propiedades.
El problema es que los elementos que se visualizan en bloque (block), no fluyen como los elementos en linea sino que por defecto van unos encima de otros en vertical.
Por lo tanto se aplica float a cada elemento para que se "suban" y se queden colocados en horizontal. Por otra parte a todo elemento que se le aplique un float automaticamente se le aplica un comportamiento display: block y aunque pongas directamente en el codigo display:inline; seguira teniendo un comportamiento block ya que todos los elementos flotados son block por huevos.
  #10 (permalink)  
Antiguo 12/03/2008, 11:36
 
Fecha de Ingreso: diciembre-2007
Mensajes: 17
Antigüedad: 16 años, 11 meses
Puntos: 0
Re: Problemas con menu horizontal hecho con display:inside

feral: muchas gracias por la explicación. Me ha quedado muy claro el tema.

Hasta la próxima.
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 03:19.