Tema: Consejos sobre diseño en resolucion
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/12/2014, 16:02
Avatar de Maverick2786
Maverick2786
 
Fecha de Ingreso: diciembre-2012
Mensajes: 107
Antigüedad: 11 años, 11 meses
Puntos: 1
Consejos sobre diseño en resolucion
Hola a todos, de antemano gracias a todos , veran estoy diseñando una pagina , pero tengo problemas con las resoluciones de diferentes ordenadores.

Imagen 1: http://s2.subirimagenes.com/imagen/p...9sin-ttulo.png

en esta el monitor tiene una resolucion de : 1440*900

Imagen 2: http://s2.subirimagenes.com/imagen/p...2sin-ttulo.png

En esta el monitor tiene una resolucion de : 1024 * 768

El codigo css:
Código CSS: 
Ver original
  1. *{
  2.     margin: 0 auto;
  3.     padding: 0 auto;
  4. }
  5.  
  6. body {
  7.     font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  8. }
  9.  
  10. #contenedora{
  11.     position: absolute;
  12.     width: 100%;
  13.     min-width:  1100px;
  14.     height: 305%;
  15.     min-height: 2000px;
  16.     margin-top: -1%;
  17. }
  18.  
  19.  
  20. /*------------- Empresas -------------*/
  21. #empresas{
  22.     position: absolute;
  23.     width: 100%;
  24.     height: 7%;
  25.     margin-top: 50%;
  26.     background: #E6E6E6;
  27.     box-shadow: 0px 0px 30px #000000;
  28.     z-index: 2;
  29. }
  30.  
  31. #empresas_img img{
  32.     position: absolute;
  33.     width: 100%;
  34.     height: 100%;
  35. }
  36.  
  37. /*------------- Servicios -------------*/
  38. #servicios{
  39.     position: absolute;
  40.     width: 100%;
  41.     height: 49.5%;
  42.     margin-top: 58%;
  43. }
  44.  
  45. /*----- Software ------*/
  46. #servicios_software{    
  47.     position: absolute;
  48.     width: 22%;
  49.     height: 40%;
  50.     min-height: 200px;
  51.     margin-left: 15%;
  52.     margin-top: 1%;
  53.     font-family: 'Roboto', sans-serif;
  54.     z-index: 1;
  55.     border-radius:10px; 
  56.     -moz-border-radius:10px; /* Firefox */ 
  57.     -webkit-border-radius:10px; /* Safari y Chrome */ 
  58.     box-shadow: 0px 0px 20px #000000;
  59.     text-align: center;  
  60. }
  61.  
  62. #software_img{
  63.     padding: 2%;
  64.     width: 100%;
  65. }
  66.  
  67. #software_img img{
  68.     width: 80%;
  69.     height: 85%;
  70. }
  71.  
  72. #software_h5{
  73.     color:black;
  74.     margin-top: 3%;
  75.     font-size: 1.3rem;
  76.     margin-left: -6%;
  77. }
  78.  
  79. #software_h5_ing{
  80.     color:black;
  81.     font-size: 1.3rem;
  82. }
  83.  
  84. #software_txt{
  85.     font-size: 0.8rem;
  86.     color:#424242;
  87.     font-weight: bold;
  88. }
  89.  
  90. #mask_serviciosSoftware{
  91.     position: absolute;
  92.     width: 90%;
  93.     height: 80%;
  94.     margin-left: 3%;
  95.     margin-top: -60%;
  96.     padding: 1%;
  97.     font-size: 0.8rem;
  98.     color:black;
  99.     overflow-y: auto;
  100. }
  101.  
  102. /*----- Web Hosting ------*/
  103. #servicios_webHosting{
  104.     position: absolute;
  105.     width: 22%;
  106.     height: 40%;
  107.     min-height: 200px;
  108.     margin-left: 38.5%;
  109.     margin-top: 1%;
  110.     font-family: 'Roboto', sans-serif;
  111.     z-index: 1;
  112.     border-radius:10px; 
  113.     -moz-border-radius:10px; /* Firefox */ 
  114.     -webkit-border-radius:10px; /* Safari y Chrome */ 
  115.     box-shadow: 0px 0px 20px #000000;
  116.     text-align: center;
  117. }
  118.  
  119. #webHosting_img{
  120.     padding: 2%;
  121.     width: 100%;
  122. }
  123.  
  124. #webHosting_img img{
  125.     margin-top: -8%;
  126.     width: 80%;
  127.     height: 85%;
  128. }
  129.  
  130. #webHosting_h5{
  131.     color:black;
  132.     margin-top: -9%;
  133.     font-size: 1.3rem;
  134. }
  135.  
  136. #webHosting_h5_ing{
  137.     color:black;
  138. }
  139.  
  140. #webHosting_txt{
  141.     text-align: justify;
  142.     font-size: 0.8rem;
  143.     color:#424242;
  144.     font-weight: bold;
  145. }
  146.  
  147. #mask_webHosting{
  148.     position: absolute;
  149.     width: 90%;
  150.     height: 80%;
  151.     margin-left: 3%;
  152.     margin-top: -60%;
  153.     padding: 1%;
  154.     font-size: 0.8rem;
  155.     color:black;
  156.     overflow-y: auto;
  157. }
  158.  
  159. /*----- Cableado Estructurado ------*/
  160. #servicios_cableadoEstructurado{
  161.     position: absolute;
  162.     width: 22%;
  163.     height: 40%;
  164.     min-height: 200px;
  165.     margin-left: 62%;
  166.     margin-top: 1%;
  167.     font-family: 'Roboto', sans-serif;
  168.     z-index: 1;
  169.     border-radius:10px; 
  170.     -moz-border-radius:10px; /* Firefox */ 
  171.     -webkit-border-radius:10px; /* Safari y Chrome */ 
  172.     box-shadow: 0px 0px 20px #000000;
  173.     text-align: center;
  174. }
  175.  
  176. #cableadoEstructurado_img{
  177.     padding: 2%;
  178.     width: 100%;
  179. }
  180.  
  181. #cableadoEstructurado_img img{
  182.     width: 40%;
  183.     height: 30%;
  184.     margin-top: 2%;
  185. }
  186.  
  187. #cableadoEstructurado_h5{
  188.     color:black;
  189.     margin-top: 7%;
  190.     font-size: 1.3rem;
  191.     margin-left: -6%;
  192. }
  193.  
  194. #cableadoEstructurado_txt{
  195.     font-size: 0.8rem;
  196.     color:#424242;
  197.     font-weight: bold;
  198. }
  199.  
  200. #mask_cableadoEstructurado{
  201.     position: absolute;
  202.     width: 90%;
  203.     height: 78%;
  204.     margin-left: 3%;
  205.     margin-top: -61%;
  206.     padding: 2%;
  207.     font-size: 0.8rem;
  208.     color:black;
  209.     overflow-y: auto;
  210. }
  211.  
  212. /*----- Mantenimiento preventivo ------*/
  213. #servicios_mantenimientoPreventivo{
  214.     position: absolute;
  215.     width: 22%;
  216.     height: 40%;
  217.     margin-left: 26%;
  218.     margin-top: 22%;
  219.     font-family: 'Roboto', sans-serif;
  220.     z-index: 1;
  221.     border-radius:10px; 
  222.     -moz-border-radius:10px; /* Firefox */ 
  223.     -webkit-border-radius:10px; /* Safari y Chrome */ 
  224.     box-shadow: 0px 0px 20px #000000;
  225.     text-align: center;
  226. }
  227.  
  228. #mantenimientoPreventivo_img{
  229.     padding: 2%;
  230.     width: 100%;
  231. }
  232.  
  233. #mantenimientoPreventivo_img img{
  234.     width: 50%;
  235.     height: 40%;
  236.     margin-top: 10%;
  237. }
  238.  
  239. #mantenimientoPreventivo_h5{
  240.     color:black;
  241.     font-size: 1.3rem;
  242.     margin-top: 7%;
  243.     margin-left: -6%;
  244. }
  245.  
  246. #mantenimientoPreventivo_txt{
  247.     text-align: justify;
  248.     font-size: 0.8rem;
  249.     color:#424242;
  250.     font-weight: bold;
  251. }
  252.  
  253. #mask_mantenimientoPreventivo{
  254.     position: absolute;
  255.     width: 90%;
  256.     height: 85%;
  257.     margin-top: -70%;
  258.     margin-left: 2%;
  259.     padding: 1%;
  260.     font-size: 0.8rem;
  261.     color:black;
  262.     overflow-y: auto;
  263. }
  264.  
  265. /*----- Soporte tecnico ------*/
  266. #servicios_soporteTecnico{
  267.     position: absolute;
  268.     width: 22%;
  269.     height: 40%;
  270.     margin-left: 51%;
  271.     margin-top: 22%;
  272.     font-family: 'Roboto', sans-serif;
  273.     z-index: 1;
  274.     border-radius:10px; 
  275.     -moz-border-radius:10px; /* Firefox */ 
  276.     -webkit-border-radius:10px; /* Safari y Chrome */ 
  277.     box-shadow: 0px 0px 20px #000000;
  278.     text-align: center;
  279. }
  280.  
  281. #soporteTecnico_img{
  282.     padding: 2%;
  283.     width: 100%;
  284. }
  285.  
  286. #soporteTecnico_img img{
  287.     width: 70%;
  288.     height: 70%;
  289.     margin-top: -3%;
  290. }
  291.  
  292. #soporteTecnico_h5{
  293.     color:black;
  294.     margin-top: -5%;
  295. }
  296.  
  297. #soporteTecnico_txt{
  298.     text-align: justify;
  299.     font-size: 0.8rem;
  300.     color:#424242;
  301.     font-weight: bold;
  302. }
  303.  
  304. #mask_soporteTecnico{
  305.     position: absolute;
  306.     width: 90%;
  307.     height: 90%;
  308.     margin-left: 3%;
  309.     margin-top: -77%;
  310.     padding: 2%;  
  311.     font-size: 0.8rem;
  312.     color:black; 
  313. }
  314.  
  315. #mask_soporteTecnico p{
  316.     text-align:justify;
  317. }
  318.  
  319. }

la parte respectiva de la que hablo seria en servicios-> /*----- Software ------*/

hay una forma en que todas las resoluciones me quede igual, ya lo pase todo a porcentajes y formato rem, la verdad no se que mas hacer

Gracias a todos por su ayuda
Última edición por Maverick2786; 17/12/2014 a las 16:06 Razón: me falta informacion