Centrar mi página web en todos los tamaños de pantalla

  • Autor Autor mmusber
  • Fecha de inicio Fecha de inicio
M

mmusber

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
hola estoy intentando centrar todo mi web ,para que sin importar la definicion del momitor quede centrada,tengo todo dentro de una tabla que contiene los div,mi fuerte es el diseño,no la programacion,por eso este Tema
Cuando tenias una tabla con el center era suficiente,alguien me puede dar una mano con esto por favor?
adjunto parte del codigo,para ser mas Claro
Muchas gracias

<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Save for Web Styles (index.psd) -->
<style type="text/css">
<!--

#Tabla_01 {
position:absolute;
left:0px;
top:0px;
width:1200px;
height:1374px;
}

#index-01_ {
position:absolute;
left:0px;
top:0px;
width:1200px;
height:237px;
}

#index-02_ {
position:absolute;
left:0px;
top:237px;
width:167px;
height:1137px;
}

#index-03_ {
position:absolute;
left:167px;
top:237px;
width:867px;
height:300px;
}

#index-04_ {
position:absolute;
left:1034px;
top:237px;
width:166px;
height:987px;
}

#index-05_ {
position:absolute;
left:167px;
top:537px;
width:205px;
height:45px;
}

#index-06_ {
position:absolute;
left:372px;
top:537px;
width:165px;
height:45px;
}

#index-07_ {
position:absolute;
left:537px;
top:537px;
width:264px;
height:45px;
}

#index-08_ {
position:absolute;
left:801px;
top:537px;
width:84px;
height:45px;
}

#index-09_ {
position:absolute;
left:885px;
top:537px;
width:149px;
height:45px;
}

#index-10_ {
position:absolute;
left:167px;
top:582px;
width:552px;
height:247px;
}

#index-11_ {
position:absolute;
left:719px;
top:582px;
width:315px;
height:59px;
}

#index-12_ {
position:absolute;
left:719px;
top:641px;
width:315px;
height:188px;
}

#index-13_ {
position:absolute;
left:167px;
top:829px;
width:552px;
height:48px;
}

#index-14_ {
position:absolute;
left:719px;
top:829px;
width:315px;
height:48px;
}

#index-15_ {
position:absolute;
left:167px;
top:877px;
width:867px;
height:230px;
}

#index-16_ {
position:absolute;
left:167px;
top:1107px;
width:632px;
height:217px;
}

#index-17_ {
position:absolute;
left:799px;
top:1107px;
width:57px;
height:41px;
}

#index-18_ {
position:absolute;
left:856px;
top:1107px;
width:165px;
height:41px;
}

#index-19_ {
position:absolute;
left:1021px;
top:1107px;
width:13px;
height:267px;
}

#index-20_ {
position:absolute;
left:799px;
top:1148px;
width:57px;
height:19px;
}

#Masterx20conx20Sectores-17_ {
position:absolute;
left:856px;
top:1148px;
width:160px;
height:19px;
}

#index-22_ {
position:absolute;
left:1016px;
top:1148px;
width:5px;
height:19px;
}

#index-23_ {
position:absolute;
left:799px;
top:1167px;
width:57px;
height:37px;
}

#index-24_ {
position:absolute;
left:856px;
top:1167px;
width:165px;
height:19px;
}

#Masterx20conx20Sectores-21_ {
position:absolute;
left:856px;
top:1186px;
width:160px;
height:18px;
}

#index-26_ {
position:absolute;
left:1016px;
top:1186px;
width:5px;
height:18px;
}

#index-27_ {
position:absolute;
left:799px;
top:1204px;
width:57px;
height:37px;
}

#index-28_ {
position:absolute;
left:856px;
top:1204px;
width:165px;
height:19px;
}

#index-29_ {
position:absolute;
left:856px;
top:1223px;
width:165px;
height:18px;
}

#index-30_ {
position:absolute;
left:1034px;
top:1224px;
width:118px;
height:150px;
}

#index-31_ {
position:absolute;
left:1152px;
top:1224px;
width:48px;
height:78px;
}

