Tema: centrar div
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/06/2010, 13:53
Avatar de Most
Most
 
Fecha de Ingreso: marzo-2009
Mensajes: 642
Antigüedad: 15 años, 1 mes
Puntos: 6
centrar div

Hola, como puedo hacer para que la web se me centre en todas las resoluciones..??

por que estoy usando la etiqueta center, y aling: center; etc...

y nada no se me cuadra :S

aqui el codigo css por si se necesita ver:

Código CSS:
Ver original
  1. img.avatar{width: 50px; height: 50px;}
  2.  
  3. body {align:center;}
  4.  
  5.  
  6.  
  7. .enlace_imagen img {border:0}
  8.  
  9. .boton{
  10.   background-image:url(iniciar-sesion.png);
  11.   background-repeat:no-repeat;
  12.   height:21px;
  13.   width:102px;
  14.   background-position:center;
  15. }
  16.  
  17. #Layer-1 {
  18.   position: absolute;
  19.   left: +2px;
  20.   top: +2038px;
  21.   width: 1003px;
  22.   height: 31px;
  23.   z-index: 1;
  24.   background:url(pie-de-paguina.png);
  25. }
  26.  
  27. #Layer-2 {
  28.   position: absolute;
  29.   left: +831px;
  30.   top: +226px;
  31.   width: 160px;
  32.   height: 216px;
  33.   z-index: 2;
  34.   background:url(categorias.png);
  35. }
  36.  
  37.  
  38. #Layer-3 {
  39.   position: absolute;
  40.   left: +11px;
  41.   top: +905px;
  42.   width: 788px;
  43.   height: 222px;
  44.   z-index: 3;
  45.   background:url(contenido.png);
  46. }
  47.  
  48. #Layer-4 {
  49.   position: absolute;
  50.   left: +11px;
  51.   top: +1463px;
  52.   width: 788px;
  53.   height: 222px;
  54.   z-index: 4;
  55.   background:url(contenido.png);
  56. }
  57.  
  58. /* You named this layer Forma 32 copia 5 */
  59. #Layer-5 {
  60.   position: absolute;
  61.   left: +11px;
  62.   top: +1747px;
  63.   width: 788px;
  64.   height: 222px;
  65.   z-index: 5;
  66.   background:url(contenido.png);
  67. }
  68.  
  69. /* You named this layer Forma 32 copia 3 */
  70. #Layer-6 {
  71.   position: absolute;
  72.   left: +11px;
  73.   top: +1183px;
  74.   width: 788px;
  75.   height: 222px;
  76.   z-index: 6;
  77.   background:url(contenido.png);
  78. }
  79.  
  80. /* You named this layer Forma 32 */
  81. #Layer-7 {
  82.   position: absolute;
  83.   left: +10px;
  84.   top: +622px;
  85.   width: 788px;
  86.   height: 222px;
  87.   z-index: 7;
  88.   background:url(contenido.png);
  89. }
  90.  
  91. /* You named this layer Forma 32 copia */
  92. #Layer-8 {
  93.   position: absolute;
  94.   left: +11px;
  95.   top: +225px;
  96.   width: 788px;
  97.   height: 222px;
  98.   z-index: 8;
  99.   background:url(contenido.png);
  100. }
  101.  
  102. /* You named this layer Forma 34 */
  103. #Layer-9 {
  104.   position: absolute;
  105.   left: +830px;
  106.   top: +465px;
  107.   width: 162px;
  108.   height: 1547px;
  109.   z-index: 9;
  110.   background:url(publiidad.png);
  111. }
  112.  
  113. /* You named this layer Tope Derecha */
  114. #Layer-10 {
  115.   position: absolute;
  116.   left: +1004px;
  117.   top: +0px;
  118.   width: 2px;
  119.   height: 2069px;
  120.   z-index: 10;
  121.   background:url(tope.png);
  122. }
  123.  
  124. /* You named this layer Tope Izquierda */
  125. #Layer-11 {
  126.   position: absolute;
  127.   left: +0px;
  128.   top: -1px;
  129.   width: 2px;
  130.   height: 2070px;
  131.   z-index: 11;
  132.   background:url(tope.png);
  133.  
  134. }
  135.  
  136. /* You named this layer Pestaa */
  137. #Layer-12 {
  138.   position: absolute;
  139.   left: +2px;
  140.   top: +0px;
  141.   width: 1002px;
  142.   height: 169px;
  143.   z-index: 12;
  144.   background:url(encabezado.png);
  145. }
  146.  
  147. /* You named this layer Panel  de  Usuario */
  148. #Layer-13 {
  149.   position: absolute;
  150.   left: 746px;
  151.   top: 50px;
  152.   width: 130px;
  153.   height: 11px;
  154.   z-index: 13;
  155.   background:url(panel-usuario-texto.png);
  156. }
  157.  
  158. /* You named this layer El  seridor  de  esta  web  no */
  159. #Layer-14 {
  160.     position: absolute;
  161.     left: 289px;
  162.     top: 16px;
  163.     width: 435px;
  164.     height: 15px;
  165.     z-index: 14;
  166.     background:url(pie-texto.png);
  167. }
  168.  
  169. /* You named this layer Los  Ultimos  Estrenos */
  170. #Layer-15 {
  171.   position: absolute;
  172.   left: 325px;
  173.   top: 12px;
  174.   width: 152px;
  175.   height: 11px;
  176.   z-index: 15;
  177.   background:url(estrenos.png);
  178. }
  179.  
  180. /* You named this layer Musica */
  181. #Layer-16 {
  182.   position: absolute;
  183.   left: 315px;
  184.   top: 13px;
  185.   width: 162px;
  186.   height: 12px;
  187.   z-index: 16;
  188.   background:url(musica-texto.png);
  189. }
  190.  
  191. /* You named this layer Software */
  192. #Layer-17 {
  193.   position: absolute;
  194.   left: 292px;
  195.   top: 13px;
  196.   width: 205px;
  197.   height: 16px;
  198.   z-index: 17;
  199.   background:url(programas-texto.png)
  200. }
  201.  
  202. /* You named this layer Juegos */
  203. #Layer-18 {
  204.   position: absolute;
  205.   left: 307px;
  206.   top: 13px;
  207.   width: 181px;
  208.   height: 16px;
  209.   z-index: 18;
  210.   background:url(juegos-texto.png);
  211. }
  212.  
  213. /* You named this layer Series */
  214. #Layer-19 {
  215.   position: absolute;
  216.   left: 261px;
  217.   top: 13px;
  218.   width: 266px;
  219.   height: 14px;
  220.   z-index: 19;
  221.   background:url(series-texto.png);
  222. }
  223.  
  224. /* You named this layer Peliculas */
  225. #Layer-20 {
  226.   position: absolute;
  227.   left: 299px;
  228.   top: 12px;
  229.   width: 193px;
  230.   height: 12px;
  231.   z-index: 20;
  232.   background:url(ultimas-peliculas.png);
  233. }
  234.  
  235. /* You named this layer Categorias */
  236. #Layer-21 {
  237.   position: absolute;
  238.   left: 42px;
  239.   top: 16px;
  240.   width: 76px;
  241.   height: 15px;
  242.   z-index: 21;
  243.   background:url(categorias-texto.png);
  244. }
  245.  
  246. /* You named this layer Publicidad */
  247. #Layer-22 {
  248.   position: absolute;
  249.   left: 44px;
  250.   top: 17px;
  251.   width: 73px;
  252.   height: 11px;
  253.   z-index: 22;
  254.   background:url(publidad-texto.png);
  255. }
  256.  
  257. /* You named this layer todoenlacesorg */
  258. #Layer-23 {
  259.   position: absolute;
  260.   left: 77px;
  261.   top: 66px;
  262.   width: 378px;
  263.   height: 48px;
  264.   z-index: 23;
  265.   background:url(texto-encabeazdo-1.png);
  266. }
  267.  
  268. /* You named this layer PELICULAS  -  SERIES  -  JUEGOS */
  269. #Layer-24 {
  270.   position: absolute;
  271.   left: 90px;
  272.   top: 103px;
  273.   width: 338px;
  274.   height: 10px;
  275.   z-index: 24;
  276.   background:url(texto-encabezado-2.png);
  277. }
  278.  
  279. #Layer-25 {
  280. background:url("publicidad-contenido.png") repeat scroll 0 0 transparent;
  281. height:90px;
  282. left:26px;
  283. padding:8px 14px 9px;
  284. position:absolute;
  285. text-align:center;
  286. top:491px;
  287. width:729px;
  288. z-index:13;
  289. }
  290.  
  291. #Layer-26 {
  292.     position: absolute;
  293.     left: +664px;
  294.     top: +44px;
  295.     width: 294px;
  296.     height: 118px;
  297.     z-index: 1;
  298.     background:url(panel-usuario.png);
  299.     text-align: center;
  300. }
  301.  
  302. #Layer-27 {
  303.     position: absolute;
  304.     left: +664px;
  305.     top: +44px;
  306.     width: 294px;
  307.     height: 118px;
  308.     z-index: 1;
  309.     background:url(panel-usuario-login.png);
  310.     text-align: center;
  311. }
  312.  
  313. /* Here are some examples of how you might want to change the
  314.  * look and behavior of the links on your page.  Some examples for
  315.  * further customization are included in comments.  */
  316. a {
  317.   cursor: pointer;
  318.   outline: none;
  319. }
  320. a:link { color: #F88; }
  321. a:visited { color: #F88; }
  322. a:hover {
  323.   color: #F00;
  324.   /* text-decoration: underline; */
  325.   /* font-weight: bold; */
  326. }
  327.  
  328. #Layer-12 #Layer-26 table tr th table tr th {
  329.     text-align: left;
  330. }


he usado esto pero solo se me centra en XXXX x XXXX resolucion, si pongo la resolucion mas pequeña se me descuadra...:

Código CSS:
Ver original
  1. .box1 {
  2.     position: absolute;
  3.     margin-left: auto;
  4.     margin-right: auto;
  5.     left:0;
  6.     right:90px;
  7.     width:80px;
  8.  
  9. }