Tema: me ayudan a mejorar mi codigo
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/09/2011, 11:14
Avatar de hackjose
hackjose
 
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 14 años, 8 meses
Puntos: 131
me ayudan a mejorar mi codigo
Hola foreros
miren tengo el siguiente .html con su correspondiente .css

HTML
Código HTML: 
Ver original
  1. <link href="style.css" rel="stylesheet" />
  2. <div id="cabeza">
  3.     <h1 class="clase_fuente">Programacion Geek</h1>
  4.     <div id="botonera">
  5.         <div id="boton1" class="clase_fuente">Inicio</div>
  6.         <div id="boton2" class="clase_fuente">Programacion Web</div>
  7.         <div id="boton3" class="clase_fuente">Programacion Movil</div>
  8.         <div id="boton4" class="clase_fuente">Programacion Desktop</div>
  9.         <div id="boton5" class="clase_fuente">Contacto</div>
  10.     </div>
  11. </div>
  12.  
  13. <div id="contenido">
  14.     <div id="lateral">
  15.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  16.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  17.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  18.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  19.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  20.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  21.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  22.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  23.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  24.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  25.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  26.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  27.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  28.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  29.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  30.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  31.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  32.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  33.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  34.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  35.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  36.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  37.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
  38.     </div>
  39.     <div id="articulo">
  40.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  41.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  42.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  43.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  44.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  45.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  46.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  47.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  48.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  49.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  50.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  51.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  52.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  53.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  54.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  55.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  56.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  57.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  58.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  59.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  60.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  61.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  62.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  63.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  64.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  65.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  66.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  67.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  68.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  69.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  70.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  71.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  72.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  73.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  74.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  75.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  76.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  77.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  78.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  79.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  80.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  81.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  82.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  83.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  84.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  85.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  86.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  87.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  88.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  89.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  90.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  91.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  92.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  93.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  94.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  95.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  96.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  97.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  98.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  99.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  100.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  101.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  102.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  103.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  104.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  105.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  106.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  107.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  108.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  109.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  110.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  111.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
  112.     </div>
  113. </div>
  114.  
  115. <div id="num_comentarios" class="clase_fuente">37 Comentarios</div>
  116. <div class="espacio"></div>
  117.  
  118. <div id="comentarios">
  119.     <?php
  120.     for($i = 1;$i<=10 ; $i++)
  121.     {
  122.     ?>
  123.     <div class="comentario">
  124.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  125.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  126.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  127.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />    
  128.     </div>
  129.     <div class="espacio"></div>
  130.     <?php } ?>
  131. </div>
  132. <div id="pie"></div>

CSS

Código CSS: 
Ver original
  1. /* CSS Document */
  2. body
  3. {
  4. margin:0px;
  5. background:#336699;
  6. position:relative;
  7. }
  8.  
  9. .clase_fuente
  10. {
  11. font-family:Verdana, Arial, Helvetica, sans-serif;
  12. font-weight:900;
  13. }
  14.  
  15. #cabeza
  16. {
  17. position:relative;
  18. color:#FFFFFF;
  19. width:1000px;
  20. height:120px;
  21. }
  22.  
  23. h1
  24. {
  25. position:relative;
  26. top:10px;
  27. font-size:40px;
  28. font-weight:900;
  29. margin:0px;
  30. height:40px;
  31. }
  32.  
  33. #botonera
  34. {
  35. position:relative;
  36. top:50px;
  37. left:3%;
  38. width:90%;
  39. height:20px;
  40. font-size:18px;
  41. }
  42.  
  43. #boton1
  44. {
  45. position:relative;
  46. float:left;
  47. width:10%;
  48. height:20px;
  49. }
  50. #boton2
  51. {
  52. position:relative;
  53. float:left;
  54. width:25%;
  55. height:20px;
  56. }
  57. #boton3
  58. {
  59. position:relative;
  60. float:left;
  61. width:26%;
  62. height:20px;
  63. }
  64. #boton4
  65. {
  66. position:relative;
  67. float:left;
  68. width:29%;
  69. height:20px;
  70. }
  71. #boton5
  72. {
  73. position:relative;
  74. float:left;
  75. width:10%;
  76. height:20px;
  77. }
  78.  
  79. #contenido
  80. {
  81. position:relative;
  82. top:20px;
  83. width:1000px;
  84. height:auto;
  85. overflow:auto;
  86. color:#FFFFFF;
  87. }
  88.  
  89. #lateral
  90. {
  91. position:relative;
  92. right:3%;
  93. float:right;
  94. width:21%;
  95. height:auto;
  96. background:#FFFFFF;
  97. overflow:auto;
  98. }
  99.  
  100. #articulo
  101. {
  102. float:left;
  103. position:relative;
  104. left:3%;
  105. width:70%;
  106. background:#FFFFFF;
  107. overflow:auto;
  108. height:auto;
  109. }
  110.  
  111. #num_comentarios
  112. {
  113. position:relative;
  114. top:30px;
  115. left:30px;;
  116. font-size:18px;
  117. height:auto;
  118. width:200px;
  119. color:#FFFFFF;
  120. }
  121.  
  122. #comentarios
  123. {
  124. position:relative;
  125. left:30px;
  126. top:50px;
  127. height:auto;
  128. width:700px;
  129. color:#FFFFFF;
  130. overflow:auto;
  131. }
  132.  
  133. .comentario
  134. {
  135. position:relative;
  136. width:100%;
  137. background:#FFFFFF;
  138. height:auto;
  139. overflow:auto;
  140. }
  141.  
  142. .espacio
  143. {
  144. position:relative;
  145. height:30px;
  146. width:100opx;
  147. }
  148.  
  149. #pie
  150. {
  151. position:relative;
  152. width:1000px;
  153. height:120px;
  154. top:70px;
  155. }

Nota: las letras jjjjjj simulan el contenido

la verdad se poco de CSS y por eso les pido de favor que chequen mi codigo y se que es mucho pedir pero alguien me lo podria mejorar?¿
La idea de la web es que el contenido es dinamico osea puede ser muy poquito o un super extenso.