Centrar contenido de una web sin importar la resolucion

pacorm15 · #1 (**permalink**) 01/12/2009, 09:53

Hola, he estado leyendo todo los temas de este problema y ninguno me lo resuelve. Estoy maquetando la web con html + css, y simplemente quiero que la web salga centrada. Lo mas que me he acercado es con el align center pero al tener el menu flotado no lo alinea.¿Que me recomendais?

Gracias

Carlangueitor · #2 (**permalink**) 01/12/2009, 10:03

Recomiendo que leas los cientos de temas que dices los mismo, en el buscador del foro pon "centrar página" o "centrar web" y vas a encontrar lo que quieres.

te adelanto algo:

Todo lo metes en un div y le das margin: 0 auto.

Saludos

pacorm15 · #3 (**permalink**) 01/12/2009, 10:07

he estado mirando un ciento de mensajes y ninguno me lo ha resuelto, y con lo que me has puesto me sigue pasando... porque el elemento flotado se sigue quedando a la izquierda y no se alinea

Carlangueitor · #4 (**permalink**) 01/12/2009, 10:09

A lo mejor tienes posición absoluta, muestranos el código para ver como tienes tu estructura.

Saludos

pacorm15 · #5 (**permalink**) 01/12/2009, 10:23

Haber el codigo html seria algo asi:
<body>
<div id="contenedora">
<div id="cabecera"></div>
<div class="outer"></div>
<div id="cuerpo"></div>
</div>
</body>

cada div con su contenido

y la css:
#cuerpo{margin:20px; }

#login{float:right}

#id_hab{position:relative; left:25%}
#id_pub{position:relative; left:50%}

.imagen{float:right;}

.outer{
margin:0px;
padding:0px;
}
#menu {
float:left;
margin-top:20px;
margin-right:20px;
margin-left:20px;
width:148px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
}
#menu ul{
list-style:none;
padding:0px;
margin:0px;
}

#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
font-weight:normal;
font-family:"Comic Sans MS";
}

#menu li a:link, #menu li a:visited {
color: #5E7830;
display: block;
background: url(/imagenes/menu.gif);
background-repeat:no-repeat;
padding: 8px 0 0 10px;
}

#menu li a:hover {
color: #26370A;
background: url(/imagenes/menu.gif) 0 -32px;
background-repeat:no-repeat;
padding: 8px 0 0 10px;
}

#menu li a:active {
color: #26370A;
background: url(/imagenes/menu.gif) 0 -64px;
background-repeat:no-repeat;
padding: 8px 0 0 10px;
}
.fil{
margin:5px;
}

#contenedora{
margin: 0 auto;
}

muchas gracias!!

jomaruro · #6 (**permalink**) 01/12/2009, 15:40

Hola:

¿Estás seguro que no se centra? Prueba a darle un ancho fijo a la capa contenedora por ejemplo 960px.

Saludos.

bkolores · #7 (**permalink**) 01/12/2009, 19:41

Carlangueitor... simpatico eres merecedor del premio a la voluntad.

tal y como dice jomaruro ponte un valor de ancho al #contenedor, ya que recuerda que lee de arriba abajo entonces tu div (si no usas un reseteador) dice que esta width:100% y display:block; que son cosas que toma automatico el css

entonces... si le dices que deje automatico el margen izquierda y derecha no tiene espacio ya que es 100%; es decir todo...

pon el codigo en etiquetas de codigo para que sea mas rapida la lectura.

bkolores · #8 (**permalink**) 01/12/2009, 19:42

pd: margin:0px; padding:0px; alli hay un error... que no complica pero 0px es lo mismo que 0em y que 0% y que 0cm y que 0pt etc.etc.etc.... 0 es solo eso
0

Saludos y suerte

pacorm15 · #9 (**permalink**) 02/12/2009, 04:08

muchas gracias a todos por contestar... Se ha centrado mas o menos, queda un poco tirado hacia la derecha, pero mi duda es... por que me decis el valor de 960px, si por ejemplo la pagina deberia estar para una resolucion de 800?? es un valor que me habeis dicho al azar o es lo tipico que se suele utilizar??
Y otra cosa utilizar ese valor no va a funcionar mal cuando se cambie la resolucion de la pantalla o utilice distintos navegadores??

PrendekZ · #10 (**permalink**) 02/12/2009, 09:02

Cita:

El CSS sería:

Cita:

#cuerpo{
margin:20px auto;
}

#login{float:right}

#id_hab{position:relative; left:25%}
#id_pub{position:relative; left:50%}

.imagen{float:right;}

.outer{
margin:0px;
padding:0px;
}
#menu {
float:left;
margin-top:20px;
margin-right:20px;
margin-left:20px;
width:148px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
}
#menu ul{
list-style:none;
padding:0px;
margin:0px;
}

#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
font-weight:normal;
font-family:"Comic Sans MS";
}

#menu li a:link, #menu li a:visited {
color: #5E7830;
display: block;
background: url(/imagenes/menu.gif);
background-repeat:no-repeat;
padding: 8px 0 0 10px;
}

#menu li a:hover {
color: #26370A;
background: url(/imagenes/menu.gif) 0 -32px;
background-repeat:no-repeat;
padding: 8px 0 0 10px;
}

#menu li a:active {
color: #26370A;
background: url(/imagenes/menu.gif) 0 -64px;
background-repeat:no-repeat;
padding: 8px 0 0 10px;
}
.fil{
margin:5px;
}

#contenedora{
margin: 0 auto;
}

Quieres centrar creo que el "Cuerpo"; para estó usamos la herramienta de padding:20px auto; la primera variable signifca arriba y abajo, la segunda variable en esté caso que es (Auto), sería derecha e izquierda, así colocamos un poco el código de nuestra web más liviano, por qué podrías hacer esto:

Cita:

#cuerpo{
margin-top:20px;
margin-bottom:20px;
margin-left:auto;
margin-right:auto;
}

y estaría funcionando igual que el anterior que te dí.

Saludos, cualquier cosa avisame.

pacorm15 · #11 (**permalink**) 02/12/2009, 11:39

Hola Prendekz, lo que quiero centrar es la division contenedora que engloba a todo el contenido de la web, para que los que tengan una resolucion mayor vean la web centrada en su pantalla.

Un saludo y gracias por vuestros comentarios!!

PrendekZ · #12 (**permalink**) 02/12/2009, 15:22

Sencillo, puedes crear una div llamada "contenedor" qué contenga todo lo de la web.

quedaría asi:

Cita:

el css sería:

Cita:

#contenedor{
width:900px;
margin-left:auto;
margin-right:auto;
}

Modifica el ancho deseado de el contenedor.

Saludos ^^

PrendekZ · #13 (**permalink**) 02/12/2009, 15:38

Sencillo, puedes crear una div llamada "contenedor" qué contenga todo lo de la web.

quedaría asi:

Cita:

el css sería:

Cita:

#contenedor{
width:900px;
margin-left:auto;
margin-right:auto;
}

Modifica el ancho deseado de el contenedor.

Saludos ^^