Foros del Web » Creando para Internet » Diseño web »

[SOLUCIONADO] Consejos sobre diseño en resolucion

 Estas en el tema de Consejos sobre diseño en resolucion en el foro de Diseño web en Foros del Web. 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 (permalink)  
Antiguo 17/12/2014, 16:02
Avatar de 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
  #2 (permalink)  
Antiguo 18/12/2014, 09:01
Avatar de Mariano_Floyd  
Fecha de Ingreso: marzo-2013
Ubicación: Córdoba
Mensajes: 155
Antigüedad: 11 años, 8 meses
Puntos: 14
Respuesta: Consejos sobre diseño en resolucion
Tu quieres que todo te quede igual, ahora imagina que lo ves desde un móvil, con una pantalla mas chica. Todo se veria diminuto, tendrias que aplicarle zoom a la web para poder leer las distintas secciones. Esto no se aconseja para nada, brinda una muy mala experiencia en el usuario y habla de un mal diseño. Para esto se diseña con una tecnica que se llama "responsive web design" o diseño adaptable, en la que basicamente se busca adaptar los diseños a cada resolución. Una de las principales herramientas de las que se hacen uso con esta tecnica, es con las media queries que brinda css.
Te aconsejo leer mas sobre esto, san google tiene todas las respuestas. Saludos
  #3 (permalink)  
Antiguo 18/12/2014, 10:44
Avatar de Maverick2786  
Fecha de Ingreso: diciembre-2012
Mensajes: 107
Antigüedad: 11 años, 11 meses
Puntos: 1
Respuesta: Consejos sobre diseño en resolucion
Si habia leido sobre eso, y decia que utilizara unidades relativas y cosas asi
Gracias por la opinion, pero por lo menos logre solucionarlo para el caso de los ordenarores utilizando:

Código CSS: 
Ver original
  1. /* Desktops and laptops ----------- */
  2. @media only screen 
  3. and (max-width : 1199px) {
  4. /* Styles */
  5. }
  6.  
  7. /* Large screens ----------- */
  8. @media only screen 
  9. and (min-width : 1200px) {
  10. /* Styles */
  11. }

Lo encontre aqui: http://stackoverflow.com/questions/1...ion-is-changed

Gracias a todos

Etiquetas: consejos, css, diseño, imagenes
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 05:04.