Anónimo
Centrar mi web sin desplazar las capas superiores al adaptarse a las diferentes resoluciones
Hola ante todo gracias por atenderme... El caso es que desde hace ya algunas semanas trato de encontrar información de como centrar mi web sin que por ello las capas superiores se desplacen al adaptarse a diferentes resoluciones y todo lo que probé no sirvió de nada ando muy perdido y casi por desistir y pensé que tu podrías ayudarme te paso el código con el ejemplo de lo que digo haber que te parece.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
#contenedor {
position:absolute;
width:920px;
height:368px;
z-index:1;
left: 15%;
top: 5px;
text-align: center;
margin: 0;
background-color: #000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #C30;
border-top-color: #C00;
right: auto;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
background-color: #FFFFFF;
left: 358px;
top: 172px;
}
-->
</style>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="contenedor">
<p> </p>
<p>Hola</p>
<p> </p>
<div id="apDiv1">
<p> </p>
<p>esta capa debe de estar centrada</p>
<p> </p>
</div>
</div>
<p> </p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
#contenedor {
position:absolute;
width:920px;
height:368px;
z-index:1;
left: 15%;
top: 5px;
text-align: center;
margin: 0;
background-color: #000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #C30;
border-top-color: #C00;
right: auto;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
background-color: #FFFFFF;
left: 358px;
top: 172px;
}
-->
</style>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="contenedor">
<p> </p>
<p>Hola</p>
<p> </p>
<div id="apDiv1">
<p> </p>
<p>esta capa debe de estar centrada</p>
<p> </p>
</div>
</div>
<p> </p>
</body>
</html>
1 Respuesta
Respuesta de tnathos
1
A ver te explico un poco..
Si lo que quieres es que el contenedor se autoajuste al tamaño de los divs internos.. entonces usa overflow:hidden.
Ahora la capa que quieres centrar la puedes declara con position:relative, dejándola con float:left y ajustando su posición con margin:0px 0px 0px 150px por ejemplo donde 150px es moverse a la derecha la cantidad de pixeles..
No olvides valorar la respuesta!
Si lo que quieres es que el contenedor se autoajuste al tamaño de los divs internos.. entonces usa overflow:hidden.
Ahora la capa que quieres centrar la puedes declara con position:relative, dejándola con float:left y ajustando su posición con margin:0px 0px 0px 150px por ejemplo donde 150px es moverse a la derecha la cantidad de pixeles..
No olvides valorar la respuesta!
No es exactamente eso, lo que quiero es mantener los margenes de diferentes divs respecto a su div contenedor en resumen al centrar la página (con ancho fijo) los divs interiores se desplazan incluso alguno saliéndose de su contenedor y no tengo manera de evitarlo
esto no me pasaba cuando la página la alineaba a la izquierda pero ahora no tengo manera de centrarla y que su contenido no se desplace al cambiar de resoluciones
explicame alguna solución de forma que lo entienda solo soy un aficionado gracias
esto no me pasaba cuando la página la alineaba a la izquierda pero ahora no tengo manera de centrarla y que su contenido no se desplace al cambiar de resoluciones
explicame alguna solución de forma que lo entienda solo soy un aficionado gracias
¿Si quieres mantener un espacio de divs internos de un contenedor por que no usas padding?
No conozco la función de ese comando ni como usarlo
ok.. mira esto.
http://lmgtfy.com/?q=padding+css
http://lmgtfy.com/?q=padding+css