#index-32_ {
position:absolute;
left:799px;
top:1241px;
width:7px;
height:64px;
}

#Masterx20conx20Sectores-28_ {
position:absolute;
left:806px;
top:1241px;
width:210px;
height:56px;
}

#index-34_ {
position:absolute;
left:1016px;
top:1241px;
width:5px;
height:56px;
}

#index-35_ {
position:absolute;
left:806px;
top:1297px;
width:50px;
height:8px;
}

#index-36_ {
position:absolute;
left:856px;
top:1297px;
width:165px;
height:8px;
}

#index-37_ {
position:absolute;
left:1152px;
top:1302px;
width:48px;
height:72px;
}

#index-38_ {
position:absolute;
left:799px;
top:1305px;
width:118px;
height:69px;
}

#index-39_ {
position:absolute;
left:917px;
top:1305px;
width:93px;
height:34px;
}

#index-40_ {
position:absolute;
left:1010px;
top:1305px;
width:11px;
height:69px;
}

#index-41_ {
position:absolute;
left:167px;
top:1324px;
width:272px;
height:50px;
}

#index-42_ {
position:absolute;
left:439px;
top:1324px;
width:185px;
height:21px;
}

#index-43_ {
position:absolute;
left:624px;
top:1324px;
width:10px;
height:21px;
}

#index-44_ {
position:absolute;
left:634px;
top:1324px;
width:116px;
height:21px;
}

#index-45_ {
position:absolute;
left:750px;
top:1324px;
width:34px;
height:21px;
}

#index-46_ {
position:absolute;
left:784px;
top:1324px;
width:15px;
height:50px;
}

#index-47_ {
position:absolute;
left:917px;
top:1339px;
width:93px;
height:35px;
}

#index-48_ {
position:absolute;
left:439px;
top:1345px;
width:345px;
height:29px;
}

-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- Save for Web Slices (index.psd) -->
<div id="Tabla_01">
<div id="index-01_">
<img id="index_01" src="images/index_01.jpg" width="1200" height="237" alt="" />
</div>
 
Agrega a la tabla la propiedad margin: auto;

HTML: 
#Tabla_01 {
position:absolute;
left:0px;
top:0px;
width:1200px;
height:1374px;
margin:auto;
}
 
Lo pruebo y te comento.
Gracias por tu respuesta
Saludos
 
Ah, otra cosa que se me paso, no habia visto que tienes:

HTML: 
position:absolute;
left:0px;
top:0px;

en el css de la tabla. Esto lo que hace es poner siempre la tabla hasta la izquierda y arriba, por lo que si quieres que este centrada tienes que quitar esas propiedades del estilo de esa tabla, si no lo quitas no se aplicara la propiedad margin: auto.

Saludos
 
Hola Saque todo y deje el codigo tal cual,es mas lo mire desde el css con el dreamveawer,pero no me funciona.
no se que estare haciendo mal alguna idea?
Gracias por todo
 
Puedes pasarme el link del sitio? Así puedo checarlo y te digo que puedes hacer.
 
Hola, el problema es la posición. Si la pones absoluta es muy probable que no funcione como quieres. Intenta con esto:

<div class="contenedor">
Tu contenido
</div>

/*Tu clase contenedor*/
.contenedor {width:980px; margin:0 auto /*lo centra para ff, chrome, safari*/; .margin:0 10% /*lo centra para IE*/;}
Hacer clic para expandir...

Espero te sea de utilidad, saludos!
 
hola Mario Mx,la verdad que lo hice andar a medias,no porque este mal lo que me pasaste si no por falta de conocimiento,logro centrar solo parte de los div,entre <div class="contenedor"> y</div> pongo todos mis div?
como tendria que armar el codigo,me podes ayudar por favor ?Gracias
 
Hola, deja la URL de la web así le hecho un mirada, que se pueden hacer los cambios en tiempo real y ver si funcan de forma fácil 😀

Saludos
 
En Tabla_01 del CSS, dejala así:

