Anónimo
Estoy desarrollando una página web propia y tengo problemas con capas y resoluciones.
Hola Kike 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>
Respuesta de Kike Rodríguez
1
Así, con porcentajes, como parece que quieres hacerlo, o los usas correctamente o no sirven para nada.
En el div contenedor, usar en left el porcentaje sin tenerlo en width no tiene mucho sentido. De igual manera tampoco tiene mucho sentido querer que una capa esté centrada si se fijan posiciones y tamaños fijos y absolutos para la misma.
Con porcentajes entonces podemos tener esto:
<style type="text/css">
#contenedor
{
position:absolute;
background-color: #666;
top:200px;
color:#09F;
width:90%;
height:100%;
left:5%;
}
#apDiv1
{
position:absolute;
width:30%;
height:100px;
background-color:#00C;
color:#FFF;
left:35%;
}
</style>
Así, al definir el tamaño en porcentaje defines el ancho que quieres que ocupe sea cual sea la resolución o el tamaño de la ventana (width:90%;), y si usas el left con la mitad del porcentaje que queda te centrará la capa (left:5%;).
Pero yo no usaría porcentajes. Si quieres hacelo bien usaría javascript para comprobar la resolución del monitos, o el tamaño de la ventana. Mejor siempre la resolución. Y en función de la resolución daría valores a top y left para tener las capas en las posiciones deseadas.
Aquí tienes un ejemplo de como modificarlo en función del tamaño de la ventana.
Aquí como detectar la resolución del monitor. Yo te recomiendo esta forma de hacerlo, sabiendo la resolución, ajustar el tamaño de las ventanas o la posición top y left. En contrarás muchos ejemplos de como hacerlo.
Kike
En el div contenedor, usar en left el porcentaje sin tenerlo en width no tiene mucho sentido. De igual manera tampoco tiene mucho sentido querer que una capa esté centrada si se fijan posiciones y tamaños fijos y absolutos para la misma.
Con porcentajes entonces podemos tener esto:
<style type="text/css">
#contenedor
{
position:absolute;
background-color: #666;
top:200px;
color:#09F;
width:90%;
height:100%;
left:5%;
}
#apDiv1
{
position:absolute;
width:30%;
height:100px;
background-color:#00C;
color:#FFF;
left:35%;
}
</style>
Así, al definir el tamaño en porcentaje defines el ancho que quieres que ocupe sea cual sea la resolución o el tamaño de la ventana (width:90%;), y si usas el left con la mitad del porcentaje que queda te centrará la capa (left:5%;).
Pero yo no usaría porcentajes. Si quieres hacelo bien usaría javascript para comprobar la resolución del monitos, o el tamaño de la ventana. Mejor siempre la resolución. Y en función de la resolución daría valores a top y left para tener las capas en las posiciones deseadas.
Aquí tienes un ejemplo de como modificarlo en función del tamaño de la ventana.
Aquí como detectar la resolución del monitor. Yo te recomiendo esta forma de hacerlo, sabiendo la resolución, ajustar el tamaño de las ventanas o la posición top y left. En contrarás muchos ejemplos de como hacerlo.
Kike