Tema: Escalar div con imagen (no de fondo) segun resolucion de pantalla
Ver Mensaje Individual
  #12 (permalink)  
Antiguo 25/09/2012, 09:02
belap
 
Fecha de Ingreso: septiembre-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla
Os dejo mi html y css por si podeis ayudarme...

Muchas gracias

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. }