Una solucion similar a la que plantea Alberto implementé yo aqui [1], la
diferencia es que esta se basa en una IFRAME, por lo que no hay que
recargar toda la página para cada imagen. Tiene la misma desventaja, que
las dimensiones inciales tienen que ser las de la imagen mas grande
posible o el límite del diseño.
La probé y degrada cómodamente. En NS2 se ve perfectamente. En Links
(para windows) no hay un problema con el menu, porque usé un código que
no es válido, pero no tiene nada que ver con la solucion a tu problema.
Martin.
[1] http://www.pablopeano.com.ar/index.php?section=portfolio!Teatro
Alberto Vázquez Ronco wrote:
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
--
Martin Szyszlican
www.y.net.ar
___________________________________________________________
1GB gratis, Antivirus y Antispam
Correo Yahoo!, el mejor correo web del mundo
http://correo.yahoo.com.ar
_______________________________________________
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
