Hola maira. ¿Otra vez al ataque, eh? ;)
On 1/25/06, maira [EMAIL PROTECTED] wrote:
Hola.
Estoy trabajando en una estructura jello
Estoy intentando hacer un listado de productos. 4 de los items llevan
una imagen, para resaltarlos y el resto no.
Pueden ver una captura de lo que hablo en
http://www.vykus.com.ar/listas.gif
El problema es que no logro que la lista de mas noticias quede
correctamente alineada a la derecha de las 4 imagenes en 1024*x768
y luego este por debajo de ellas si uno achica un poco el navegador (ver
imagen) ocupando el 100% del ancho.
El css para el efecto de las imagenes es: (...)
Hace poco te respondí un post, algo tarde, en el que te recomendaba
encarecidamente la lectura de esta página en especial, la del Jello Layout
Expo [1] en la que se explica el simulacro de 'min-width' desde el punto de
vista más simple, así como el Jello (que es algo derivado, pero NO lo
mismo). Supongo que no habrás leido aún el post.
Sea como fuere, vamos a llegar al resultado que deseas en este post, a ver
si los hados nos son favorables (por que lo que es yo me explico bastante
mal) y terminas comprendiendo claramente el funcionamiento de la técnica
para que puedas aplicarlo a todos los Layout que desees. Pongo las palabras
y propiedades más relevantes en mayúsculas para facilitar la comprensión,
espero que no sean muy molestas para la lectura.
Si atendemos a la página cuyo enlace te acabo de facilitar un poco más
arriba, comprobamos que nos dice claramente que la manera directa de hacer
que un elemento tenga una anchura mínima (simplificando) sin necesidad de
utilizar la propiedad MIN-HEIGHT es mediante el uso de MÁRGENES NEGATIVOS.
Esto quiere decir que, si a cualquier elemento le establecemos, por ejemplo,
márgenes negativos por valor de 500px; este elemento nunca podrá ser más
estrecho de estos 500px [0 de ancho + 500 = 500]. Es decir, que si tenemos
un DIV en el código con MARGIN-LEFT (o right, al gusto) de -500px y WIDTH de
0, este DIV nunca será más estrecho de 500px. Aquí ya tendríamos la solución
(ejem) a tu problema (ya veremos que se complica algo para IE)
Si sumamos los anchos, del contenedor con las imágenes de los productos, más
sus márgenes, paddings y border(s) nos da un valor de (145*4=580), que sería
el margen negativo a aplicar para que ese contenedor tuviera siempre mínimo
esa anchura y así no se 'partiera' en resoluciones menore. Es decir, que con
poner #THUMBS UL { MARGIN-LEFT: -580px; } ya lo tendríamos solucionado a
priori. Ahora, para facilitar los procesos de centrado y esas cosas, en vez
de aplicar el margen únicamente a un lado podríamos dividirlo entre dos
(580/2=290) y aplicar en su lugar la mitad del margen a cada uno de los
lados quedándonos algo así: #THUMBS UL { MARGIN-LEFT: -290px; MARGIN-RIGHT:
-290px; }.
Esto observarás que tiene un problemilla y es que, según donde esté alineado
(y que propiedades estén en juego en cada uno de los contenedores, padre e
hijo) puede desaparecer un trozo de contenedor porque se sale del contenedor
padre. Para evitar esto le tendremos que indicar al CONTENEDOR PADRE
(#thumbs) del CONTENEDOR CON MIN-WIDTH SIMULADO (#thumbs ul) que reserve
este espacio dentro de sí. ¿Y cómo? Pues de la manera más sencilla, con un
PADDING lateral. Así que aplicamos estas propiedades: #THUMBS {
PADDING-LEFT: 290px; PADDING-RIGHT: 290px; } y solucionado.
Resumiendo:
-
#thumbs { padding: 0 290px; }
#thumbs ul { margin: 0 -290px; }
-
Bueno, y hasta aquí lo que funciona en todos los navegadores. Ahora paso a
explicar las particularidades de nuestro amigo IE.
En primer lugar, para que interprete bien los márgenes negativos de un
elemento, tendremos que posicionarle relativamente. POSITION: RELATIVE.
En segundo lugar, por extraños acuerdos con los arcanos mayores del tarot,
IE no va a expandir un contenedor más allá de su ancho a no ser que esté
contenido en otro contenedor con un ancho especificado. Esto es un poco
jodienda porque nos va a obligar a meter un contenedor entre medias del
PADRE y el de MIN-WIDTH SIMULADO y ponerle un WIDTH. De todas maneras, es un
mal menor.
Por último, y como ya sabemos de otras ocasiones, IE no trabaja bien con
elementos flotados contenidos en elementos sin 'hasLayout' . Y como seguimos
sabiendo, para que un elemento tenga 'hasLayout' es suficiente con darle un
WIDHT o un HEIGHT especifico, entre otras propiedades.
Este podría ser el código HTML como quedaría (más o menos) tras endosarle un
bloque intermedio (le llamaremos SIZER para que concuerde con el nombre que
le ponen en 'positoniseverything' y puedas relacionarlo. Aquí solo te
explico como establecer el ancho del UL de #THUMBS. Para .MORE tendrás que
repetir el proceso (que ya habrás aprendido) con otros parámetros similares
(el contenedor intermedio lo puedes seguir llamando 'sizer')
div id=thumbs
div class=sizer
ul
li.../li
/ul
/div
/div
...
El código CSS aún necesita un par de retoques para
