alinear divisiones

[boniki]

Hola a tod@s,

Tengo una pagina que contiene dos divisiones. Una de ellas es una imagen, y la otra es una pagina que contiene un video. Al poner la division que contiene la pagina con video, encima de la imagen (overflow), no se me centran. Os pongo el codigo para que veais a lo que me refiero.

<style>
/*este selector tiene la imagen a mapear, con su alto y ancho*/
#imagen {
width:800px;
height:600px;
background: url(background.jpg) no-repeat;
position:relative;
}


/*Los enlaces dentro de la imagen (el mapeo) */
#imagen a#map3 {height:10px; width:50px; top:115px; right: 95px}
</style>



<center>
<div id="imagen" align="center">
<a href="contact.html" id="map3"></a>
<br>
&nbsp;</br>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="OVERFLOW: auto; WIDTH: 901px; HEIGHT: 443px">
<p align="center"><font color="#C0C0C0">
<iframe id="glu" name="glu" src="jambooree24042012/index.html" width="70%" height="380" allowtransparency="true" frameborder="0" scrolling="no">Sorry, your browser doesn't support iframes.</iframe>
</font>
<p align="center">
<p align="center">
<p align="center">
<p align="center">
<p align="center">
</div>
</div>
</center>

Gracias

[_franb]

Amigo boniki, no sé si comprendo exactamente tu consulta. Si tu idea es centrar elementos, la propiedad CSS que se suele utilizar es 'margin' con valor 'auto' para 'right' y 'left'.

Mi recomendación es que olvides la etiqueta <center> que ha quedado obsoleta hace tiempo, y probaría algo así:

Código HTML:

<style>
.imagen { width:800px; height:600px; background: url(imagen.jpg) no-repeat; margin: 0 auto}
.content { width:70%; height:380px; margin: 0 auto;}
</style>

<div class="imagen">
    	<div class="content">    
        	<iframe id="glu" name="glu" src="url" width="100%" height="100%" allowtransparency="true" frameborder="0" scrolling="no">Sorry, your browser doesn't support iframes.</iframe>
    	</div>
</div> 

Quedaría algo como esto [URL="http://fbergamaschi.com.ar/experience/ejemplo1.html"]ejemplo[/URL]

Por otra parte, te recomiendo que para ubicar espacialmente los elementos del sitio utilices las propiedades 'margin' y 'padding', o las coordenadas 'top', 'bottom', 'right' y 'left' junto a las propiedad 'position: absolute' o 'position: relative'. Evita utilizar <br /> y <p> para esta tarea.

Espero sirva para encaminarte.

[boniki]

Muchisimas gracias