Tema: Cuando se escale el navegador se ajusten el contenido
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/03/2014, 05:17
Avatar de ceaped
ceaped
 
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 9 meses
Puntos: 9
Pregunta Cuando se escale el navegador se ajusten el contenido
Buenos días
Deseo que cuando se escale el navegador la página se escale verticalmente.

¿Cómo hago para que mi .css se ajuste?

Código CSS: 
Ver original
  1. * {
  2.     margin:0; 
  3.     padding:0; 
  4.     border:0;
  5. }
  6.  
  7. html, body {
  8.     font-family: Verdana, Geneva, sans-serif;
  9.     width: auto;
  10.     height: 100%;
  11.     background-color: #FFFFFF;
  12.     }
  13.  
  14. header{
  15.     background-color: transparent;
  16.     color: #FFF;
  17.     width: 98%;
  18.     height: 5.5%;
  19.     margin: 0px auto;
  20.     padding-top: 50px;
  21.     padding-bottom: 50px;
  22.     }
  23.  
  24. /* menu principal */ 
  25. nav{
  26.     position: relative;
  27.     background-color: #E1DDDD;
  28.     color: #FFF;
  29.     width: 98%;
  30.     height: 40%;
  31.     /* display: inline-block; */
  32.     margin-left: auto;
  33.     }
  34.     
  35. .marco_btn_1{
  36.     position: relative;
  37.     float: left;
  38.     background-color: #F5D963;
  39.     color: #FFF;
  40.     width: 32.6%;
  41.     height: 100%;
  42.     /* display: inline-block; */
  43.     margin-top: 0px;
  44.     margin-right: 5px;
  45.     margin-left: 0px;
  46.     margin-bottom: 0px;
  47.     float: left;
  48.     }
  49.     
  50. .marco_btn_1 :hover{
  51.     opacity: .70;
  52.     -moz-opacity: .70;
  53.     filter: alpha(opacity=50);
  54.     }
  55.     
  56. .marco_btn_1 img{
  57.     display: block;
  58.     margin: auto;
  59.     }
  60.     
  61. .marco_btn_2{
  62.     position: relative;
  63.     float: left;
  64.     background-color: #C0F472;
  65.     color: #FFF;
  66.     width: 32.6%;
  67.     height: 100%;
  68.     display: inline-block;
  69.     margin-top: 0px;
  70.     margin-right: 5px;
  71.     margin-left: 5px;
  72.     margin-bottom: 0px;
  73.     }
  74.     
  75. .marco_btn_2 :hover{
  76.     opacity: .70;
  77.     -moz-opacity: .70;
  78.     filter: alpha(opacity=50);
  79.     }
  80.     
  81. .marco_btn_2 img{
  82.     display: block;
  83.     margin: auto;
  84.     }
  85.     
  86. .marco_btn_3{
  87.     position: relative;
  88.     float: left;
  89.     background-color: #7ED0F3;
  90.     color: #FFF;
  91.     width: 32.6%;
  92.     height: 100%;
  93.     display: inline-block;
  94.     margin-top: 0px;
  95.     margin-right: 0px;
  96.     margin-left: 5px;
  97.     margin-bottom: 0px;
  98.     }
  99.     
  100. .marco_btn_3 :hover{
  101.     opacity: .70;
  102.     -moz-opacity: .70;
  103.     filter: alpha(opacity=50);
  104.     }
  105.     
  106. .marco_btn_3 img{
  107.     display: block;
  108.     margin: auto;
  109.     }
  110. /* FIN menu principal */
  111.  
  112.  
  113. section{
  114.     position: relative;
  115.     float: left;
  116.     background-color: #D9ECE1;
  117.     width: 98%;
  118.     height: 10%;
  119.     display: inline-block;
  120.     }
  121.  
  122. article{
  123.     background-color: #0CC;
  124.     width: 98%;
  125.     height: 15%;
  126.     color: #FFF;
  127.     }
  128.  
  129. aside{
  130.     position: relative;
  131.     background-color: #7A7;
  132.     width: 18%;
  133.     height: 55%;
  134.     color: #FFF;
  135.     float: left;
  136.     }
  137.  
  138.  
  139. /* boton bienestar */
  140. .marco_btn_bienestar{
  141.     position: relative;
  142.     float: left;
  143.     background-color: #B1EB83;
  144.     width: 49%;
  145.     height: 100%;
  146.     display: inline-block;
  147.     margin-top: 0px;
  148.     margin-right: 5px;
  149.     margin-left: 0px;
  150.     margin-bottom: 0px;
  151.     }
  152.     
  153. .marco_btn_bienestar img{
  154.     display: block;
  155.     margin: auto;
  156.     padding-top: 25px;
  157.     }
  158. .marco_btn_bienestar :hover{
  159.     opacity: .50;
  160.     -moz-opacity: .50;
  161.     filter: alpha(opacity=25);
  162.     }
  163. /* FIN boton bienestar */
  164.  
  165.  
  166. /* boton investigacion */
  167. .marco_btn_investigacion{
  168.     position: relative;
  169.     float: left;
  170.     background-color: #B1EB83;
  171.     width: 49%;
  172.     height: 100%;
  173.     display: inline-block;
  174.     }
  175.     
  176. .marco_btn_investigacion img{
  177.     display: block;
  178.     margin: auto;
  179.     padding-top: 20px;
  180.     }
  181.     
  182. .marco_btn_investigacion :hover{
  183.     opacity: .50;
  184.     -moz-opacity: .50;
  185.     filter: alpha(opacity=25);
  186.     }
  187. /* FIN boton investigacion */
  188.     
  189.  
  190. /* footer y los logotipos */ 
  191. footer{
  192.     position: relative;
  193.     background-color: #CDF1AB;
  194.     width: 98%;
  195.     height: 5%;
  196.     clear: both;
  197.     padding-top: 50px;
  198.     }
  199.     
  200. .logo_footer_1 img{
  201.     position: absolute;
  202.     top: 50%;
  203.     left: 20%;
  204.     margin-top: -22px;
  205.     margin-left: -22px;
  206.     }
  207.  
  208. .logo_footer_1 a:hover{
  209.     position: absolute;
  210.     top: 50%;
  211.     left: 20%;
  212.     opacity: .50;
  213.    -moz-opacity: .50;
  214.    filter:alpha(opacity=25);
  215.     }
  216.     
  217. .logo_footer_2 img{
  218.     position: absolute;
  219.     top: 50%;
  220.     left: 35%;
  221.     margin-top: -12px;
  222.     margin-left: -22px;
  223.     }
  224.     
  225. .logo_footer_2 a:hover{
  226.     position: absolute;
  227.     top: 50%;
  228.     left: 35%;
  229.     opacity: .50;
  230.    -moz-opacity: .50;
  231.    filter:alpha(opacity=25);
  232.     }
  233.     
  234. .logo_footer_3 img{
  235.     position: absolute;
  236.     top:50%;
  237.     left: 55%;
  238.     margin-top: -12px;
  239.     margin-left: -22px;
  240.     }
  241.     
  242. .logo_footer_3 a:hover{
  243.     position: absolute;
  244.     top: 50%;
  245.     left: 55%;
  246.     opacity: .50;
  247.    -moz-opacity: .50;
  248.    filter:alpha(opacity=25);
  249.     }
  250.     
  251. .logo_footer_4 img{
  252.     position: absolute;
  253.     top:50%;
  254.     left: 75%;
  255.     margin-top: -16px;
  256.     margin-left: -22px;
  257.     }
  258.     
  259. .logo_footer_4 a:hover{
  260.     position: absolute;
  261.     top:50%;
  262.     left: 75%;
  263.     opacity: .50;
  264.    -moz-opacity: .50;
  265.    filter:alpha(opacity=25);
  266.     }
  267. /* FIN footer y los logotipos */ 
  268.  
  269.  
  270. header,section,footer,aside,article,nav{
  271.     /*-webkit-border-radius: 10px;
  272.     -moz-border-radius: 10px;
  273.     border-radius: 10px;*/
  274.     margin: 1%;
  275. }

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario