Foros del Web - Ver Mensaje Individual

kseso? · #6 (**permalink**) 13/06/2009, 11:51

Como no dices cuál es el problema, supongo que te refieres (según el comportamiento del código que pusiste), a que "animacion" se ve entero, dentro de "mostrarMapa" y este a su vez, ocupa toda la pantalla (a lo ancho)

Si lo que quieres lograr es que "animacion" se recorte, debes darle una anchura a "mostrarMapa" (que es el que tiene overflow).

Puedes pobrar este código en tu navegador (FF e IE7)

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>play sobre imagen</title>
<style type="text/css">
* {margin:0; padding:0;}
</style>
</head>
<body>
<div class="mostrarMapa" style="background:#cdcdcd; height:150px;overflow:hidden;">
<div class="animacion" style="background: #c00; height: 300px; width:600px; margin:0 auto;" id="map_canvasRestaurantes"></div>
</div>
</body>
</html>

Añade ahora "position:relative" a los dos div y verás que no hay cambio. Pero si le añades un ancho a "mostrarMapa" de menos de 600px (que mide el otro div) verás cómo sí funciona el overflow.

A menos que no sea eso lo que buscabas.