Tema: duda con ejercicio
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 24/01/2013, 00:34
nedyer
 
Fecha de Ingreso: enero-2011
Mensajes: 94
Antigüedad: 14 años
Puntos: 7
Respuesta: duda con ejercicio
OO algo fácil para mi te ayudare

código CSS

Código CSS: 
Ver original
  1. body
  2. {
  3.     font-family: Verdana, Geneva, sans-serif;
  4.     font-size: 10px;
  5.     font-weight: normal;
  6.     text-transform: lowercase;
  7.     color: #000000;
  8.     text-decoration: none;
  9.     padding: 0px;
  10.     margin-top: 0px;
  11.     margin-right: auto;
  12.     margin-bottom: 0px;
  13.     margin-left: auto;
  14.     width: 100%;
  15.     background-color: #DFDFDF;
  16. }
  17.  
  18. div, dl, dt, dd, ol, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
  19. {
  20.     margin: 0px;
  21.     padding: 0px;
  22. }
  23.  
  24. #Contenedor
  25. {
  26.     padding: 0px;
  27.     height: 900px;
  28.     width: 800px;
  29.     margin-top: 0px;
  30.     margin-right: auto;
  31.     margin-bottom: 0px;
  32.     margin-left: auto;
  33.     background-color: #FDFDFD;
  34. }
  35.  
  36. #Cabecera
  37. {
  38.     padding: 0px;
  39.     height: 200px;
  40.     width: 750px;
  41.     margin-top: 0px;
  42.     margin-right: auto;
  43.     margin-bottom: 0px;
  44.     margin-left: auto;
  45.     background-color: #666666;
  46. }
  47.  
  48. #Cabecera #Titulo {
  49.     margin-top: 66px;
  50.     font-family: Verdana, Geneva, sans-serif;
  51.     font-size: 36px;
  52.     font-weight: bold;
  53.     font-variant: normal;
  54.     color: #FF0000;
  55.     text-transform: uppercase;
  56.     margin-left: 15px;
  57.     position: absolute;
  58. }
  59.  
  60. #Cabecera #SubTitulo {
  61.     margin-top: 110px;
  62.     margin-left: 23px;
  63.     font-family: Verdana, Geneva, sans-serif;
  64.     font-weight: bold;
  65.     text-transform: capitalize;
  66.     color: #FFFFFF;
  67.     font-size: 12px;
  68.     position: absolute;
  69. }
  70.  
  71. #Pie
  72. {
  73.     padding: 0px;
  74.     height: 100px;
  75.     width: 750px;
  76.     margin-top: 0px;
  77.     margin-right: auto;
  78.     margin-bottom: 0px;
  79.     margin-left: auto;
  80.     background-color: #666666;
  81.     position: absolute;
  82.     left: 0%;
  83.     right: 0%;
  84.     bottom: 0px;
  85. }
  86.  
  87. #Pie #Titulo {
  88.     margin-top: 66px;
  89.     font-family: Verdana, Geneva, sans-serif;
  90.     font-size: 12px;
  91.     font-weight: bold;
  92.     font-variant: normal;
  93.     color: #FFFFFF;
  94.     text-transform: uppercase;
  95.     margin-left: 15px;
  96.     position: absolute;
  97. }
  98.  
  99. #Izquierda
  100. {
  101.     clear: left;
  102.     height: auto;
  103.     width: 535px;
  104.     padding-top: 20px;
  105.     padding-right: 0px;
  106.     padding-bottom: 20px;
  107.     padding-left: 0px;
  108.     background-color: #E5E5E5;
  109.     float: left;
  110.     margin-top: 15px;
  111.     margin-right: 0px;
  112.     margin-bottom: 0px;
  113.     margin-left: 25px;
  114.     display: inline-block;
  115. }
  116.  
  117. #Derecha
  118. {
  119.     clear: both;
  120.     height: auto;
  121.     width: 170px;
  122.     padding-top: 20px;
  123.     padding-right: 15px;
  124.     padding-bottom: 20px;
  125.     padding-left: 15px;
  126.     background-color: #B6B6B6;
  127.     float: right;
  128.     margin-top: 15px;
  129.     margin-right: 25px;
  130.     margin-bottom: 0px;
  131.     margin-left: 0px;
  132.     display: inline-block;
  133.     right: auto;
  134.     left: 0px;
  135. }
  136.  
  137. #Texto_1
  138. {
  139.     padding: 0px;
  140.     margin-top: 0px;
  141.     margin-right: auto;
  142.     margin-bottom: 0px;
  143.     margin-left: auto;
  144.     border: 5px dashed #D6D6D6;
  145.     background-color: #F9F9F9;
  146.     height: 200px;
  147.     width: 500px;
  148. }
  149.  
  150. #Texto_1 p#P1 {
  151.     margin-left: -15px;
  152.     margin-top: 15px;
  153. }
  154.  
  155. #Texto_2 p#P2 {
  156.     margin-top: 15px;
  157.     margin-left: 15px;
  158. }
  159.  
  160. #Texto_2
  161. {
  162.     padding: 0px;
  163.     margin-top: 15px;
  164.     margin-right: auto;
  165.     margin-bottom: 0px;
  166.     margin-left: auto;
  167.     border: 5px dashed #D6D6D6;
  168.     background-color: #F9F9F9;
  169.     height: 200px;
  170.     width: 500px;
  171. }


