Foros del Web - Ver Mensaje Individual

furoya · #11 (**permalink**) 08/07/2009, 13:26

Viene del mensaje anterior.

Habrás notado que ese código tiene un escript. Eso es porque además del problema que nos mencionó kseso?, sobre que el texto no se puede seleccionar, también esta el de que el ancho del bloque incluye las scrollbars, y si le damos el mismo ancho a las imágenes ... tampoco podremos desplazar, porque nos tapan los botones. Como el tamaño de las barras de desplazamiento es configurable, hay que medirlo con un escript en cada navegador y pasarle luego el ancho disponible a las imágenes.
Existe un CSS para hacerlo (-moz-available -moz-fit-content) pero es propietario y funciona muy mal. Antiguamente, clientWidth era propiedad de MSIE, pero hoy es compatible con la mayoría de los browsers.
Si no queremos usar JS, la única que nos queda es meter las imágenes atrás, con lo que resolvemos lo de la selección, el desplazamiento, el tamaño, y si usamos position: absolute también el bug del arrastre, tal como se explicó más arriba

Código:

<!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></title>

<style type="text/css">
body {background-color: #000080; color: #ffffff; }

#contenedor {width: 22em; height: 6em; overflow: hidden; 
background-color: #ffffff; color: #000080; position: relative; 
font-size: 1.5em; line-height: 0.75em; font-weight: bold; }

#contenido {width: 22em; height: 6em; overflow: auto; 
background-color: transparent; position: absolute; top: 0; left: 0; 
}

#imag0 , #imag1 {position: absolute; top: 0; left: 0; width: 22em; height: 3em; margin-top: 0; }
#imag1 {top: 4em; height: 2em; }
#fin {margin-top: 1000px; }
</style>
</head>
<body>
<h2>Im&aacute;genes en capa contenedora detr&aacute;s del contenido. (IE6; FF3; Op9; Chr2)</h2>
<div id=contenedor>
<img src="http://img72.imageshack.us/img72/5572/degrad018my.png" id=imag0>
<img src="http://img72.imageshack.us/img72/2408/semitrans017oh.png" id=imag1>
<div id=contenido>
<p>Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
<span style="color:#ff0000">Foros del Web. Foros del Web. Foros del Web.</span> <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
</p>
</div>
</div>
<p id=fin>final</p>

</body>
</html>

Un inconveniente que hasta ahora no se mencionó, es que los degradados con transparencia son *.png, y el IE 6 no los reconoce hasta que los usamos como fondo de capas o imágenes, con un filtro. Acá está la versión final, con las imágenes (en div's) por delante y un fondo fijo.

Código:

<!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></title>
<script type="text/javascript">
function ancho(){
var anchoUtil = document.getElementById("contenido").clientWidth;
document.getElementById("imag0").style.width = anchoUtil + "px";
document.getElementById("imag1").style.width = anchoUtil + "px";
}
onload = ancho;
</script>
<style type="text/css">
body {background-color: #000080; color: #ffffff; font-size: 100%; }
#contenedor {width: 500px; height: 150px; overflow: hidden; 
background-color: #ffffff; color: #800000; position: relative; 
background-image: url(http://img43.imageshack.us/img43/9528/marmol2in.gif); }
#contenido {width: 500px; height: 150px; overflow: auto; 
background-color: transparent; position: absolute; top: 0; left: 0; 
font-size: 22px; line-height: 75%; font-weight: bold; margin: 0; }
#imag0 , #imag1 {position: absolute; width: 500px; height: 40px; top: 0; left: 0; }
#imag1 {top: 110px; }
#fin {margin-top: 1000px; }
</style>
</head>
<body>
<h2>Bloque con fondo fijo, im&aacute;genes con posici&oacute;n absoluta 
sobre el texto y escript para ajustar el ancho. (IE6; FF3; Op9; Chr2)</h2>
<div id=contenedor>
<p id=contenido>Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
<span style="color:#ff0000">Foros del Web. Foros del Web. Foros del Web.</span> <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
</p>

<!--[if IE 6.0000]>
<style>
#imag0 { background-color: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled:"true", src="http://img72.imageshack.us/img72/5572/degrad018my.png", sizingMethod="scale"); }
#imag1 { background-color: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled:"true", src="http://img72.imageshack.us/img72/2408/semitrans017oh.png", sizingMethod="scale"); }
</style>
<div id=imag0></div>
<div id=imag1></div>
<![endif]-->

<!--[if gte IE 7.0000]>
<img src="http://img72.imageshack.us/img72/5572/degrad018my.png" id=imag0>
<img src="http://img72.imageshack.us/img72/2408/semitrans017oh.png" id=imag1>
<![endif]-->

<![if !IE]>
<img src="http://img72.imageshack.us/img72/5572/degrad018my.png" id=imag0>
<img src="http://img72.imageshack.us/img72/2408/semitrans017oh.png" id=imag1>
<![endif]>
</div>
<p id=fin>final</p>

</body>
</html>

Todavía no resolví lo de la selección, ni que no se nos destartale todo con un zoom o resize; mientras tanto dejo algunos enlaces relacionados

Aspecto de la barra de scroll #6 (es un truco viejo, pre-clientWidth)

Colocar imágenes en las esquinas

Barra de desplazamiento personalizada...

como hacer un fondo ajustable?

Función "opacity"#23

Banner en scrollbar.