[SOLUCIONADO] Superponer una imagen a dos divs y centrarla

amokachi69 · #1 (**permalink**) 23/12/2013, 22:01

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

pitufoweb · #2 (**permalink**) 23/12/2013, 22:44

Hola,

El contenedor ya lo tienes centrado. Lo que tendrías que hacer el meter el logo dentro del contenedor y colocarlo en la posición que deseas.

Según veo, creo que piensas utilizar position (relative, absolute) para armar la web. Si esa es la idea que tienes, lamento decirte que vas por mal camino.

Saludos

amokachi69 · #3 (**permalink**) 24/12/2013, 08:42

Hola pitufoweb,

el contenedor se que lo tengo centrado, lo que quiero centrar es el logo sin darle un valor left para centrarle ya que si cambia la resolución o cambio el tamaño del navegador el logo se queda en la posición y no se mueve con el resto de la página.

Lo de utilizar las positions realtive y absolute es para poder hacer, como se ve en la imagen, que el div del logo quede superpuesto por encima del div cabecera y del div contenedor, si no lo hago por las positions y los z-index no se superpone. Si sabes de alguna otra manera dímelo por favor.

alzacon · #4 (**permalink**) 24/12/2013, 09:44

Tienes que hacer lo que dice pitufoweb

JustinKO · #5 (**permalink**) 24/12/2013, 11:19

si no te he entendido mal:
Supongo que con que incluyas el logo en la cabecera y dejes que sobresalga por abajo, le das margen: 0 auto; y ya tendría que funcionar.
Algo así sería:

#all{
position:relative;
}

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

#logo{

width:211px;
margin:0 auto;
height:166px;

z-index:3000;

}

#contenedor{
width:980px;
margin:0 auto;
background-color:#C4E4FF;

height: 500px;

}

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

}
</style>
</head>

<body>

<div id="all">
<div id="cabecera">
<div id="logo">
<img src="logo.png" width="211" height="166" /></div>
</div>

<div id="contenedor">

</div>

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

</body>

JustinKO · #6 (**permalink**) 24/12/2013, 11:34

Perdón, acabo de editar porque no le había añadido el z-index para que se superpusiera sobre la capa contenido.

Lo he probado y creo que es lo que preguntas y necesitas.

Espero haber podido ayudarte

amokachi69 · #7 (**permalink**) 24/12/2013, 18:51

Muchas gracias a todos por la ayuda, ya está solucionado con lo que ha explicado JustinKO; y era una tontería, que si no hubiera pensado un poco más lo habría sacado jejejeje.

De todas maneras gracias y felices fiestas.