Foros del Web » Creando para Internet » CSS »

me ayudan a mejorar mi codigo

 Estas en el tema de me ayudan a mejorar mi codigo en el foro de CSS en Foros del Web. Hola foreros miren tengo el siguiente .html con su correspondiente .css HTML @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < link href = "style.css" rel = ...
  #1 (permalink)  
Antiguo 12/09/2011, 11:14
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 14 años
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.
  #2 (permalink)  
Antiguo 12/09/2011, 11:19
Avatar de alexk
Colaborador
  
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 14 años, 9 meses
Puntos: 137
Respuesta: me ayudan a mejorar mi codigo
no se a que te refieres pero bueno... esta pagina es util para optimizar tu CSS
http://www.cleancss.com/
y aqui para validarlo
http://jigsaw.w3.org/css-validator/#...t+with_options
y aqui para aprender mas...
http://librosweb.es/
__________________
Toroflix - movies.
  #3 (permalink)  
Antiguo 12/09/2011, 11:24
Avatar de DrFaust  
Fecha de Ingreso: septiembre-2011
Ubicación: Buenos Aires
Mensajes: 308
Antigüedad: 12 años, 8 meses
Puntos: 87
Respuesta: me ayudan a mejorar mi codigo
Dos tips:

- Podés darle las mismas propiedades a varios elementos. Por ejemplo, si tenés tres clases y una ID que deban tener el mismo fondo, hacés:

.clase1, .clase2, .clase3, #id1 {
background-color:black;
background-image:url(img/background.jpg);
background-position:center;
}

- Las propiedades se heredan. Si tenés una botonera y querés definir el tamaño de texto de los botones, cambiáselo al contenedor de la botonera.
  #4 (permalink)  
Antiguo 12/09/2011, 11:39
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 14 años
Puntos: 131
Respuesta: me ayudan a mejorar mi codigo
Otra pregunta cren que el codigo es bueno osea me refiero por ejemplo a los overflow's se para que se pero por ejemplo si los quito los div's no respetan el alto(height) de los otros div's

<div posicion:relativa height:100px>
<div>

en este ejemplo div simple queda debajo de <div pos.... heig....>

pero si hago esto

//mencionar que lo dejo en auto por que el contenido es dinamico
<div position:relative height:auto>
<div>

en este caso div simple no respeta el alto de <div pos.. hei...> y digamos que se pone encima de el

y si pongo overflow como que esto ya no pasa esta bn si dejo esos overflow o tengo que usar otra solucion para que los div's se respeten auque su alto se auto?
  #5 (permalink)  
Antiguo 12/09/2011, 11:45
Avatar de alexk
Colaborador
  
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 14 años, 9 meses
Puntos: 137
Respuesta: me ayudan a mejorar mi codigo
ahhhh!!!!!... se bloqueo mi debugeador mental con tus codigos anteriores XD...
aver creo que te refieres a "limpiar floats" no?... es decir tienes un contenedor con "overflow:hidden;" y en su interior otros elementos con "float" y si quitas el "overflow:hidden;" de tu contenedor se colapsa todo?...
o a que te refieres por que no se entiende nada y esta mal escrito
__________________
Toroflix - movies.
  #6 (permalink)  
Antiguo 12/09/2011, 12:17
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 14 años
Puntos: 131
Respuesta: me ayudan a mejorar mi codigo
ejemplo

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

prestar atencion a los siguientes id's
Este es un elemento DIV
este elemento div es el que va a contener el contenido principal y por ende su altura (su height) lo puse en auto por que el contenido puede ser pequeño o muy extenso

#contenido {
position:relative;
top:20px;
width:1000px;
height:auto;
color:#FFF;
}

Este es un elemento div que se encuentra abajo del elemento div antes mencionado
este div es el numero de comentarios

#num_comentarios {
position:relative;
top:0; -> tengo que poner cierta altura para que este div salga del otro div que no se supone que el otro div tiene un alto automatico y hasta donde llege este div se va a poner?
left:30px;
font-size:18px;
height:auto;
width:200px;
color:#FFF;
}

si pruban el codigo el div no. comentarios queda dentro del div cont principal

Por que sucede esto
  #7 (permalink)  
Antiguo 12/09/2011, 13:15
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 14 años, 3 meses
Puntos: 45
Respuesta: me ayudan a mejorar mi codigo
Buenas,

a mi lo que más me llama la atención del código que muestras es, que después de haber leido varios mensajes tuyos preocupándote por un marcado semántico correcto y preguntando por diferencias tan sutiles como las que puede haber entre las etiquetas <em> y <strong>, aquí estés utilizando etiquetas <div> para hacer el menu en lugar de una lista de enlaces que seria lo correcto, o simules bloques de texto que deberían ser párrafos con la etiqueta <br>. No muestras el Doctype pero supongo que si que usarás alguno. En cuanto al css lo que ya se ha comentado, no sólo en css, en general, todo el código que esté repetido se puede mejorar. Tampoco es buena práctica usar elementos vacios de contenido sólo por motivos estéticos, por ejemplo como separador de otros elementos, como parece ser el caso del div con clase "espacio", eso se debe hacer con css.
  #8 (permalink)  
Antiguo 12/09/2011, 13:36
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 14 años
Puntos: 131
Respuesta: me ayudan a mejorar mi codigo
Si lo se, algunos elementos son de HTML5 y por ende no hay que usarlos hasta que ya este bn HTML5 y bueno quiero maquetar y despues validar

Etiquetas: contenido, html, mejorar, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 14:24.