Centrar página web para diferentes resoluciones

[ginnomillan]

Hola,

Es mi primera vez en foros del web.

He seguido durante meses varios hilos del foro sobre este tema, pero sin embargo no logro centrar horizantalmente mi web. La he diseñado para una resolución 1024x768, pero necesito que se vea para 1280x1024. Y no hay caso.

Estas son las direcciones:

www.portal-eie.ucv.cl
www.portal-eie.ucv.cl/index.css

Agradecido se despide a la espera de vuestras respuestas

Ginno

[Mikmoro]

¿Y has seguido hilos sobre el tema durante meses y nunca has encontrado nada? Pues en estos meses este asunto igual se ha repetido 130 veces, con resultados satisfactorios en todos los casos.

Usando el doctype que tu usas (strict), crea un div que haga de envoltorio para todo el contenido de tu web (justo destrás de body), dale el ancho que deseas y añádele en la css margin: 0 auto;

Y voilà, tu web centrada en cualquier resolución.

Si no es eso, especifica mejor tu problema y qué quieres hacer.

[kseso?]

Hola ginnomillan
Bienvenido a FdW.
Bueno, por partes:
1º:¿Para qué pones tus páginas si tienes anulado el botón derecho del ratón? Mala práctica e igual resultado. Sólo sirve para tener que dar dos click´s más.
2º: para centrar una página mediante css tienes que:

1. Encerrar todo el contenido que quieras que aparezca posicionado al centro en la horizontal un solo div.
2. Ese div tiene que tener unas medidas en su anchura.
3. Darle como propiedades "margin: 0 auto;"

Un saludo

Edito:
Vaya, me entretuve en ver la página y otras cosas entre que comencé la respuesta y la publiqué y llegué demasiado retrasado respecto a Mik

[Mikmoro]

Últimamente nos damos de morrones a menudo

Por cierto: 3 mensajitos te quedan para los 1.000. ¿Cómo los vas a gastar?

[kseso?]

Iniciado por Mikmoro

Últimamente nos damos de morrones a menudo

Por cierto: 3 mensajitos te quedan para los 1.000. ¿Cómo los vas a gastar?

Es cierto, pero la foto-finish de ayer no me la concedieron.

También es cierto.
De los tres ya sólo quedan dos.
De los dos, uno el azar lo dirá y
el 1000 para proponerte oficialmente como (para ver si sucumbes a la tentación de "la roja y el borrado" )

[ginnomillan]

Iniciado por Mikmoro

¿Y has seguido hilos sobre el tema durante meses y nunca has encontrado nada? Pues en estos meses este asunto igual se ha repetido 130 veces, con resultados satisfactorios en todos los casos.

Usando el doctype que tu usas (strict), crea un div que haga de envoltorio para todo el contenido de tu web (justo destrás de body), dale el ancho que deseas y añádele en la css margin: 0 auto;

Y voilà, tu web centrada en cualquier resolución.

Si no es eso, especifica mejor tu problema y qué quieres hacer.

Lamentablemente esa es una de las soluciones que no funciona, he probado con eso utilizando ancho en porcentaje, como en pixeles. ¿Alguna otra idea?. ¿tiene que ver con el doctype que se utiliza?.

[ginnomillan]

Hola,

Lamentablemente, esa es una de las soluciones que he seguido. Ver:

1.- http://www.forosdelweb.com/f17/como-centrar-capa-con-dreamweaver-133770/
2.- http://www.forosdelweb.com/f53/centrar-web-medio-pantalla-493294/

No me funciona

Las otras 128 veces son las veces que esa misma respuesta se ha dado.

Por eso pregunto: ¿tiene que ver en algo el que esté utilizando posicionamiento absoluto en vez de relativo?, ¿el doctype?. ¿Alguna idea?.

Gracias

[Mikmoro]

Iniciado por ginnomillan

Lamentablemente esa es una de las soluciones que no funciona, he probado con eso utilizando ancho en porcentaje, como en pixeles. ¿Alguna otra idea?. ¿tiene que ver con el doctype que se utiliza?.

Te equivocas de medio a medio: esa es la solución que SÍ funciona.

Iniciado por ginnomillan

¿tiene que ver en algo el que esté utilizando posicionamiento absoluto en vez de relativo?

Por supuesto. ¿Es que en todos los hilos que has seguido nunca has visto hablar del posicionamiento absoluto? En fin.
Con posicionamiento absoluto el centrado a través de los márgenes automáticos no funciona, es imposible (66 de las 130), hay que hacerlo de otra manera igual de sencilla.

