min-width en IE6

No Sergi no me refiero al tema de los em's, aquí lo puse con pixeles para una prueba me refería a acotar sólo el min width y que sino sea auto

demsite, no tengo claro si te refieres a cambiar del ejemplo de orange 98em por 50em ...!?!?!? o bien algo más:
clientWidth < 50em

si fuera eso, creo que deberías establecer un tamaño de em (si lo haces bien 1em = 10px, hay un muy buen post de borja a lrespecto en este foro, cuanto vale un em), y trabajar por ahi, de modo que tendrías
clientWidth < 500 ...

¿Algo así no?

<code>width: expression(((document.documentElement.clientWidth &amp;&amp; document.documentElement.clientWidth &lt; 1033) || (document.body.clientWidth &amp;&amp; document.body.clientWidth &lt;1033&gt; 1034) || (document.body.clientWidth &amp;&amp; document.body.clientWidth &gt; 1034)) ? "auto" : "auto" );
</code>

demssite

Vuelvo con dudas de este tema. He estado probando y funciona perfectamente, pero... y si quiero que tenga por ejemplo un ancho mínimo de 50em y que sino el ancho sea auto, es decir si es mayor que eso se adapte al ancho de la página.

Gracias.
Diego

Pues te cargas la parte de condicionales que tienen que ver con el max-width.

Si quieres tener en cuenta los explorer 5 te miras la CSS que hice para ACS. Si no puedes adaptar fácilmente este tutorial (y en lugar de max-width le pones min-with)

http://www.svendtofte.com/code/max_width_in_ie/

Vuelvo con dudas de este tema. He estado probando y funciona perfectamente, pero... y si quiero que tenga por ejemplo un ancho mínimo de 50em y que sino el ancho sea auto, es decir si es mayor que eso se adapte al ancho de la página.

Gracias.
Diego

Funciona perfectamente... ¡Muchas gracias!

Un ejemplo vale más que mil palabras: http://www.grupoacs.com/

CSS general:

#contenedor {
margin: 0 auto;
min-width: 78em;
max-width: 98em;
}

Explorer 6:

#contenedor {
width: 98em; /* Tamaño por defecto - Usuarios sin javascript */
width: expression..................;
}

EDITO: Joder, no sé por qué el foro me jode el código, ni con [code] ni con leches. Aquí tienes un enlace a la CSS específica para Explorer 6, ahí puedes ver bien el codigo http://www.grupoacs.com/estilos/acs_ie6win.css

Ándate con ojo no sea que metas las expresiones en un bucle del tipo "mido menos que esto luego cambio mi medida a esto otro pero si mido esto otro hede cambiar mi medida a lo primero". No sé si me explico.

Gracias por el interés. La verdad es que con lo que puse no se entiende nada. Lo que quiero hacer es:

- Cuando mida más de 96em (960px) el ancho se quede fijo.
- Cuando mida menos de 76em (760px) el ancho se quede fijo y aparezca el scroll

Con
<code>
#contenedor {
background-color: #fff;
margin: 0 auto;
max-width: 96em;
min-width: 76em;
}
</code>

lo consigo en IE7, FF y Opera pero no en IE6. Si no lo he entendido mal, con expression lo podría hacer ¿no?

He puesto &lt;a href="http://www.badmintonhuesca.com/pruebas/index.htm"&gt; un ejemplo&lt;/a&gt; (la linea de expression esta comentada)

Creo que se refiere a poner unidades relativas en vez de absolutas

No entiendo qué quieres decir con que "no te funciona", ¿qué quieres hacer exactamente?

<code>
#elemento{
max-width: 100%;
min-width: 950px;
width: expression((documentElement.clientWidth &lt;950) ? "950px" : "100%" );
}
</code>

Muy interesante, pero no me acaba de funcionar... Tengo

<code>#elemento{
max-width: 96em;
min-width: 76em;
}
</code>

pero si cambio el "100%" por "96em" no funciona. ¿Me puede echar alguien una mano?

Una forma es para explorer 6 y la otra para los 5.x

orange

Y si a alguien le importan los Explorer 5.x

<code>width: expression(((document.documentElement.clientWidth &amp;&amp; document.documentElement.clientWidth &lt; 950) || (document.body.clientWidth &amp;&amp; document.body.clientWidth &lt; 950)) ? "950px" : "auto" );
</code>

Sí importa ;-).
Una duda, no entiendo muy bien las condiciones document.documentElement.clientWidth &amp;&amp; document.documentElement.clientWidth

¿no es lo mismo? ¿por qué se pone 2 veces? y una cosa más esto funciona sin javascript activado?

Bueno, a todo esto, el que tiró la piedra y escondió la mano vuelve a la escena....

No sé porqué no me llegó ninguna notificación al mail de que se había respondido este post y como andaba con más cosas del proyecto no me di cuen hasta que lo leí ahora.

cbp lo de ese mínimo es porque sino se me descojona el diseño. Si disminuyes el temaño de fuente ya es otro tema porque sí que está todo en unidades relativas dependientes de las fuentes, pero no era ese el caso que quería afrontar.

Un saludo

Y si a alguien le importan los Explorer 5.x

<code>width: expression(((document.documentElement.clientWidth &amp;&amp; document.documentElement.clientWidth &lt; 950) || (document.body.clientWidth &amp;&amp; document.body.clientWidth &lt; 950)) ? "950px" : "auto" );
</code>