Código HTML


Código HTML: 
Ver original
  1. <div id="Contenedor">
  2.   <div id="Cabecera"><h2 id="Titulo">cabecera</h2> <h2 id="SubTitulo">subtitulo de la cabecera</h2></div>
  3.   <div id="Derecha">la columna derecha</div>
  4.   <div id="Izquierda">
  5.     <div id="Texto_1"><p id="P1">esto es el bloque 1 esto es el bloque 1 esto es el bloque 1 esto es el bloque 1 esto es el bloque 1 esto es el bloque 1</p></div>
  6.     <div id="Texto_2"><p id="P2">esto es el bloque 2 esto es el bloque 2 esto es el bloque 2 esto es el bloque 2 esto es el bloque 2</p></div>
  7.   </div>
  8.   <div id="Pie"><h3 id="Titulo">esto es el pie de pagina</h3></div>
  9. </div>


Foto




código Completo

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">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin título</title>
  6. <style type="text/css">
  7. body
  8. {
  9.     font-family: Verdana, Geneva, sans-serif;
  10.     font-size: 10px;
  11.     font-weight: normal;
  12.     text-transform: lowercase;
  13.     color: #000000;
  14.     text-decoration: none;
  15.     padding: 0px;
  16.     margin-top: 0px;
  17.     margin-right: auto;
  18.     margin-bottom: 0px;
  19.     margin-left: auto;
  20.     width: 100%;
  21.     background-color: #DFDFDF;
  22. }
  23.  
  24. div, dl, dt, dd, ol, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
  25. {
  26.     margin: 0px;
  27.     padding: 0px;
  28. }
  29.  
  30. #Contenedor
  31. {
  32.     padding: 0px;
  33.     height: 900px;
  34.     width: 800px;
  35.     margin-top: 0px;
  36.     margin-right: auto;
  37.     margin-bottom: 0px;
  38.     margin-left: auto;
  39.     background-color: #FDFDFD;
  40. }
  41.  
  42. #Cabecera
  43. {
  44.     padding: 0px;
  45.     height: 200px;
  46.     width: 750px;
  47.     margin-top: 0px;
  48.     margin-right: auto;
  49.     margin-bottom: 0px;
  50.     margin-left: auto;
  51.     background-color: #666666;
  52. }
  53.  
  54. #Cabecera #Titulo {
  55.     margin-top: 66px;
  56.     font-family: Verdana, Geneva, sans-serif;
  57.     font-size: 36px;
  58.     font-weight: bold;
  59.     font-variant: normal;
  60.     color: #FF0000;
  61.     text-transform: uppercase;
  62.     margin-left: 15px;
  63.     position: absolute;
  64. }
  65.  
  66. #Cabecera #SubTitulo {
  67.     margin-top: 110px;
  68.     margin-left: 23px;
  69.     font-family: Verdana, Geneva, sans-serif;
  70.     font-weight: bold;
  71.     text-transform: capitalize;
  72.     color: #FFFFFF;
  73.     font-size: 12px;
  74.     position: absolute;
  75. }
  76.  
  77. #Pie
  78. {
  79.     padding: 0px;
  80.     height: 100px;
  81.     width: 750px;
  82.     margin-top: 0px;
  83.     margin-right: auto;
  84.     margin-bottom: 0px;
  85.     margin-left: auto;
  86.     background-color: #666666;
  87.     position: absolute;
  88.     left: 0%;
  89.     right: 0%;
  90.     bottom: 0px;
  91. }
  92.  
  93. #Pie #Titulo {
  94.     margin-top: 66px;
  95.     font-family: Verdana, Geneva, sans-serif;
  96.     font-size: 12px;
  97.     font-weight: bold;
  98.     font-variant: normal;
  99.     color: #FFFFFF;
  100.     text-transform: uppercase;
  101.     margin-left: 15px;
  102.     position: absolute;
  103. }
  104.  
  105. #Izquierda
  106. {
  107.     clear: left;
  108.     height: auto;
  109.     width: 535px;
  110.     padding-top: 20px;
  111.     padding-right: 0px;
  112.     padding-bottom: 20px;
  113.     padding-left: 0px;
  114.     background-color: #E5E5E5;
  115.     float: left;
  116.     margin-top: 15px;
  117.     margin-right: 0px;
  118.     margin-bottom: 0px;
  119.     margin-left: 25px;
  120.     display: inline-block;
  121. }
  122.  
  123. #Derecha
  124. {
  125.     clear: both;
  126.     height: auto;
  127.     width: 170px;
  128.     padding-top: 20px;
  129.     padding-right: 15px;
  130.     padding-bottom: 20px;
  131.     padding-left: 15px;
  132.     background-color: #B6B6B6;
  133.     float: right;
  134.     margin-top: 15px;
  135.     margin-right: 25px;
  136.     margin-bottom: 0px;
  137.     margin-left: 0px;
  138.     display: inline-block;
  139.     right: auto;
  140.     left: 0px;
  141. }
  142.  
  143. #Texto_1
  144. {
  145.     padding: 0px;
  146.     margin-top: 0px;
  147.     margin-right: auto;
  148.     margin-bottom: 0px;
  149.     margin-left: auto;
  150.     border: 5px dashed #D6D6D6;
  151.     background-color: #F9F9F9;
  152.     height: 200px;
  153.     width: 500px;
  154. }
  155.  
  156. #Texto_1 p#P1 {
  157.     margin-left: -15px;
  158.     margin-top: 15px;
  159. }
  160.  
  161. #Texto_2 p#P2 {
  162.     margin-top: 15px;
  163.     margin-left: 15px;
  164. }
  165.  
  166. #Texto_2
  167. {
  168.     padding: 0px;
  169.     margin-top: 15px;
  170.     margin-right: auto;
  171.     margin-bottom: 0px;
  172.     margin-left: auto;
  173.     border: 5px dashed #D6D6D6;
  174.     background-color: #F9F9F9;
  175.     height: 200px;
  176.     width: 500px;
  177. }
  178. </style>
  179. </head>
  180.  
  181. <body>
  182. <div id="Contenedor">
  183.   <div id="Cabecera"><h2 id="Titulo">cabecera</h2> <h2 id="SubTitulo">subtitulo de la cabecera</h2></div>
  184.   <div id="Derecha">la columna derecha</div>
  185.   <div id="Izquierda">
  186.     <div id="Texto_1"><p id="P1">esto es el bloque 1 esto es el bloque 1 esto es el bloque 1 esto es el bloque 1 esto es el bloque 1 esto es el bloque 1</p></div>
  187.     <div id="Texto_2"><p id="P2">esto es el bloque 2 esto es el bloque 2 esto es el bloque 2 esto es el bloque 2 esto es el bloque 2</p></div>
  188.   </div>
  189.   <div id="Pie"><h3 id="Titulo">esto es el pie de pagina</h3></div>
  190. </div>
  191. </body>
  192. </html>