HTML: 
#Tabla_01 {
    position:absolute;
 margin: 0% 20% 0% 20%;
    width:1200px;
    height:1374px;
}

En Chrome ahí, se me ve bien.

Ahí la edité, el align estaba al pedo
 
:ambivalence: el problema es que en todos los divs tienes:

HTML: 
position: absolute;
top: x;
left: x;

Eso no te va a dejar centrarlo. No se con que herramienta maquetaste el sitio pero yo recomendaría maquetarlo de nuevo.


Facundo dijo:
En Tabla_01 del CSS, dejala así:

HTML: 
#Tabla_01 {
    position:absolute;
 margin: 0% 20% 0% 20%;
    width:1200px;
    height:1374px;
}

En Chrome ahí, se me ve bien.

Ahí la edité, el align estaba al pedo
Hacer clic para expandir...

Si yo lo pruebo no se me acomoda con eso, de hecho se me va más a la derecha que centrado.
 
Última edición:
Entonces es cuestión de jugar un poco con los números. Pero la verdad, es que convendría hacerlo de nuevo todo 😛 Realizar webs con programas como el dreanwaver genera feo código la verdad.
 
Hola @mmusber,

sin problema, entré a ver la imagen del link que subiste a tu web. Supongo que el el código es para la botonera, te anexo este Enlace eliminadopara que puedas descargar un paquete con el código y las imagenes (solo tendrás que sustituirlas por las tuyas). Espero te sea de utilidad. Por cierto, me gustó el diseño de la web.

Saludos!
 
Gracias a todos por responder,los mantengo al tanto

Ante todo gracias a todos, les cuento como me ha ido.
-Facundo tu codigo anda,pero depende de la resolucion de la pantalla en que lugar queda.
-Vallel mi fuerte es el photoshop y el diseno grafico,la verdad que acepto sugerencias de con que maquetar mi diseno para pasar de photoshop a un editor que ne permite usar divs) .
-Mario MX,como harias un contenedor para toda la web? ,pongo la tabla principal dentro de este contenedor?
Muchas Gracias por su tiempo a todos.Mas que son nuevo en el Foro,y le estoy tomando la mano.
 
Última edición:
Marce, en el body estas declarando el fondo blanco, cuando se terminen las imágenes, el fondo será blanco!!!

Agrega una imagen más en tu carpeta con el color de fondo y remplaza el siguiente codigo:

Insertar CODE, HTML o PHP: 
 <body style="background-color:#FFFFFF;">
por
Insertar CODE, HTML o PHP: 
 <body style=" background: url(imágenes/forjados_01111.JPG); margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">

forjados_01111.JPG= es tu nueva imagen con el fondo.

Espero que te sirva!!
:encouragement:
 
TE VEO POR TODOS LADOS! jajajaj GRacias

Yo quiero hacer lo que HIzo MArio MX,pero con todo la web
Gracias Saludos
 
Bueno mira, para solucionar esto y mantener el código que tienes puedes envolver todo el contenido en este div:

HTML: 
<div style="position:relative; margin:auto; width: 1200px;">  <!-- Este es el div que hay que agregar -->
   <div id="tabla_01">   <!-- Este es tu div que envuelve todo tu contenido -->
   .
   .
   .
   </div>
</div>

Ya lo probé en el link que publicaste y si funciona 🙂.

Saludos
 
Última edición:
Vallel Perfecto,si funciona Gracias.
Amigo Econsorte..QUE MAS?? Gracias por todo tu trabajo.
Voy a jugar con todas las demas web que tengo,y les digo.
Saludos :🙂
 
Un gusto haber ayudado 🙂

Saludos
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

chita
Tamaños de pantalla recomendados por Wordpress para dispositivos
Respuestas
1
Visitas
332
devseo
devseo
C
¿Cómo hacer que la etiqueta Viewport se adapte a diferentes tamaños de pantalla?
Respuestas
2
Visitas
1K
neburor
N
A
Cómo centrar una página web existente
Respuestas
11
Visitas
2K
aleabal
A
Atrás
Arriba