Tema: Acoplar capas
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 08/02/2012, 11:16
delhorno
 
Fecha de Ingreso: enero-2005
Mensajes: 85
Antigüedad: 19 años, 9 meses
Puntos: 0
Respuesta: Acoplar capas
Mucha razón y disculpad las molestias, de paso me podeis aconsejar para ir aprendiendo consejos para usar bien los atributos y armar correctamente la estructura.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES" lang="es-ES">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Donde Viajar</title>
  6. <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
  7. </head>
  8.  
  9. <body>
  10. <div id="estructura">
  11. <div id="header">
  12. <div id="fondo">
  13. <p>
  14. imagen de fondo, titulo del sitio y descripcion</p>
  15. </div>
  16. <div id="menu">
  17. <p>
  18. menu</p>
  19. </div>
  20. <div id="ads_header">
  21. <p>Adsense Horizontal</p>
  22.  
  23. </div>
  24. </div>
  25. <!--fin header -->
  26.  
  27. <div id="contenido">
  28. <p>contenido</p>
  29. </div>
  30.  
  31. <div id="lateral">
  32. <p>lateral</p>
  33. </div>
  34.  
  35. <div id="paginacion">
  36. <p>paginacion</p>
  37. </div>
  38.  
  39. <!--footer -->
  40.  
  41. <div id="footer">
  42. <p>Footer</p>
  43.  
  44. </div>
  45. </div>
  46.  
  47.  
  48.  
  49. </body>
  50. </html>

CSS

Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* Reseteando */
  3. html, body, div, span, applet, object, iframe,
  4. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  5. a, abbr, acronym, address, big, cite, code,
  6. del, dfn, em, font, img, ins, kbd, q, s, samp,
  7. small, strike, strong, sub, sup, tt, var,
  8. b, u, i, center,
  9. dl, dt, dd, ol, ul, li,
  10. fieldset, form, label, legend,
  11. table, caption, tbody, tfoot, thead, tr, th, td {
  12.     background: transparent;
  13.     border: 0;
  14.     margin: 0;
  15.     padding: 0;
  16.     vertical-align: baseline;
  17. }
  18. body {
  19.     line-height: 1;
  20. }
  21. h1, h2, h3, h4, h5, h6 {
  22.     clear: both;
  23.     font-weight: normal;
  24. }
  25. ol, ul {
  26.     list-style: none;
  27. }
  28. blockquote {
  29.     quotes: none;
  30. }
  31. blockquote:before, blockquote:after {
  32.     content: '';
  33.     content: none;
  34. }
  35. del {
  36.     text-decoration: line-through;
  37. }
  38. /* tables still need 'cellspacing="0"' in the markup */
  39. a img {
  40.     border: none;
  41. }
  42. /* Fin reseteando */
  43.  
  44. #estructura {
  45.     width: 940px;
  46.     overflow:auto;
  47.     border: solid;
  48.     margin:auto;
  49.     padding:0 20px 20px 20px;
  50. }
  51. #header{
  52.     border:solid;
  53. }
  54. #fondo{
  55.     height:198px;
  56.     border-top:solid 6px #CC0000;
  57.     border-bottom:solid 1px;
  58.     background-image:url(images/fondo.jpg); 
  59. }
  60. #menu{
  61.     height:40px;
  62.     border-top:solid 1px;
  63.     border-bottom:solid 1px;
  64. }
  65. #ads_header{
  66.     border:solid 1px;
  67. }
  68. #contenido{
  69.     width:660px;
  70.     border:solid;
  71.     float:left;
  72.     padding:20px;
  73. }
  74. #paginacion{
  75.     width:660px;
  76.     border:solid;
  77.     float:left;
  78.     padding:20px;
  79. }
  80. #lateral{
  81.     border:solid;
  82.     float:right;
  83.     width:180px;
  84.     padding:20px;
  85. }
  86. #footer{
  87.     border:solid #C00;
  88. }
__________________
Videos Graciosos