Si hubieras mencionado el posicionamiento lo primero de todo, lo hubieras resuelto en el primer mensaje.

Y sí, como dice kseso? es muy mala práctica desactivar el botón derecho de MI navegador en TU web.

Que tengas suerte.

[McPinkY18]

pero el contenedor?

#div_centrado {
margin: auto;
width: 750px
}
.. este es..? :S te dijeron margin : 0 auto ;

[ginnomillan]

o sea... cambiar todo a posicionamiento relativo????

[ginnomillan]

Iniciado por McPinkY18

pero el contenedor?

#div_centrado {
margin: auto;
width: 750px
}
.. este es..? :S te dijeron margin : 0 auto ;

No, ese se me quedo después de tantas pruebas... es un error.

La pregunta es: ¿cambio todo a posicionamiento relativo?

[ginnomillan]

Iniciado por Mikmoro

Te equivocas de medio a medio: esa es la solución que SÍ funciona.


Por supuesto. ¿Es que en todos los hilos que has seguido nunca has visto hablar del posicionamiento absoluto? En fin.
Con posicionamiento absoluto el centrado a través de los márgenes automáticos no funciona, es imposible (66 de las 130), hay que hacerlo de otra manera igual de sencilla.

Si hubieras mencionado el posicionamiento lo primero de todo, lo hubieras resuelto en el primer mensaje.

Y sí, como dice kseso? es muy mala práctica desactivar el botón derecho de MI navegador en TU web.

Que tengas suerte.

¿Cual es esa manera igual de sencilla?, ¿a través de posicionamiento relativo?

Saludos

Ginno

[Mikmoro]

Tres preguntas:
1.- ¿Cual es tu contenedor principal?
2.- ¿Qué contenedor principal tienes con posición absoluta?
3.- ¿Por qué desactivas el botón derecho?

Una vez más: crea un envoltorio para toda la página dale un tamaño de ancho determinado, ponle posición relativa y ponle margin: 0 auto.

¿Quieres probarlo antes de nada?

[kseso?]

Tienes la solución en la primera respuesta, y entre tonillo, divagaciones y citas de respuestas sin añadir nada a ella estamos es la 15º.

Y ante la posibilidad que tengas que poner en todos y cada uno de tus div´s posición relativa manualmente (casi sucumbo ante la tentación) te recomiendo que resetees tu css, y como bien apuntó Mik en su momento, lo incluyas en él.

Un saludo.

P.D.: ¿Cómo debo interpretar el hecho de que citas completa mi respuesta (la nº #2) y no añades ni una coma, con la propina de haber editado para "alargar mensaje" ? No lo entiendo.

[tamarkov]

estilo.css

BODY {
background : #C0D9D9 url(imagenes/fondo.gif) repeat;
}

#contenedor_general{
width: 90%;
background-color : #ffffff;
margin: 0 auto;
}
---------------------------


index.html

<body>

<!--contenedor general -->
<center>
<div id="contenedor_general">

</div>
</center>


yo con esto he conseguido, que un div central me lo centre en cualquier resolucion, no se muy bien si esto se hace asi, pero a mi por ahora me funciona

Para los que realmente sabeis, de esto, no se pq no poneis un ejemplo asi facil.

pq este que he puesto yo, no estoy seguro que funcione bien, aunque creo que si

salu2

[ginnomillan]

Iniciado por kseso?

Tienes la solución en la primera respuesta, y entre tonillo, divagaciones y citas de respuestas sin añadir nada a ella estamos es la 15º.

Y ante la posibilidad que tengas que poner en todos y cada uno de tus div´s posición relativa manualmente (casi sucumbo ante la tentación) te recomiendo que resetees tu css, y como bien apuntó Mik en su momento, lo incluyas en él.

Un saludo.

