Anónimo
Quiero centrar mi sitio web sin desplazar las capas superiores
Hola psaix 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 psaix
1
Prueba (te remarco la orden en negrita):
<!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 align:center">
<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 align:center">
<p> </p>
<p>esta capa debe de estar centrada</p>
<p> </p>
</div>
</div>
<p> </p>
</body>
</html>
Gracias por tu respuesta pero sigo con una duda, de que forma podría mantener diferentes divs dentro de un div contenedor centrado en pantalla y que los divs interiores mantengan los margenes respecto al div contenedor y no se desplacen al cambiar la revolución de pantalla.
Lo siento amigo, no puedo ayudarte en eso, prueba abriendo otra pregunta a ver si otro experto puede ayudarte.
Saludos,
Psaix
Colaborador de portales:
www.grancomercio.com - Galería Comercial Virtual
www.ayudame.eu - Ayuda y Déjate Ayudar
www.avesopajaros.com - Directorio en habla hispana dedicado al mundo de las aves
www.coydesa.com - Creación de Sitios Web
Te agradecería que cierres la pregunta, cuando consideres que está respondida y valorando mi respuesta como consideres oportuno, para que quede vista para el resto de usuarios que puedan estar interesados en este tema. Gracias. Psaix.
Saludos,
Psaix
Colaborador de portales:
www.grancomercio.com - Galería Comercial Virtual
www.ayudame.eu - Ayuda y Déjate Ayudar
www.avesopajaros.com - Directorio en habla hispana dedicado al mundo de las aves
www.coydesa.com - Creación de Sitios Web
Te agradecería que cierres la pregunta, cuando consideres que está respondida y valorando mi respuesta como consideres oportuno, para que quede vista para el resto de usuarios que puedan estar interesados en este tema. Gracias. Psaix.