No creo,
kseso?. Habría que hacer más pruebas, pero no me parece que ajuste contenido como quiere
elier_rp. Si tienes algún ejemplo completo lo puedes postear, así lo vemos. De todas formas, me parece que ya encontré el CSS que faltaba (lo pongo más abajo).
Con respecto al 'importante problema de diseño',
Mikmoro, no siempre será así. Cuando escribimos código para una página no tenemos ningún control sobre cómo se verá en todos los casos; no sabemos cuántos monitores tiene el usuario, ni sus pulgadas, ni la resolución de pantalla, ni el tamaño de la ventana,ni la eventual fuente de reemplazo, ni qué medidas tiene ésta disponible, ni qué medidas le configuró en el
default, ni a qué tamaño la va a llevar mientras navega ... Se supone que el
browser se va a ajustar solo, pero si no lo hace vamos a tener que inventar algo hasta que lo arreglen.
En la época en que la mayoría usaba PC con
Windows y con
IExplorer las cosas eran más fáciles, porque generalmente se usaban las mismas fuentes que venían en el S.O., y ese navegador no cambiaba sus medidas absolutas. Pero ahora hay que pensar más en los otros.
Es cierto que los ejemplos que puse (y pondré) son extremos, pero escribir "desoxirribonucléico" no puede destartalar una página. El error no puede estar en el diseño.
Hace algún tiempo en un foro buscaban "la palabra más larga", y no es posible que el HTML no nos permita escribir "PENTAKISMYRIOHEXAKISQUILIOTETRACOSIOHEXACONTAPENT AGONALIS".
Iba a poner algo sobre el tema que enlacé más arriba y que ya fue cerrado, pero no vale la pena. Los siguientes ejemplos que recopilé estarían mejor allí, y ahora van acá con tu bendición,
elier_rp.
Hay unos códigos para
Firefox que ayudan a que el contenido de una caja no se "desborde" cuando ésta llega a su límite
Código:
-moz-max-content ; -moz-min-content ; -moz-available ; -moz-fit-content
pero el que pude probar que anda en todos es
float: left;
Un detalle : el foro agrega espacios al código para no desarmar el diseño de los mensajes, y justo en este tema (¡qué ironía!) se necesitan cadenas largas sin corte para hacer la pruebas. Si aparece algún espacio de más, por favor bórrenlo antes de ver el ejemplo. Gracias.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>MIN-WIDTH.</title>
<style type="text/css">
body {color: #ffffff; background-color:#000000; font-size:100%; }
.miDIV {margin:0.2em; font-size:3em; float:left; min-width:80%; color: #000000; background-color:#ffffff; margin:10px; border: 0.1em red solid; }
</style>
</head>
<body>
<h2>Muestra contenido completo ajustando la caja. (Op9.5 / FF3 / IE7)</h2>
<div class="miDIV" title="min-width:80%">>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ<</div>
<div class="miDIV" title="min-width:80%">>0123456789<</div>
</body>
</html> La vieja versión con
expression() para
IE todavía funciona. Acá hay una más.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>min-width PARA IE7.</title>
<style type="text/css">
body {color: #ffffff; background-color: #000000; font-size: 100%; }
.miDIV {font-size: 3em; color: #000000; background-color: #ffffff; margin: 10px; display: inline-block; width: expression(this.firstChild.offsetWidth +'px'); min-width:50%; }
tt {white-space: nowrap; }
</style>
</head>
<body>
<h2>Iguala ancho del <tt>div</tt> y el contenido. (Op9.5 / FF3 / IE7 —con <tt>expression()</tt>—)</h2>
<div title="min-width: 50%;" class=miDIV>
<span>>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz<</span></div>
<div title="min-width: 50%;" class=miDIV><span>>_<</span></div>
</body>
</html> Ésta es otra forma de ajuste con javascript
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><html>
<head>
<title>ESTIRA.</title>
<script type="text/javascript">
var parrafo;
function estira0(){
parrafo = document.getElementById("miDIV0");
texto = "<span>"+ parrafo.innerHTML +"</span>";
parrafo.innerHTML = texto;
setTimeout("estira1()", 100);
}
function estira1(){
var ancho0 = parrafo.firstChild.offsetWidth;
var ancho1 = parrafo.offsetWidth;;
if (ancho0 > ancho1){
parrafo.style.width = ancho0 +"px";
}
}
//onload = estira0;
</script>
<style type="text/css">
body {color: #ffffff; background-color: #000000; font-size: 100%; }
#miDIV0 {font-size: 2em; width: 80%; color: #000080; background-color: #ffffff; border: 0.1em #ff0000 solid; }
tt {font-size: 100%; }
</style>
</head>
<body>
<h2>Iguala ancho del <tt>div</tt> y el contenido con javascript. (Op9.5 / FF3 / IE7)</h2>
<b>Click en el párrafo para ajustar.</b>
<div id="miDIV0" onclick="estira0()"> FRASE_MUY_LARGA_QUE_SIRVE_DE_EJEMPLO_PARA_ESTIRAR_EL_CONTENEDOR_HASTA_QUE_GUARDE_EL_CONTENIDO </div>
</body>
</html> Una versión del anterior
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>DESPLIEGA.</title>
<style type="text/css">
body {color: #ffffff; background-color: #000000; font-size: 100%; }
div.desplegable {font-size:3em; width:80%; color: #000000; background-color: #ffffff; margin: 10px; border: 0.1em #ff0000 solid; overflow: hidden; }
div.desplegable:hover {overflow: visible; }
.miTexto {background-color: #ffffff; }
</style>
</head>
<body>
<h2>Muestra contenido al pasar el puntero. (Op9.5 / FF3 / IE7)</h2>
<b>Para desplazar, click con botón del medio sobre el contenido. (<em>bug</em> en Firefox : <u>no pasar el puntero sobre la marca de <em>all-scroll</em> !</u> )</b>
<div class=desplegable>
<span class=miTexto>>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz<</span>
</div>
</body>
</html> (Continúa en el próximo mensaje ...)