P.D.: ¿Cómo debo interpretar el hecho de que citas completa mi respuesta (la nº #2) y no añades ni una coma, con la propina de haber editado para "alargar mensaje" ? No lo entiendo.

Hola, primero: no entiendo que quieres decir, diculpa. Pero no entiendo el mensaje.

[ginnomillan]

Iniciado por Mikmoro

Tres preguntas:
1.- ¿Cual es tu contenedor principal?
2.- ¿Qué contenedor principal tienes con posición absoluta?
3.- ¿Por qué desactivas el botón derecho?

Una vez más: crea un envoltorio para toda la página dale un tamaño de ancho determinado, ponle posición relativa y ponle margin: 0 auto.

¿Quieres probarlo antes de nada?

Hola, gracias por tu respuesta, veamos... para seguirte, dime paso a paso como lo creo, olvidemosnos de otros hilos. Solo dime, yo lo hago y coloco los resultados.

Saludos y agradecido

Ginno

[poison_mayer]

otra vía para solucionar esto del centrado puede ser:
<div style="position:absolute; left:50%; margin-left:-388px; width:776px;">Aqui dentro va todo tu sitio</div>
donde width será el ancho que tu estimes y el margin-left será siempre menos la mitad del valor total de tu ancho como está en el ejemplo que te pongo arriba.

[Mikmoro]

Iniciado por ginnomillan

Hola, gracias por tu respuesta, veamos... para seguirte, dime paso a paso como lo creo, olvidemosnos de otros hilos. Solo dime, yo lo hago y coloco los resultados.

Saludos y agradecido

Ginno

Bueno, no lo he puesto porque pensaba que lo tenías claro.
Crear un envoltorio general significa colocar un div que encierre todo el resto de tu código, es decir, que se abra justo detras de <body>

<body>
<div id="contenedor">...

y se cierre justo antes de terminar el código:

</div>
</body>

Ahora tienes todo el código envueto en un div.
Bien, a ese div ahora le debes dar una propiedades mediante CSS:
1.- ¿Cuánto medirá de ancho? digamos por ejemplo 1000px (width: 1000px)
2.- lo centraremos en la página marcando sus márgenes laterales como auto (margin: 0 auto)
3.- Le pondremos una posición relativa, de manera que todos los elementos que haya dentro de él con posición absoluta, fijarán su posición con repecto a él, no a la página completa (position: relative). Con esto es probable que ahora alguna cosa se descuadre un poco, pero imagino que lo arreglarás fácil retocando left, top, right y bottom.

De manera que en la CSS ese selector quedaría:

#contenedor {width: 1000px;
margin: 0 auto;
position: relative;
}

De esta manera tu página ahora tiene una caja principal centrada, y todas las cajas con posición absoluta se mueven con ella, porque ya no fijan su posición con respecto a la página completa, sino a ese contenedor.

Pruébalo y súbelo, y si algo no va bien dime.

[tamarkov]

perdonar que soy novato, como vas a meter 100px de ancho, y si la web mide 800px

[Mikmoro]

Iniciado por tamarkov

perdonar que soy novato, como vas a meter 100px de ancho, y si la web mide 800px

¿Dónde ves 100? ¿no será 1000?

[tamarkov]

Iniciado por Mikmoro

¿Dónde ves 100? ¿no será 1000?

perdonar es que lo escribi mal, y si la web mide 800 px de ancho, como le vas a poner 1000px?????

de todas formas, siguien los consejos yo he hecho esto.

index.html

<body>

<!--contenedor general -->

<div id="contenedor_general">

</div> <!--fin contenedor_general-->
</body>

estilo.css
#contenedor_general{
width: 1000 px;
background-color : #ffffff;
margin: 0 auto;
position:relative;
}

y no funciona, me aparece una barra blanca (que es el color de la capa) y no sale centrada.

nadie puede poner un codigo, asi de simple, pero que funcione

gracias

[guilledocke]

Yo logro centrarlo horizontalmente de esta manera,

body {
margin: 0px;
}

#prueba {
width: 200px;
height: 200px;
background-color: #FF0000;
margin-left: auto;
margin-right: auto;
}

ahora necesito centrarlo verticalmente tambien, como deberia hacerlo?? gracias

[Mikmoro]

Iniciado por tamarkov

y no funciona, me aparece una barra blanca (que es el color de la capa) y no sale centrada.

Dios, de verdad, cada día estoy un poco más harto de oir "y no funciona".

http://www.araudi.net/forosdelweb/centrado.html

Eso está hecho con este código:

<!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>centrado</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>

Es decir, un envoltorio principal o envoltorio dentro del cual se puede poner lo que sea, que el contenedor se mantendrá centrado en todas las resoluciones.

[Mikmoro]

Iniciado por tamarkov

perdonar es que lo escribi mal, y si la web mide 800 px de ancho, como le vas a poner 1000px?????