por si a alguien le interesa dejo la solucion js que se incluye en las CSS.

<code>
#elemento{
max-width: 100%;
min-width: 950px;
width: expression((documentElement.clientWidth &lt;950) ? "950px" : "100%" );
}</code>

polemizar es bueno, mientras no se ponga usted en plan "¿por que no te callas?" :)
todo bien por aqui, ampliando la familia, pim pam pum.

jejeje, pero qué frikis sois :P

pues aquí me tiene, señor zigotica, polemizando con estos señores, que hacía ya tiempo y también lo echaba de menos ¿y usted, todo bien?

ya te digo
¿que es de su vida, le lapin blanc?

Mira que bien, todos de acuerdo. Cuánto echaba yo de menos las disertaciones de la CSSecta :)

Efectivamente, la clave es conseguir un diseño elástico perfecto. Y elástico no es líquido y no necesitas que tu web se vea bien en 200px... Aquí quería yo llegar desde el principio...
;)

justo, y de hecho la clave para hacerlo me la dió Borja hace tiempo, no me acuerdo en qué hilo. llevarlo al extremo para que todo lo que haya en pantalla dependa del tamaño del texto, incluidas las imágenes, los flash, etc.

vamos, que lo que tú estás planteando es el concepto de diseño elástico, un diseño donde las medidas de los elementos están basadas en el tamaño del texto del usuario.

efectivamente, si es eso de lo que trata la cuestión sí, estábamos hablando de cosas diferentes.

de todas formas, si tu ventana sólo tiene 200px, puedes hacer zoom hacia atrás, y si está bien hecha no se descojonará :P

cbp

haz zoom hacia atrás ...

A lo mejor yo no me he enterado, pero creo que en lo que consiste la cuestión no es en hacer zoom hacia atrás, sino en como se adapta esa web si la ventana de mi navegador sólo tienen 200px de ancho. Así que creo que estáis hablando de cosas diferentes.

eh eh eh ¿qué es eso de hacer corta-pega para que parezca que diga otra cosa? :P decía que preguntes porque yo lo he oído de gente que sí sabe que existe, gente con dispacidades que nos lo dijo una vez terminado un proyecto. vamos, que acertamos de coña.

¿que no quepan 2 palabras en 200px? eso depende del tamaño del texto ¿no?

http://cdmc.sqy.es

haz zoom hacia atrás y obvia el problema de parte de la cabecera, que tiene que ver con lo que decía antes de los logos como imágenes de fondo de css en lugar de estar presentes en el código.

cbp

cuando quieras te enseño una página que funciona bien a 200px o a menos si te apetece.

Veámosla... y una vez vista vamos a ver cuantas webs hay por el mundo, que todos convendremos que están bien diseñadas, y que no cabrían ni 2 palabras en 200px.

cbp

pregunta a gente... si ese problema existe

Vamos, que te has tirado a la piscina sin saber siquiera si lo que decías era una enfermedad de verdad o no
:D

a ver, compañero, que el que se está tirando a la piscina eres tú :P

cuando quieras te enseño una página que funciona bien a 200px o a menos si te apetece. hay un problema con las imágenes de fondo, pero para eso hay una funcionalidad que las deshabilita. si lo hiciese ahora de nuevo, de hecho, el problema ni existiría porque he pasado por el aro de "el logo es una imagen en el código". el diseño acompaña, es cierto, y se hizo teniendo en cuenta que pudiese decrecer, pero eso no quita validez al hecho de que si haces todo relativo no tiene por qué cascar.

respecto al segundo punto, el problema es ese, que en los checkpoint no viene porque las WCAG son una mierda en algunas cosas, directamente. pregunta a gente, y creo que tú podrás porque seguramente conozcas, si ese problema existe y si esa es una buena solución para quien lo padece.

Amigo mio me da que te estás tirando a la piscina sin pensártelo demasiado...

cbp

tampoco tiene por qué descojonarse la maquetación si lo haces bien

Métete en cualquier web y dime un diseño que siga cumpliendo sus funciones adecuadamente en 200px de ancho (y que no lo hagan no quiere decir para nada que no estén "bien diseñadas").

El único escenario donde vería esos tamaños "normales" es en dispositivos móviles, y para eso CSS te brinda el tema de CSS's específicas, con lo que podemos abordar diferentes presentaciones para entornos tan dispares.

cbp

y si hablamos de accesibilidad también podemos citar a la gente que tiene un ángulo de visión muy reducido y posiblemente sean incapaces de manejarse con un diseño de 550px de ancho. para ellos resulta muy útil poder hacer todo muy pequeño sin que se desmaquete.

Esto directamente creo que te lo acabas de inventar. No hay ni un checkpoint de accesibilidad que trate nada en este estilo.

Pero vamos, que si haces un diseño elástico la web siempre podrá "decrecer".

tampoco tiene por qué descojonarse la maquetación si lo haces bien, aunque no me atrevo a decir que sea independiente del diseño porque fijo que hay casos en que me tendría que tragar las palabras.

y si hablamos de accesibilidad también podemos citar a la gente que tiene un ángulo de visión muy reducido y posiblemente sean incapaces de manejarse con un diseño de 550px de ancho. para ellos resulta muy útil poder hacer todo muy pequeño sin que se desmaquete.