Problema position absolute capa centrada

chavitodb88 · #1 (**permalink**) 21/01/2012, 05:52

Tengo un problema con la maquetacion de una web podeis ver en el dominio http://missteen.torrecreativa.com que el logo esta en una posicion absoluta pero si minimizas la ventana se ve que la posicion de esta capa se desplaza hacia la izquierda me gustaria saber si alguien me puede ayudar con esto.

Aqui les dejo el html y el css

Código HTML:

<body>
<div id="contenedor">

<div id="logo" align="center"><img src="images/logo.png" width="230" height="234"></div>

<div id="cabecera">
	<div id="redes">
    <div class="redes" style=" margin:10px 0 0 10px">
        <table>
        <tr>
        <td><a href="#" class="redes">Contacto</a> | Siguenos en :</td>
        <td>
        <img src="images/logo-tuenti.png" alt="Tuenti" width="25px" height="25px" style="margin-top:3px" />
        <img src="images/logo-facebook.png" alt="facebook" width="25px" height="25px" />
        </td>
        </tr>
        </table>
     </div>
	</div><!--redes-->
    <div id="bd_sup">
    <img src="images/bd_sup.png" />
    </div>
	<div id="navegacion">
		<div id="navizq">
           <ul>
           <li>Miss Teen</li>
            <li>Miss Fiestas</li>
             <li>Miss Extras</li>
           </ul>
		</div><!--navizq-->
		<div id="navder" >
           <ul style="margin-left:150px">
           <li>Miss Teen</li>
            <li>Miss Fiestas</li>
             <li>Miss Extras</li>
           </ul>
		</div><!--naveder-->
     </div><!--navegacion-->
	<div id="bd_inf">
    	<img src="images/bd_inf.png" />
	</div>
</div><!--cabecera-->
</div><!--contenedor-->
</body>

Código:

#contenedor{
	width:1024px;
	margin:auto;
}





/*cabecera*/
#cabecera{
	width:1000px;
	float:left;
	margin:0px 12px;
	z-index:1;
}
#redes{
	width:1000px;
	height:60px;
	float:left;
	background:#FFFFFF;
	z-index:1;
}
#bd_sup{
	float:left;
	width:1000p;
	height:18px;
}
#navegacion{
	float:left;
	background-color: #F0F;
	color: #FFFFFF;
	width: 1000px;
	height:50px;
}
#navegacion li{
	float:left;
	list-style:none;
	margin:14px 10px 0 0;
	
}
#navegacion li a{
	text-decoration:none;
	display:block;
	width:1000px;
	
}
#navizq{
	width:500px;
	float:left;

}
#navder{
	width:500px;
	float:left;

}
#bd_inf{
	float:left;
	width:1000p;
	height:18px;
}

/*logo*/
#logo{
	position: absolute;
	width: 350px;
	height: 252px;
	top: 10px;
	left: 48%;
	margin-left: -100px;
	z-index:3px
	
}

C2am · #2 (**permalink**) 21/01/2012, 06:16

Hola chavitodb88, Bienvenido!!
El código hace lo que le pides, que se posicione en forma absoluta con respecto a la pantalla del navegador.
Si lo quieres posicionado en forma absoluta pero con respecto a su contenedor leete esto
Saludos