Ver Mensaje Individual
  #12 (permalink)  
Antiguo 20/10/2008, 17:26
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: texto que sobrepasa div

Cita:
Iniciado por Mikmoro
...ah, y cuando encuentres una solución definitiva con CSS, te presentaré a una persona que navega sin CSS. ...
Muy gracioso, Mikmoro. Recuerdo haber comentado con kemie ( Hola!) que yo miraba las páginas sin CSS, pero ya no me acuerdo de cuándo te lo mencioné a ti. Pero como los baches de memoria a mi edad son muy comunes, no pienso hacerme problemas por ese detalle. Lo que sí digamos es que eso a nosotros nos sirve para ver la estructura de la página, quitamos la hoja de estilos con fines de estudio. La gente normal no lo hace y navega con CSS habilitado.

En realidad volví para actualizar un ejemplo, pero si no menciono tu mensaje anterior va a parecer que te estoy ignorando, y no es mi intención. No voy a detenerme punto por punto, porque la mayoría de tus dudas ya estaban aclaradas y bastaría con un "Lege, quaeso." al comienzo del mensaje. Voy a mencionar algunas a modo de resumen.

No sé si dividir una palabra en cualquier parte es lo que se dice 'irreal', aunque sí se ve bastante extraño; es lo primero que le expliqué a elier_rp. Y sí, entendiste la consulta original : le mostré un ejemplo CSS, otro HTML y una versión JS; supongo que le habrán servido porque hasta ahora no volvió. Ahí se terminó el asunto y pasamos al siguiente, que entonces sí es estirar las cajas. Es lo que se debe hacer en lugar de 'cortar palabras'.

Lo de la accesibilidad es justamente lo que estaba explicando : no podemos cubrir todas las posibilidades. Por supuesto, si alguien lo logra será un gran diseñador; pero si las capas se le enciman es un inútil.
Lo lógico es que si vemos una página (p.e.) en menor resolución, el tamaño se agrande y debamos usar —digamos— barras de desplazamiento para ver lo que no cabe. Si un bloque con la lista de baners 'flota' a la derecha y al redimensionar la ventana ya no tiene espacio, seguramente terminará al final del documento. Es absolutamente cierto que el navegante "se encontrará con cosas que verá de forma diferente a como estaban pensadas (por el diseñador)". Lo que nunca puede ocurrir es que el contenido se pierda, y que ya no lo encuentre "ni diferente".

Como dije, los ejemplos estarían mejor en el otro tema (¿lo leíste?), pero me lo cerraron porque siempre aparece alguien que no se aguanta el complejo de genio y quiere resolver lo que ya está resuelto o superado. De todas formas, y ya que están aquí, los aproveché para demostrar claramente qué pasa cuando el contenido se desborda. En el primer ejemplo usé texto azul derrapado sobre un fondo negro. Es evidente para cualquiera que si el texto hubiese sido negro, no se podría ver. Igual, en los siguientes ejemplos ya lo puse en negro, por si aparecía algún despistado. También podría haber usado una imagen de fondo para mostrar cómo las letras se mezclaban con partes oscuras del diseño, o poner más capas para que el desborde se solapara con los demás contenidos. Pero ya hubiera sido tratar a nuestra comunidad de idiota, y se me iban a ofender con justa razón. Con estos ejemplos quedó más que claro por qué no se debe desbordar el contenido.

Y de entre las posibles divague-soluciones, hay una que usa CSS para agregar scrollbars pop-up, pero no anda en IE 6.Allí hay que usar JS.
Para mantener la compatibilidad, les dejo otra versión

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>"ESCROLEA".</title>

<style type="text/css">

body {color: #ffffff; background-color:#000000; font-size:100%; }
div.escroleable , div.paraIE {font-size:3em; width:80%; height:1.2em; color: #000000; background-color:#ffffff; margin:10px; border: 0.1em #ff0000 solid; overflow: hidden; }
div.escroleable:hover , div.paraIE {overflow:auto; height:1.8em; }
</style>
</head>
<body>

<!--[if lt IE 7.0000]> 
<script type="text/javascript">
function escrolIE(){
var IDs = document.getElementsByTagName("div");
var totIDs = IDs.length;
for(d=0; d<totIDs; d++){
if(IDs[d].className == "escroleable"){
IDs[d]['onmouseover'] = new Function('this.className = "paraIE"');
IDs[d]['onmouseout'] = new Function('this.className = "escroleable"');
}}}
onload = escrolIE;
</script>
<![endif]-->

<h2>Muestra barras de desplazamiento al pasar el puntero. (Op9.5 / FF3.0 / Ch0.2 / IE7.0 con CSS; IE6 con JS)</h2>

<div class=escroleable>>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz<</div>

</body>
</html> 
Lo cierto es que me alegra que al final estuviéramos de acuerdo. Pero sigo insistiendo : si me van a discutir ... por favor, lean mis mensajes!!!

Saludos

furoya