Foros del Web » Creando para Internet » CSS »

Menu con lista horizontal

Estas en el tema de Menu con lista horizontal en el foro de CSS en Foros del Web. Buenas a todos; Estoy intentando hacer un menu horizontal dentro de una capa que se muestra a lo ancho de todo el navegador correctamente, pero ...
  #1 (permalink)  
Antiguo 08/03/2010, 10:09
 
Fecha de Ingreso: marzo-2010
Mensajes: 4
Antigüedad: 7 años, 9 meses
Puntos: 0
Menu con lista horizontal

Buenas a todos;

Estoy intentando hacer un menu horizontal dentro de una capa que se muestra a lo ancho de todo el navegador correctamente, pero cuando cambio el tamaño del navegador la lista me hace saltos de linea y entonces el menu me aparece en dos o tres lineas, alguien podría ayudarme por favor?????
  #2 (permalink)  
Antiguo 08/03/2010, 10:29
 
Fecha de Ingreso: septiembre-2007
Ubicación: Barcelona
Mensajes: 227
Antigüedad: 10 años, 3 meses
Puntos: 12
Respuesta: Menu con lista horizontal

quieres que la lista sale fuera de la capa o que la capa tiene como anchura minima la anchura de la lista?
  #3 (permalink)  
Antiguo 08/03/2010, 10:45
 
Fecha de Ingreso: marzo-2010
Mensajes: 4
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Menu con lista horizontal

La lista se va fuera de la capa cuando cambio el tamaño del navegador
  #4 (permalink)  
Antiguo 08/03/2010, 11:07
 
Fecha de Ingreso: septiembre-2007
Ubicación: Barcelona
Mensajes: 227
Antigüedad: 10 años, 3 meses
Puntos: 12
Respuesta: Menu con lista horizontal

para que no sale en dos lineas, añade al estilo del ul white-space:nowrap;
  #5 (permalink)  
Antiguo 08/03/2010, 11:54
 
Fecha de Ingreso: marzo-2010
Mensajes: 4
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Menu con lista horizontal

Que va así no va, sigue igual y lo peor es que he intentado no se cuantas cosas y no doy con el error, mi código css es el siguiente:

#Capa {
background-color: #CCCCCC;
margin:200px auto;
left:0px;
height:18px;}
li {
list-style-position: inside;
list-style-type: none;
float: left;
display: inline;
padding-left:25px;
}
ul {
white-space:nowrap;}

Y el de HTML:

<body>
<div id="Capa">
<ul>
<li>Inicio</li>
<li>Monumentos</li>
<li>Fiestas</li>
<li>Demografía</li>
</ul>
</div>
</body>
  #6 (permalink)  
Antiguo 08/03/2010, 12:33
 
Fecha de Ingreso: septiembre-2007
Ubicación: Barcelona
Mensajes: 227
Antigüedad: 10 años, 3 meses
Puntos: 12
Respuesta: Menu con lista horizontal

no deberias usar float:left cuando usas display:inline
  #7 (permalink)  
Antiguo 08/03/2010, 14:24
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Menu con lista horizontal

La cuestión es que usas una medida fija para el ancho, cuando el navegador se reduce, no queda mas remedio que ponerse en varias lineas. La solución, poner el ancho en unidades relativas (em).

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #8 (permalink)  
Antiguo 09/03/2010, 04:35
 
Fecha de Ingreso: marzo-2010
Mensajes: 4
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Menu con lista horizontal

Impostor asi me ha servido, muchas gracias tio porque empezaba a desesperar y creo que no se me hubiese ocurrido nunca probar con las unidades en "em".

Etiquetas: horizontal, lista
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 01:07.