¿Cómo centrar una web y como verlo en diferentes navegadores?

somaria · #1 (**permalink**) 04/07/2010, 17:58

Hola, deseo su ayuda, ¿Cómo puedo hacer para que una web esté centrada y expandida en todo el monitor?, si el monitor es grande, se ve la web a la izquierda y reducida de tamaño, pero si el monitor es pequeño la web se ve centrada y grande No soy experta solo soy novata, si fueran tan amables en guiarme les agradecería. Finalmente abusando de ustedes una pregunta más ¿Cómo hago para que mi web sea vista en todos los navegadores que código se pone?
Gracias por sus respuestas.

La web contiene :
Flash, PHP, Html

Nemutagk · #2 (**permalink**) 04/07/2010, 21:50

Mmmmm, es difícil dar una respuesta consista a tus dudas, para la primera, no tiene caso centrar una página si al final, vas a crear un diseño liquido que se adapte a la resolución, ahora, esto tiene sus ventajas así como sus desventajas (según mi opinión y experiencia tiene mas desventajas que ventajas =/), porque, pues porque hoy en día hay personas que tiene resoluciones realmente altas y lo que sucede en estos casos es que todo tu contenido se descuadra y se ve realmente mal o quedan espacios muy grandes y con el contenido muy separado... si aun así deseas hacerlo, simplemente mete todo tu contenido en un DIV con el código css "width:100%;height:100%" y el DIV llenará toda la pantalla sin importar la resolución, ahora, si deseas que tu contenido quede centrado, solo mete de nuevo el contenido en un DIV y agrega el código css "width:990px;margin:auto", el "width" puedes poner el tamaño que quieras, el de 990px es recomendable para que se vea bien (y llene toda la pantalla en una resolución de 1024)...

Actualización: Ya que por lo visto no se nota el código lo presento aquí

Para llenar una pantalla con un div solo necesitas hacer lo siguiente

Código HTML:

Ver original<div style="width:100%;height:100%">
<--! Contentenido de la p&#225;gina -->
</div>

Para centrar una página sin importar la resolución

Código HTML:

Ver original<--! Para centrar una p&#225;gina creada para 1024 -->
<div style="width: 990px; margin:auto">
<--! Contentenido de la p&#225;gina -->
</div>

Solo cambia el "990px" para el ancho de tu página (tal como lo diseñaste), o bien, solo indica el ancho que deseas que tenga el div que centrará el contenido

Para tu segunda pregunta es tan vaga la respuesta que es como si te dijera, quiero una llave para poder encender todos los coches existentes... como puedes imaginar, no hay un código que haga tu página compatible con todos los navegadores, para poder lograrlo es necesario que en primera, tu página tenga un código html (de preferencia xhtml) válido (sin errores), y un buen css también valido, después que logras esto, tienes que ver, cuales son los problemas que se presentan en cada navegador, y después generar un "hack" en css o javascript para lograr igualar la vista en el navegador que presenta problemas, obviamente, cada navegador (y a su vez, cada versión) tienen sus problemas y sus respectivas soluciones, es casi imposible decirte como arreglarlo sin ver el problema, sin tener el código de la pagina (html y css) y sin saber en que navegador/versión se te presenta

Nemutagk · #3 (**permalink**) 04/07/2010, 22:09

Para eso abre otro hilo en el foro, no desvíes el tema, si no vas a aportar algo, mejor abre otro tema y hay los demás foristas podrán ayudarte, y de paso lee las normas del foro...

De todas formas, bienvenido al foro >.<

freesoftwarrior · #4 (**permalink**) 04/07/2010, 22:10

para centrar un diseño yo utilizo este simple script

Cita:

<html>
<head>
<title>Untitled</title>
</head>

<body>

<script>
LeftPosition=(screen.width)?(screen.width-1000)/2:100;
document.write("<div style='position:absolute; top:0px; width:1000px; z-index:1; left: "+LeftPosition+"px;'>");
</script>

... EL CÓDIGO DE TU DISEÑO

</div>

</body>
</html>

ahora, para centrar el diseño debes tener en cuenta el ancho del mismo.... en el ejemplo es de 1000px (revisa el código y encontrarás el valor que menciono), de suerte que si el diseño tiene 800px de ancho entonces simplemente lo reemplazas

Para más información sobre el ancho de un web puedes revisar este artículo (esta en inglés pero es comprensible)

http://www.w3schools.com/browsers/browsers_display.asp

Sobre como hacer para que se vea igual en todos los browsers..... bueno, no hay comando ni scipt ni nada por el estilo.... simplemente hay que revisar tags y CSS standar y nada más..... evitar los comandos "especiales".... también sirve usar frameworks como jQuery...

Nemutagk · #5 (**permalink**) 04/07/2010, 22:12

Compañero @freesoftwarrior, no es por menospreciar tu aportación ni mucho menos, pero, ese código hace lo mismo que el código que publique, solo que muchísimo mas rebuscado y complejo... tal y como dice el refrán "eso, es buscarle 3 pies al gato" >.<

freesoftwarrior · #6 (**permalink**) 05/07/2010, 00:14

honestamente no me había percatado de eso...... y si me permites la franqueza no veo eso de buscar 3 pies al gato ni tampoco es mucho más rebuscado, es simple javascript... opciones, simplemente son opciones.......

jomaruro · #7 (**permalink**) 07/07/2010, 14:59

Hola:

Cita:

Iniciado por freesoftwarrior

honestamente no me había percatado de eso...... y si me permites la franqueza no veo eso de buscar 3 pies al gato ni tampoco es mucho más rebuscado, es simple javascript... opciones, simplemente son opciones.......

Parece que el comentario de Nemutagk te ha molestado un poco y, la verdad, estoy más de acuerdo con él que contigo. ¿Buscar tres pies al gato? Ya me dirás, un script javascript en lugar de 2 palabras ¿No es complicar el código?

Además, y si el usuario tiene desactiavado el javascript ¿Se centra? No es muy normal, pero puede darse el caso y también hay que tenerlo en cuenta.

Saludos.

somaria · #8 (**permalink**) 07/07/2010, 16:50

Gracias por los comentarios, pero no peleen por favor, ya solucione el problema de centrado.