Foros del Web » Creando para Internet » CSS »

Posicionamiento de UL (alineacion y desalineacion)

Estas en el tema de Posicionamiento de UL (alineacion y desalineacion) en el foro de CSS en Foros del Web. Si alguien puede ayudarme mi problema es que con el explorador maximizado se alinea el menu ul que muestro en la imagen izquierda adjunta que ...
  #1 (permalink)  
Antiguo 26/07/2010, 13:38
 
Fecha de Ingreso: julio-2010
Mensajes: 6
Antigüedad: 7 años, 4 meses
Puntos: 0
Posicionamiento de UL (alineacion y desalineacion)



Si alguien puede ayudarme mi problema es que con el explorador maximizado se alinea el menu ul que muestro en la imagen izquierda adjunta que tiene como propiedades de css las siguientes:

.enlace1 li {
float: left;
width: 33%;
list-style-type: none;
text-align: left;
}

.enlace1 li a {
border: 2px solid #ff9900;
padding: 2em;
font-variant: normal;
font-size-adjust: none;
text-decoration: none;
font-weight: bold;
display: block;
background: url(Imagenes/degradado1.png) repeat-x 0px 0px;
background-color: #cccccc;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
text-align: center;
font-size: 16px;
font-family: Verdana,Arial,Helvetica,sans-serif;
line-height: 20px;
color: #333333;
font-style: normal;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;


Pero cuando se estrecha la ventana se desalinean y aparecen una o dos lineas por espacio chocando con la espansion de las anteriores, imagen derecha.

Le puedo añadir algo para corregir este posicionamiento y que se mantengan de 3 en tres <li> como dice el css width: 33%;

Espero sus respuestas.
  #2 (permalink)  
Antiguo 26/07/2010, 13:42
Avatar de Vun
Vun
Colaborador
 
Fecha de Ingreso: agosto-2009
Ubicación: Benalmádena, España
Mensajes: 2.265
Antigüedad: 8 años, 4 meses
Puntos: 150
Respuesta: Posicionamiento de UL (alineacion y desalineacion)

Prueba a meterlo todo dentro de un <div> de ancho fijo en pixels.

NOTA: Soy muy novato en CSS, pero por dar idea...
  #3 (permalink)  
Antiguo 26/07/2010, 14:29
 
Fecha de Ingreso: julio-2010
Mensajes: 6
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Posicionamiento de UL (alineacion y desalineacion)

No; precisamente lo que quiero es darle flexibilidad poniendo cada li con un 30% para que siempre aparezcan 3 enlaces por fila sea cual sea el tamaño de la ventana y si fijo el tamaño perderia esa flexibilidad.
  #4 (permalink)  
Antiguo 26/07/2010, 14:31
Avatar de Vun
Vun
Colaborador
 
Fecha de Ingreso: agosto-2009
Ubicación: Benalmádena, España
Mensajes: 2.265
Antigüedad: 8 años, 4 meses
Puntos: 150
Respuesta: Posicionamiento de UL (alineacion y desalineacion)

Mmmmmm no se si ya esta en desuso pero prueba a meter cada fila en un <nobr> ........ </nobr> para forzar que no haga saltos de linea.
  #5 (permalink)  
Antiguo 26/07/2010, 15:30
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Posicionamiento de UL (alineacion y desalineacion)

Hola:

Cita:
Iniciado por angelregis Ver Mensaje
No; precisamente lo que quiero es darle flexibilidad poniendo cada li con un 30% para que siempre aparezcan 3 enlaces por fila sea cual sea el tamaño de la ventana y si fijo el tamaño perderia esa flexibilidad.
No entiendo nada, no quieres darle un ancho fijo sino que lo quieres flexible y a la vez que no se te descoloquen los textos. Es como la pescadilla que se muerde la cola.

Si te fijas el ancho de los distintos li (en la imagen de la derecha) es igual con lo cual se cumple el requisito que quieres es flexible, pero ¿como afecta al texto? simplemente se descoloca todo, la solución es o la que ya te han indicado de darle un ancho fijo al div contenedor o utilizar min-width para que tenga un ancho mínimo fijo a partir del cual los elementos no se descoloquen.

Saludos.

  #6 (permalink)  
Antiguo 26/07/2010, 15:58
 
Fecha de Ingreso: julio-2010
Mensajes: 6
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Posicionamiento de UL (alineacion y desalineacion)

Los textos no me importa que se descoloquen pero el contenedor de los textos no.
Lo que quiero conseguir es que las <li> , al tener float left, se alineen de 3 en tres independientemente del alto del texto . Es decir que GUIA DE OCIO (Foto derecha) caiga debajo de CINE y no choque con CINE(Guia del ocio) que sufre un estiramiento vertical al contraer la ventana.
  #7 (permalink)  
Antiguo 26/07/2010, 16:38
 
Fecha de Ingreso: julio-2010
Mensajes: 6
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Posicionamiento de UL (alineacion y desalineacion)

Con esta imagen igual se entiende mejor.

  #8 (permalink)  
Antiguo 26/07/2010, 16:49
Avatar de Vun
Vun
Colaborador
 
Fecha de Ingreso: agosto-2009
Ubicación: Benalmádena, España
Mensajes: 2.265
Antigüedad: 8 años, 4 meses
Puntos: 150
Respuesta: Posicionamiento de UL (alineacion y desalineacion)

Parece que tu problema es que la altura del texto dentro de cada <li> te fastidia todo. No se que propiedad habra en css para forzar una altura fija siempre, o prueba a meter cada texto en <nobr>texto</nobr> aunque como te digo creo que esto es un poco obsoleto....
  #9 (permalink)  
Antiguo 27/07/2010, 13:18
 
Fecha de Ingreso: julio-2010
Mensajes: 6
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Posicionamiento de UL (alineacion y desalineacion)



Pues si que funciona con <nobr> pero da un error al validar el HTML

Line 301, Column 50: element "NOBR" undefined

<li><a href="http://www.guiadelocio.com/"><nobr>GUIA OCIO</nobr></a></li>



You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

* incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
* by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).



Gracias a todos por responder.
  #10 (permalink)  
Antiguo 27/07/2010, 13:51
Avatar de Vun
Vun
Colaborador
 
Fecha de Ingreso: agosto-2009
Ubicación: Benalmádena, España
Mensajes: 2.265
Antigüedad: 8 años, 4 meses
Puntos: 150
Respuesta: Posicionamiento de UL (alineacion y desalineacion)

Prueba a añadirle al CSS del <div>

white-space: nowrap;
  #11 (permalink)  
Antiguo 27/07/2010, 14:14
 
Fecha de Ingreso: julio-2010
Mensajes: 6
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Posicionamiento de UL (alineacion y desalineacion)

Si señor tu si que sabes vun eres bueno ahora si que queda curioso y sin errores

This document was successfully checked as HTML 4.01 Transitional!
Result: Passed

Saludos
  #12 (permalink)  
Antiguo 27/07/2010, 14:51
Avatar de Vun
Vun
Colaborador
 
Fecha de Ingreso: agosto-2009
Ubicación: Benalmádena, España
Mensajes: 2.265
Antigüedad: 8 años, 4 meses
Puntos: 150
Respuesta: Posicionamiento de UL (alineacion y desalineacion)

Yo casi ni idea de CSS, se lo justito, pero se me da bien buscar en google :Þ

Etiquetas: alineacion, posicionamiento
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 13:47.