Foros del Web » Creando para Internet » CSS »

por que se ve todo desordenado?

Estas en el tema de por que se ve todo desordenado? en el foro de CSS en Foros del Web. Hola, quisiera saver x que se ve todo esto desordenado? de esta forma, y eso que tengo todas las medidas en el css: CSS: @import ...
  #1 (permalink)  
Antiguo 06/06/2010, 19:22
Avatar de Most  
Fecha de Ingreso: marzo-2009
Mensajes: 642
Antigüedad: 8 años, 9 meses
Puntos: 6
por que se ve todo desordenado?

Hola, quisiera saver x que se ve todo esto desordenado? de esta forma, y eso que tengo todas las medidas en el css:




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

Hola Most:

Probablemente no tengas un contenedor para tus cajas

Trata de usar siempre un reset, aunque sea uno básico como este
*{margin:0; padding:0; /*y si quieres también position:relative;*/}

Luego crea un contenedor, por ejemplo: <div id="content">(aca dentro todas tus cajas)</div> y aplicale position:relative;
Si lo quieres centrar aplícale margin:0 auto; y si quieres que el centrado funcione también para ie6 aplícale text-align_left; y a su padre (que puede ser body) aplícale text-align:center;

Con esto ya te habrás ordenado bastante, espero te sea útil, un saludo
  #3 (permalink)  
Antiguo 07/06/2010, 07:33
Avatar de Most  
Fecha de Ingreso: marzo-2009
Mensajes: 642
Antigüedad: 8 años, 9 meses
Puntos: 6
Respuesta: por que se ve todo desordenado?

ok gracias

Etiquetas: todo
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 10:12.