¿Y por qué no, si estamos hablando de un envoltorio para centrar? ¿Qué web mide 800px, de cuál estás hablando o dónde lo ves? y por último, ¿no ves que puse 1000px por ejemplo?

[Aresillo]

Sólo quería hacer un paréntesis....
En primer lugar para que dejéis de faltaros porque no viene a cuento, ni es el lugar...
En segundo lugar, querido ginnomillan,
Las respuestas que se te han dado son las correctas y funcionan, si no lo hacen habría que investigar porqué y el cariz que está tomando el tema no ayuda en nada en esta tarea...
He estado mirando cuidadosamente tu código, tanto el html como el css, como ya se ha comentado, todas las capas de la web las has posicionado con la propiedad "absolute", esto quiere decir que da igual donde esté, va a hacer caso a las propiedad de posicionamiento especificadas en su clase...
La solución a tu problema no es tan sencilla como hacer el contenedor y listo... lo único que tienes que hacer es reestructurar la web, sin "position: absolute", te llevará un pelín de tiempo... una vez lo tengas, con hacer el contenedor que se ha comentado ya podrás ver tu web centrada...
Por favor, intenta hacer el paso del absolute a sin position (la que viene por defecto "static"). Si tienes alguna duda respecto a posicionarlo, porque se te descolocarán cosas, abre un tema y te ayudaremos... pero por favor, no sigas posteando en este tema sino es porque ya has hecho el paso y has conseguido centrarlo, sino se centra es por el absolute.

Un saludo!

Aresillo!!

[tamarkov]

Iniciado por Mikmoro

Dios, de verdad, cada día estoy un poco más harto de oir "y no funciona".

http://www.araudi.net/forosdelweb/centrado.html

Eso está hecho con este código:



Es decir, un envoltorio principal o envoltorio dentro del cual se puede poner lo que sea, que el contenedor se mantendrá centrado en todas las resoluciones.

he probado lo que pones y me funciona perfectametne en Firefox, pero en I.E, me lo pega a la izquierda la capa de color gris, existe alguna solucion a esto.

gracias

[Mikmoro]

¿Puedes mostrar una captura de pantalla en la que se vea que estás visitando la dirección de mi web que puse, se vea que es IE6, y que se vea pegado a la izquierda (osea, no centrado, al contrario que esta)?

[nephilim2612]

Hay que ver la paciencia que algunos de vosotros llegáis realmente a tener, ¿os dedicáis a la docencia? Creo que en todos los sistemas educativos se deberían replantear algunas cuestiones de enseñanza y, en lugar de enfatizar tanto en introducir la tecnología desde edades tempranas, dar mucha más importancia a la lectura. Los padres también deberían mostrar a sus hijos la importancia de tener paciencia, escuchar, e intentar resolver los problemas por uno mismo en primer lugar.

Me parece que nos dirigimos hacia una sociedad de "alfabetos" (no sé si existe esa palabra) tecnológicos y analfabetos en el resto de sentidos, lo cual es preocupante.

Menudo hilo con el que habéis lidiado, Mikmoro y kseso? Mi enhorabuena por vuestra dedicación.

[tamarkov]

Iniciado por nephilim2612

Hay que ver la paciencia que algunos de vosotros llegáis realmente a tener, ¿os dedicáis a la docencia? Creo que en todos los sistemas educativos se deberían replantear algunas cuestiones de enseñanza y, en lugar de enfatizar tanto en introducir la tecnología desde edades tempranas, dar mucha más importancia a la lectura. Los padres también deberían mostrar a sus hijos la importancia de tener paciencia, escuchar, e intentar resolver los problemas por uno mismo en primer lugar.

Me parece que nos dirigimos hacia una sociedad de "alfabetos" (no sé si existe esa palabra) tecnológicos y analfabetos en el resto de sentidos, lo cual es preocupante.

Menudo hilo con el que habéis lidiado, Mikmoro y kseso? Mi enhorabuena por vuestra dedicación.

Bueno, lo primero mi enhorabuena a los usuarios que intentan ayudar a otros usuarios en sus dudas , ellos tambien seran ayudados algun dia seguramente, ya que el ser humano nunca podra saber al 100% todo.

Sobre lo de la capa que me la pegaba a la izquierda, no se porque pero ahora lo hace perfecto, es curioso.

Y en cuanto a la sociedad de "alfabetos", o analfabetos, solo dire .. que mas analfabeto es el que no pregunta nada.

un saludo y felices fiestas a todos.