Anónimo
Centrar web con ancho fijo
Quiero centrar una web con ancho fijo y mirando en foros de maquetación todos coinciden en hacerlo con ccs y el comando Margin:0 auto pero no se que debo de hacer mal que no me sale centrada ni en el explorer ni en Firefox.
Por otro lado una vez conseguido esta primera parte que puedo hacer para que los divs que alojare posteriormente dentro del div contenedor no se me desplacen al cambiar la revolución siento volver a molestarte pero estoy atascado aquí y no hay manera copio el código haber que ves gracias y saludos
<!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:930px;
height:930px;
z-index:1;
background-color: #000;
margin:0 auto
}
-->
</style>
</head>
<body>
<div id="Contenedor"></div>
</body>
</html>
Por otro lado una vez conseguido esta primera parte que puedo hacer para que los divs que alojare posteriormente dentro del div contenedor no se me desplacen al cambiar la revolución siento volver a molestarte pero estoy atascado aquí y no hay manera copio el código haber que ves gracias y saludos
<!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:930px;
height:930px;
z-index:1;
background-color: #000;
margin:0 auto
}
-->
</style>
</head>
<body>
<div id="Contenedor"></div>
</body>
</html>
2 respuestas
Respuesta de Kike Rodríguez
1
Hay dos formas de hacerlo, la que comentas y que te pongo aquí:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>cien por cien</title>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#contenedor{
width: 800px;
background-color: #788DA2;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="contenedor">
</div>
</body>
</html>
Y otra muy similar que te pongo a continuación, en este ejemplo se adapta también a IE6 ya que como siempre va a su rollo:
<!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>Centrar una web en el navegador, vertical y horizontalmente, siempre visible y sin usar tablas</title>
<meta name="description" content="Sistema XHTML y CSS para centrar una web en pantalla, vertical y horizontalmente, siempre visible y sin usar tablas. Depurado por sergio Mas (saltarintro.com)" />
<style media="screen" type="text/css">
html, body {
height:100%;
margin:0;
}
body {
position:relative;
min-width:700px;
min-height:500px;
}
#contenido {
position:absolute;
background-color:#ccc;
width:700px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-350px;
}
</style>
<!--[if lte IE 6.0]>
<style>
#contenido {
top:expression(document.body.clientHeight < 501? "0px": "50%" );
margin-top:expression(document.body.clientHeight < 501? "0px": "-250px" );
left:expression(document.body.clientWidth < 701? "0px": "50%" );
margin-left:expression(document.body.clientWidth < 701? "0px": "-350px" );
</style>
<![endif]-->
</head>
<body>
<div id="contenido">
<h1>CENTRAR UNA WEB</h1>
<p> ... </p>
</div>
</body>
</html>
Si te das cuenta en esta otra forma se coloca el top y el left en el 50% de la pantalla y luego los margenes son la mitad del ancho y alto en negativo. Es decir, si pones un ancho de 800px el margen será de -400px.
Después si los div que metes dentro del contenedor no quieres que se desplacen en absoluto aunque se modifique la posición del contenedor, usa "position:absolute;". Pero si a lo que te refieres es a que se muevan dentro del contenedor para quedar siempre en la misma posición dentro de él usa "position:relative", así si pones:
position:relative;
top:10px;
Siempre se colocará a 10 pixeles de la parte superior del contenedor aunque se redimensione en pantallas de distinta resolución.
Kike
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>cien por cien</title>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#contenedor{
width: 800px;
background-color: #788DA2;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="contenedor">
</div>
</body>
</html>
Y otra muy similar que te pongo a continuación, en este ejemplo se adapta también a IE6 ya que como siempre va a su rollo:
<!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>Centrar una web en el navegador, vertical y horizontalmente, siempre visible y sin usar tablas</title>
<meta name="description" content="Sistema XHTML y CSS para centrar una web en pantalla, vertical y horizontalmente, siempre visible y sin usar tablas. Depurado por sergio Mas (saltarintro.com)" />
<style media="screen" type="text/css">
html, body {
height:100%;
margin:0;
}
body {
position:relative;
min-width:700px;
min-height:500px;
}
#contenido {
position:absolute;
background-color:#ccc;
width:700px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-350px;
}
</style>
<!--[if lte IE 6.0]>
<style>
#contenido {
top:expression(document.body.clientHeight < 501? "0px": "50%" );
margin-top:expression(document.body.clientHeight < 501? "0px": "-250px" );
left:expression(document.body.clientWidth < 701? "0px": "50%" );
margin-left:expression(document.body.clientWidth < 701? "0px": "-350px" );
</style>
<![endif]-->
</head>
<body>
<div id="contenido">
<h1>CENTRAR UNA WEB</h1>
<p> ... </p>
</div>
</body>
</html>
Si te das cuenta en esta otra forma se coloca el top y el left en el 50% de la pantalla y luego los margenes son la mitad del ancho y alto en negativo. Es decir, si pones un ancho de 800px el margen será de -400px.
Después si los div que metes dentro del contenedor no quieres que se desplacen en absoluto aunque se modifique la posición del contenedor, usa "position:absolute;". Pero si a lo que te refieres es a que se muevan dentro del contenedor para quedar siempre en la misma posición dentro de él usa "position:relative", así si pones:
position:relative;
top:10px;
Siempre se colocará a 10 pixeles de la parte superior del contenedor aunque se redimensione en pantallas de distinta resolución.
Kike
Respuesta de tnathos
1
Para hacer lo quieres hacer, haces lo siguiente en el css
body{text-align:center}
y a la capa
margin-left:auto;
margin-right:auto;
text-align:left
No olvides valorar
body{text-align:center}
y a la capa
margin-left:auto;
margin-right:auto;
text-align:left
No olvides valorar
Sigo sin poder centrarla te paso el código haber que fallo ves
<!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">
<!--
#apDiv1 {
position:absolute;
width:930px;
height:700px;
z-index:1;
background-color: #69F;
margin-right: auto;
margin-left: auto;
}
-->
</style>
</head>
<body>
<div id="apDiv1"></div>
</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">
<!--
#apDiv1 {
position:absolute;
width:930px;
height:700px;
z-index:1;
background-color: #69F;
margin-right: auto;
margin-left: auto;
}
-->
</style>
</head>
<body>
<div id="apDiv1"></div>
</body>
</html>
A ver... te pase un código para que lo pongas en el css... y no lo hiciste.
<style type="text/css">
<!--
body{text-align:center}
#apDiv1 {
margin-left:auto;
margin-right:auto;
text-align:left
width:930px;
height:700px;
z-index:1;
background-color: #69F;
}
-->
</style>
<style type="text/css">
<!--
body{text-align:center}
#apDiv1 {
margin-left:auto;
margin-right:auto;
text-align:left
width:930px;
height:700px;
z-index:1;
background-color: #69F;
}
-->
</style>
OK Ahora consigo centrar la página! ¿Pero los divs interiores con texto se me desplazan hacia la izquierda cuando la visualizo y no hay forma de dejarlos en su sitio probé con margin px y margin auto y nada de nada... que podría hacer?
A ver eso es otra pregunta.. pero en fin... apñicale al estilo de esas páginas aling:left..
Pues no hay manera este problema lo tengo desde hace mucho tiempo se desplazan las capas y no hay forma te paso el código haber que ves
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
body{
margin-right: auto;
margin-left: auto;
width: 930px;
height: 2300px;
background-image: url(fondos/0fondo%20general.jpg);
}
#apDiv1 {
margin-left:auto;
margin-right:auto;
text-align:left
width:800px;
height:2400px;
z-index:1;
background-color: #FFF;
text-align: center;
aling:left;
}
#apDiv2 {
position:absolute;
width:927px;
height:193px;
z-index:1;
left: 235px;
top: 2219px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
text-align: center;
aling:left;
}
#apDiv3 {
position:absolute;
width:537px;
height:44px;
z-index:2;
left: 618px;
top: 43px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
aling:left;
}
-->
</style>
</head>
<body>
<div id="apDiv3">inicio . empresa. servicios . galeria . imagenes . ofertas. mapa de sitio . contactar . solicitar pre</div>
<div id="apDiv1">
<p> </p>
<p><img src="fondos/fondo index 2010.jpg" width="920" height="2000" /></p>
<div id="apDiv2">
<p> </p>
Este texto se delesplaza a la izquierda al cambiar resolucion
</div>
<p> </p>
</div>
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
body{
margin-right: auto;
margin-left: auto;
width: 930px;
height: 2300px;
background-image: url(fondos/0fondo%20general.jpg);
}
#apDiv1 {
margin-left:auto;
margin-right:auto;
text-align:left
width:800px;
height:2400px;
z-index:1;
background-color: #FFF;
text-align: center;
aling:left;
}
#apDiv2 {
position:absolute;
width:927px;
height:193px;
z-index:1;
left: 235px;
top: 2219px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
text-align: center;
aling:left;
}
#apDiv3 {
position:absolute;
width:537px;
height:44px;
z-index:2;
left: 618px;
top: 43px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
aling:left;
}
-->
</style>
</head>
<body>
<div id="apDiv3">inicio . empresa. servicios . galeria . imagenes . ofertas. mapa de sitio . contactar . solicitar pre</div>
<div id="apDiv1">
<p> </p>
<p><img src="fondos/fondo index 2010.jpg" width="920" height="2000" /></p>
<div id="apDiv2">
<p> </p>
Este texto se delesplaza a la izquierda al cambiar resolucion
</div>
<p> </p>
</div>
</body>
</html>
Ami no me gusta hacerle las cosas a las personasm no hya como que aprendan con ayuda pero por ellos mismos.. mira el código que te puse y mira el que tu pusiste..
Te entiendo pero no te comprendo no se donde esta el error el aling left me alinea texto pero no evita que se desplazen las capas y si lees mi pregunta inicial era exactamente lo que quería saber de un principio no es otra pregunta... centrado y evitar que se desplacen las capas
Yo cuando formulo una pregunta y queda aclarada la puntúo puedes estar tranquilo si es eso lo que te preocupa también soy experto con otro nick y se que jode mucho cuando no valoran y tienes que tu mismo cancelar la pregunta pero lo que para ti puede resultar muy fácil no para todo el mundo puede ser así por lo que te ruego "si te apetece" que me des una explicación entendible
Gracias por tu tiempo
Yo cuando formulo una pregunta y queda aclarada la puntúo puedes estar tranquilo si es eso lo que te preocupa también soy experto con otro nick y se que jode mucho cuando no valoran y tienes que tu mismo cancelar la pregunta pero lo que para ti puede resultar muy fácil no para todo el mundo puede ser así por lo que te ruego "si te apetece" que me des una explicación entendible
Gracias por tu tiempo
A ver las capas no se ecentrean por que tu si eres experto.. le pusiste al body... el stylo que va en a las capas... en el body solo va..
body{text-align:center}
No lo que pusiste...
Ahora otro consejo que te doy es que mira las posicones y tamaños de las capas es mejor no usar posiciones fijas sino relativas... ¿si el div principal tiene 900px de ancho donde vas a poner una en 6xxpx a la derecha con 514 de ancho? No cabe...
body{text-align:center}
No lo que pusiste...
Ahora otro consejo que te doy es que mira las posicones y tamaños de las capas es mejor no usar posiciones fijas sino relativas... ¿si el div principal tiene 900px de ancho donde vas a poner una en 6xxpx a la derecha con 514 de ancho? No cabe...
Gracias tnathos seguiré con mi lucha por actualizar la página ya lo tengo más claro pero no te vayas muy lejos seguro que me surgen nuevas preguntas repito gracias por tu tiempo