Anónimo
Cómo centrar mi web para adaptarla a distintas resoluciones
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 krowmx
1
Para centrar una web completa utiliza en tu css lo siguiente
body {
margin:0px;
padding:0px;
}
para ir centrando divs, depende la resolución por ejemplo
#centrar{ margin: 0 auto 0 auto; width: 390px; }
vas cambiando el width de acuerdo al tamaño que tenga y quedaria
<p id="centrar">esta capa debe de estar centrada</p>
Saludos, espero tu calificación!
Gracias
Rene
www.krowmx.com
body {
margin:0px;
padding:0px;
}
para ir centrando divs, depende la resolución por ejemplo
#centrar{ margin: 0 auto 0 auto; width: 390px; }
vas cambiando el width de acuerdo al tamaño que tenga y quedaria
<p id="centrar">esta capa debe de estar centrada</p>
Saludos, espero tu calificación!
Gracias
Rene
www.krowmx.com
Gracias por tu tiempo y perdona mi ignorancia, pero si por ejemplo tuviese varios divs y no precisamente centrados que debería de hacer para que estos mantuviesen el margen respecto a su div contenedor centrado... el problema me surgió cuando actualice y centre el div contenedor cuando este estaba al a izquierda no tenia problemas ahora el contenedor se mantiene en el centro pero los divs se desplazan, incluso se salen del div contenedor acláramelo por favor
Usa los CSS por ejemplo
#otrodiv{ padding-left:20px; padding right:20px; margin-left: 50px; margin-right:50px; etc etc}
tendras que crear por ejemplo en el css
#divsizquierdos{ padding-left:20px; padding right:20px; margin-left: 50px; margin-right:50px;}
#divsderechos{ padding-left:60px; padding right:60px; margin-left: 10px; margin-right:10px;}
Es decir, tienes que jugar con los margenes y paddings.
#otrodiv{ padding-left:20px; padding right:20px; margin-left: 50px; margin-right:50px; etc etc}
tendras que crear por ejemplo en el css
#divsizquierdos{ padding-left:20px; padding right:20px; margin-left: 50px; margin-right:50px;}
#divsderechos{ padding-left:60px; padding right:60px; margin-left: 10px; margin-right:10px;}
Es decir, tienes que jugar con los margenes y paddings.