Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/12/2013, 22:01
Avatar de amokachi69
amokachi69
 
Fecha de Ingreso: noviembre-2013
Ubicación: San Sebastián de los Reyes (MADRID)
Mensajes: 5
Antigüedad: 10 años, 5 meses
Puntos: 0
Superponer una imagen a dos divs y centrarla

Hola a tod@s,

en primer lugar felicitaros la Navidad y por vuestros aportes y ayudas.

Mi problema es el siguiente, estoy haciendo una web que por el momento solo tiene cabecera, contenedor y pie; entre la cabecera y el contenedor quiero poner el logo de la web centrado. Lo de superponerlo lo hago pero lo que no consigo es centrar el logo al ancho total de la página sin darle unas medidas fijas, me explico, si le doy medidas fijas para centrarlo, a la hora de ver la web en otra resolución, el logo sigue en la posición fija que le he dado y no se "mueve" con el resto de la página.

Pego una captura para que lo veáis mejor.
[URL="http://imageshack.com/a/img5/9420/y7o2.png"]http://imageshack.com/a/img5/9420/y7o2.png[/URL]

En ella podréis ver que esta centrada pero no de la manera que quiero. OS pego el código para que veáis como lo tengo.

HTML:
<div id="all">
<div id="cabecera">
</div>

<div id="logo">
<img src="imgs/logo.png" width="236px" height="175px">
</div>

<div id="contenedor">
</div>

<div id="pie">
</div>
</div>

CSS:
#all{
position:relative;
}

#cabecera{
min-width:980px;
height:80px;
background-color:#1C6480;
margin-bottom:30px;
position:relative;
z-index:1;
}

#logo{
height:220px;
width:297px;
margin:0 auto;
position:absolute;
z-index:3;
left: 710px; top: 5px;
}

#contenedor{
width:980px;
margin:0 auto;
background-color:#C4E4FF;
position:relative;
z-index:2;
}

#pie{
min-width:980px;
height:80px;
background-color:#1C6480;
margin-top:30px;
position:relative;
}

En el estilo del logo tengo puesto margin: 0 auto pero no funciona.

Espero podáis decirme como puedo hacer para que el logo quede centrado con cualquier reolución.



Muchas gracias y saludos.
David