Tema: dependiendo de la resolucion de pantalla se ajuste el texto
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/08/2012, 00:54
Montes28
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 14 años, 6 meses
Puntos: 6
dependiendo de la resolucion de pantalla se ajuste el texto
hola amigos espero me puedan ayudar necesito que dependiendo de la resolucion de pantalla se ajuste el texto

el documento html contiene un div identificado como grande el cual contiene varios div y en cada div una lista ordenada.

gracias a participantes del foro lo cuales comentaron en otro post los div se ajustan deacuerdo a la pantalla


Código CSS: 
Ver original
  1. <style type="text/css">
  2. body, html { height:100%; 
  3.     margin:0; 
  4.     padding:0;
  5.     width:100%; 
  6.     background-color:silver;
  7.     }
  8.  
  9. #grande{ width:100%;
  10.     height:100%;    
  11.     margin:0;     
  12.     /*text-align:center;*/
  13.     }
  14. #uno{ width:50%;
  15.     display:inline-block;     
  16.     margin:auto;     
  17.     height:50%;    
  18.     /*background-color:blue;*/
  19.     overflow:hidden;
  20.     }
  21. #dos{ width:50%;
  22.     display:inline-block;
  23.     height:50%;    
  24.     /*background-color:green;*/
  25.     overflow:hidden;
  26.     }
  27. #tres{ width:50%;
  28.     display:inline-block;
  29.     height:50%;    
  30.     /*background-color:yellow;*/
  31.     overflow:hidden;
  32.     }
  33. #cuatro{ width:50%;
  34.     display:inline-block;
  35.     height:50%;    
  36.     /*background-color:red;*/
  37.     overflow:hidden;
  38.     } 
  39.  
  40. img{ width:100%; 
  41.      height:100%;
  42.     }
  43. #ticker
  44. {   height:5.5%;
  45.     border: 1px solid #666;
  46.     background: #DDD;
  47.     -webkit-border-radius: 4px;
  48.     -moz-border-radius: 4px;
  49.     border-radius: 4px;
  50.     color: #333;
  51.     font: 13px/16px Arial,Verdana,sans-serif;
  52.     padding: 3px 7px;
  53.     width: 97.5%;
  54. }
  55. #ticker .divider {
  56.     padding: 0 4px;
  57. }
  58. #ticker a, #ticker a:visited
  59. {
  60.     color:#993300;
  61.     text-decoration: none;
  62. }
  63. #ticker a:hover
  64. {
  65.     color: #930;
  66. }



Código CSS: 
Ver original
  1. <body>
  2.     <div id="grande">
  3.     <div id="uno"><div id="ticker" class="newsTicker">
  4.     <a href="#">Volcan Nevado del Ruiz</a>
  5.     <span class="divider">|</span>
  6.     <ul>
  7.         <li><a href="#story1">Perspectiva del Volcán Nevado del Ruiz desde el sector del Rio Azufrado</a></li>
  8.         <li><a href="#story2">OVSM</a></li>
  9.         <li><a href="#story3">Perspectiva del Volcán Nevado del Ruiz desde el sector del Rio Azufrado</a></li>
  10.         <li><a href="#story4">OVSM</a></li>
  11.     </ul>
  12. </div><img src="Persp20120726_055526M.jpg"></div><