Posicionamiento de UL (alineacion y desalineacion)

[angelregis]

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.

[Vun]

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

NOTA: Soy muy novato en CSS, pero por dar idea...

[angelregis]

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.

[Vun]

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.

[jomaruro]

Hola:

Iniciado por angelregis

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.

[angelregis]

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.

[angelregis]

Con esta imagen igual se entiende mejor.

[Vun]

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....

[angelregis]

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.

[Vun]

Prueba a añadirle al CSS del <div>

white-space: nowrap;

[angelregis]

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

[Vun]

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