Hola de nuevo.
Muchas veces el tratar de resolver un problema te lleva a dar con soluciones
ingeniosas pero tecnológicamente complejas. Pero en realidad, si se hace un
replanteamiento de la idea seguro que el problema "casi" desaparece.
Hoy tengo el día inspirado y estoy más por la labor de las cosas un poco más
complejas así que he desarrollado otro código para el caso de que lo quieras
hacer utilizando además "javascript".
Ventajas: 1. desaparece el problema de la altura de la capa que contiene la
foto. 2. Si deshabilitas los CSS todo está perfecto.
Desventajas: 1. Si deshabilitas el javascript hay problemas con las fotos
que sean de dimensiones más grandes de la que consideres inicialmente por
defecto. 2. La compatibilidad con todos los navegadores habría que
trabajarla.
Prueba el código y quédate con la idea, ya que esto esta pensado para este
código en particular sin ver en que entorno pueda aparecer. Sobre todo en un
entorno donde aparezcan más imágenes.
Aquí está el nuevo código:
*******************************************************
<head>
<style type="text/css">
<!--
#global{width:100%; position:relative }
#fotos {
position:absolute;
height: 200px;
width: 100%;
top:40px;
right:40px;
z-index:3;
text-align:right
}
#contenido p span { float:right;
padding:100px;
margin: 0 20px;
height: 10px;
width: 10px;
border: 1px solid #000;}
-->
</style>
<script type="text/javascript">
<!--
function resizeImg() {
objs = document.getElementsByTagName ("img");
altura = objs[0].height;
obj2 = document.getElementById ("caja");
obj2.style.height=altura-100+"px";
}
-->
</script>
</head>
<body onload="resizeImg();">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<div id="global">
<div id="contenido">
<p><span id="caja"></span>Lorem ipsum dolor sit amet, ..... </p>
<div id="fotos"><img src="xxxxxxxxx.jpg"/></div>
</div>
</div>
</body>
*************************************
From: Camilo Kawerín <[EMAIL PROTECTED]>
Hola Alberto,
Muchas gracias por la respuesta y la dedicación. Es más o menos la solución
que tenía en mente, aunque cierto que un SPAN vacío es más elegante un DIV
vacío.
De todos modos, el problema es que no puedo prever con certeza la altura de
la caja #fotos, salvo que haga algunos cambios a la idea original del
diseño.
Pensé usar javascript para asignar la altura al elemento vacío (incluso
para agregar éste), pero tendría que hacerlo también para el
posicionamiento de la caja. Y no estoy seguro de que funcione, porque creo
que, si la propiedad height no está definida en la hoja de estilo, al
acceder a ella mediante javascript devuelve "undefined".
Sigo investigando, gracias por la colaboración.
Saludos
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
