Tema: escalar contenedor a resolucion y centrar capas
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/09/2012, 08:40
belap
 
Fecha de Ingreso: septiembre-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Pregunta escalar contenedor a resolucion y centrar capas
Buenas a todos, tengo un problemilla con una web que estoy haciendo, el caso es que necesito que el contenedor se ajuste a la resolución escalando la imagen (no de fondo) que hay en el o dejando margenes a los 4 lados si es demasiado grande la pantalla, pero no se como hacerlo. Os dejo el codigo por si alguien puede ayudarme.
Tambien tengo problemas con los div "frasecorta" y "fraselarga" quiero que esten siempre centrados pero ahora se me pegan a la izquierda, quiero que esten como la cabecera.

Gracias de antemano.

Código HTML: 
Ver original
  1. <body>
  2.     <div id="contenedor">
  3.         <div id="cabecera">
  4.             <ul>
  5.                 <li class="inicio"><a href="index.html" title="Inicio">Inicio</a></li>
  6.                 <li class="menu"><a href="contacto.html" title="Contacto">Contacto</a></li>                
  7.                 <li class="menu"><a href="galeria/galeria.html" title="Galería">Galeria</a></li>
  8.                 <li class="menu"><a href="eventos.html" title="Eventos">Eventos</a></li>
  9.             </ul>
  10.         </div>
  11.         <div id="centro">
  12.             
  13.                     <a href="#"><img src="images/imagen.jpg"  border="0" style="box-shadow: 2px 2px 5px black"/></a>
  14.                 
  15.             </div>
  16.         </div>
  17.         <div id="frasecorta">
  18.             <p>FRASE CORTA</p>
  19.         </div>
  20.     </div>
  21.     <div id="fraselarga">
  22.         <p>Esta es la frase larga</p>
  23.     </div>
  24.     <div id="pie">
  25.         <p>Pie de página</p>
  26.     </div>
  27. </body>

Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3. #contenedor{
  4.     position:relative;
  5.     height:100%;
  6. }
  7.  
  8. #cabecera{
  9.     border:#000;
  10.     border-width:2px;
  11.     border-style:solid;
  12.     
  13.     min-width:980px;
  14.     max-width:1200px;
  15.     height:100px;
  16.     margin-left:auto;
  17.     margin-right:auto;
  18. }
  19.  
  20. .inicio{
  21.     text-decoration:none;
  22.     list-style:none;
  23.     font-family:"Trebuchet MS", Geneva, sans-serif;
  24.     float:left;
  25.     font-size:67px;
  26.     font-weight:bold;
  27. }
  28.  
  29. .inicio a{
  30.     text-decoration:none;
  31.     color:#000;
  32. }
  33.  
  34. .inicio a:hover{
  35.     text-decoration:none;
  36.     color:#000;
  37. }
  38.  
  39. .menu{
  40.     text-decoration:none;
  41.     list-style:none;
  42.     font-family:maiandra_gdregular, Geneva, sans-serif;
  43.     font-size:13px;
  44.     font-weight:bold;
  45.     float:right;
  46.     margin-left:10px;
  47. }
  48.  
  49. .menu a{
  50.     text-decoration:none;
  51.     color:#999;
  52. }
  53.  
  54. .menu a:hover{
  55.     text-decoration:none;
  56.     color:#000;
  57. }
  58.  
  59. #centro{
  60.     border:#000;
  61.     border-width:2px;
  62.     border-style:solid;
  63.     min-width:980px;
  64.     max-width:1200px;
  65.     margin-left:auto;
  66.     margin-right:auto;
  67.     text-align:center;
  68. }
  69.  
  70. #frasecorta{
  71.     border:#000;
  72.     border-width:2px;
  73.     border-style:solid;
  74.     
  75.     min-width:980px;
  76.     max-width:1200px;
  77.     height:100px;
  78.     margin-left:auto;
  79.     margin-right:auto;
  80.     
  81.     font-family:maiandra_gdregular, Geneva, sans-serif;
  82.     font-size:30px;
  83.     font-weight:bold;
  84.     text-align:center;
  85.     position:absolute;
  86.     bottom:0px;
  87. }
  88.  
  89. #fraselarga{
  90.     border:#000;
  91.     border-width:2px;
  92.     border-style:solid;
  93.     
  94.     min-width:980px;
  95.     max-width:1200px;
  96.     height:100px;
  97.     left:auto;
  98.     right:auto;
  99.     
  100.     text-align:justify;
  101.     font-family:maiandra_gdregular, Geneva, sans-serif;
  102.     font-size:17px;
  103.     color:#808080;
  104.     font-weight:normal;
  105.     position:absolute;
  106.     bottom:-102px;
  107. }
  108.  
  109. #pie{
  110.     width:99%;
  111.     background-color:#000;
  112.     text-align:center;
  113.     position:absolute;
  114.     bottom:-147px;
  115. }
  116.  
  117. #pie, #pie a, #pie a:hover{
  118.     font-family:maiandra_gdregular, Verdana, sans-serif;
  119.     font-size:17px;
  120.     color:#FFF;
  121.     font-weight:normal;
  122.     text-align:center;
  123.     text-decoration:none;
  124. }