Foros del Web » Creando para Internet » CSS »

Centrar contenido de una web sin importar la resolucion

Estas en el tema de Centrar contenido de una web sin importar la resolucion en el foro de CSS en Foros del Web. Hola, he estado leyendo todo los temas de este problema y ninguno me lo resuelve. Estoy maquetando la web con html + css, y simplemente ...
  #1 (permalink)  
Antiguo 01/12/2009, 09:53
 
Fecha de Ingreso: septiembre-2009
Mensajes: 51
Antigüedad: 8 años, 2 meses
Puntos: 0
Centrar contenido de una web sin importar la resolucion

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
  #2 (permalink)  
Antiguo 01/12/2009, 10:03
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Centrar contenido de una web sin importar la resolucion

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
__________________
Grupo Telegram Docker en Español
  #3 (permalink)  
Antiguo 01/12/2009, 10:07
 
Fecha de Ingreso: septiembre-2009
Mensajes: 51
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Centrar contenido de una web sin importar la resolucion

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
  #4 (permalink)  
Antiguo 01/12/2009, 10:09
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Centrar contenido de una web sin importar la resolucion

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

Saludos
__________________
Grupo Telegram Docker en Español
  #5 (permalink)  
Antiguo 01/12/2009, 10:23
 
Fecha de Ingreso: septiembre-2009
Mensajes: 51
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Centrar contenido de una web sin importar la resolucion

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!!
  #6 (permalink)  
Antiguo 01/12/2009, 15:40
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Centrar contenido de una web sin importar la resolucion

Hola:

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

Saludos.

  #7 (permalink)  
Antiguo 01/12/2009, 19:41
 
Fecha de Ingreso: mayo-2008
Ubicación: Santiago-Chile
Mensajes: 253
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Centrar contenido de una web sin importar la resolucion

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.
  #8 (permalink)  
Antiguo 01/12/2009, 19:42
 
Fecha de Ingreso: mayo-2008
Ubicación: Santiago-Chile
Mensajes: 253
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Centrar contenido de una web sin importar la resolucion

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
  #9 (permalink)  
Antiguo 02/12/2009, 04:08
 
Fecha de Ingreso: septiembre-2009
Mensajes: 51
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Centrar contenido de una web sin importar la resolucion

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??
  #10 (permalink)  
Antiguo 02/12/2009, 09:02
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Centrar contenido de una web sin importar la resolucion

Cita:
<body>
<div id="contenedora">
<div id="cabecera"></div>
<div class="outer"></div>
<div id="cuerpo"></div>
</div>
</body>
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.
  #11 (permalink)  
Antiguo 02/12/2009, 11:39
 
Fecha de Ingreso: septiembre-2009
Mensajes: 51
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Centrar contenido de una web sin importar la resolucion

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!!
  #12 (permalink)  
Antiguo 02/12/2009, 15:22
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Centrar contenido de una web sin importar la resolucion

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

quedaría asi:

Cita:
<body>
<div id="contenedor">
<div id="cabecera"></div>
<div class="outer"></div>
<div id="cuerpo"></div>
</div>
</body>
el css sería:

Cita:
#contenedor{
width:900px;
margin-left:auto;
margin-right:auto;
}
Modifica el ancho deseado de el contenedor.

Saludos ^^
  #13 (permalink)  
Antiguo 02/12/2009, 15:38
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Centrar contenido de una web sin importar la resolucion

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

quedaría asi:

Cita:
<body>
<div id="contenedor">
<div id="cabecera"></div>
<div class="outer"></div>
<div id="cuerpo"></div>
</div>
</body>
el css sería:

Cita:
#contenedor{
width:900px;
margin-left:auto;
margin-right:auto;
}
Modifica el ancho deseado de el contenedor.

Saludos ^^
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:32.