Tema: Me ayudan con mi pagina
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 14/09/2011, 17:46
Avatar de hackjose
hackjose
 
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 14 años
Puntos: 131
Me ayudan con mi pagina
Hola pues aqui miren tengo esta pagina

HTML
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4. <title>Programacion Geek</title>
  5. <link href="style.css" rel="stylesheet" />
  6. </head>
  7.  
  8. <body>
  9.  
  10. <header>
  11. <div id="cabeza">
  12.     <h1 class="clase_fuente">Programacion Geek</h1>
  13.     <nav>
  14.     <div id="botonera">
  15.         <div id="boton1" class="clase_fuente">Inicio</div>
  16.         <div id="boton2" class="clase_fuente">HTML 5</div>
  17.         <div id="boton3" class="clase_fuente">PHP</div>
  18.         <div id="boton4" class="clase_fuente">ASP.NET</div>
  19.         <div id="boton5" class="clase_fuente">Contacto</div>
  20.     </div>
  21.     </nav>
  22. </div>
  23. </header>
  24.  
  25. <div id="contenido">
  26.     <div id="articulo">
  27.     <h2 class="clase_fuente">Crear pagina web con Ruby on Rails</h2><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<br />
  38.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  39.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  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.     </div>
  64. </div>
  65.  
  66. <aside>
  67.   <div id="lateral">
  68.     <div id="lat_tit">
  69.       <h3 class="clase_fuente" align="center">Temas de Programacion Geek</h3>
  70.       <br />
  71.     </div>
  72.     <strong style="cursor:pointer;color:#000000;">Tema 4</strong><br />
  73.     <strong style="cursor:pointer;color:#000000;">Tema 5</strong><br />
  74.     <strong style="cursor:pointer;color:#000000;">Tema 6</strong><br />
  75.     <strong style="cursor:pointer;color:#000000;">Tema 7</strong><br />
  76.     <strong style="cursor:pointer;color:#000000;">Tema 8</strong><br />
  77.     <strong style="cursor:pointer;color:#000000;">Tema 9</strong><br />
  78.     <strong style="cursor:pointer;color:#000000;">Tema 10</strong><br />
  79.     <strong style="cursor:pointer;color:#000000;">Tema 4</strong><br />
  80.     <strong style="cursor:pointer;color:#000000;">Tema 5</strong><br />
  81.     <strong style="cursor:pointer;color:#000000;">Tema 6</strong><br />
  82.     <strong style="cursor:pointer;color:#000000;">Tema 7</strong><br />
  83.     <strong style="cursor:pointer;color:#000000;">Tema 8</strong><br />
  84.     <strong style="cursor:pointer;color:#000000;">Tema 9</strong><br />
  85.     <strong style="cursor:pointer;color:#000000;">Tema 10</strong><br />
  86.     <strong style="cursor:pointer;color:#000000;">Tema 4</strong><br />
  87.     <strong style="cursor:pointer;color:#000000;">Tema 5</strong><br />
  88.     <strong style="cursor:pointer;color:#000000;">Tema 6</strong><br />
  89.     <strong style="cursor:pointer;color:#000000;">Tema 7</strong><br />
  90.     <strong style="cursor:pointer;color:#000000;">Tema 8</strong><br />
  91.     <strong style="cursor:pointer;color:#000000;">Tema 9</strong><br />
  92.     <strong style="cursor:pointer;color:#000000;">Tema 10</strong><br />
  93.     <strong style="cursor:pointer;color:#000000;">Tema 4</strong><br />
  94.     <strong style="cursor:pointer;color:#000000;">Tema 5</strong><br />
  95.     <strong style="cursor:pointer;color:#000000;">Tema 6</strong><br />
  96.     <strong style="cursor:pointer;color:#000000;">Tema 7</strong><br />
  97.     <strong style="cursor:pointer;color:#000000;">Tema 8</strong><br />
  98.     <strong style="cursor:pointer;color:#000000;">Tema 9</strong><br />
  99.     <strong style="cursor:pointer;color:#000000;">Tema 10</strong><br />
  100.     <strong style="cursor:pointer;color:#000000;">Tema 4</strong><br />
  101.     <strong style="cursor:pointer;color:#000000;">Tema 5</strong><br />
  102.     <strong style="cursor:pointer;color:#000000;">Tema 6</strong><br />
  103.     <strong style="cursor:pointer;color:#000000;">Tema 7</strong><br />
  104.     <strong style="cursor:pointer;color:#000000;">Tema 8</strong><br />
  105.     <strong style="cursor:pointer;color:#000000;">Tema 9</strong><br />
  106.     <strong style="cursor:pointer;color:#000000;">Tema 10</strong><br />
  107.     <strong style="cursor:pointer;color:#000000;">Tema 4</strong><br />
  108.     <strong style="cursor:pointer;color:#000000;">Tema 5</strong><br />
  109.     <strong style="cursor:pointer;color:#000000;">Tema 6</strong><br />
  110.     <strong style="cursor:pointer;color:#000000;">Tema 7</strong><br />
  111.     <strong style="cursor:pointer;color:#000000;">Tema 8</strong><br />
  112.     <strong style="cursor:pointer;color:#000000;">Tema 9</strong><br />
  113.     <strong style="cursor:pointer;color:#000000;">Tema 4</strong><br />
  114.     <strong style="cursor:pointer;color:#000000;">Tema 5</strong><br />
  115.     <strong style="cursor:pointer;color:#000000;">Tema 6</strong><br />
  116.     <strong style="cursor:pointer;color:#000000;">Tema 7</strong><br />
  117.     <strong style="cursor:pointer;color:#000000;">Tema 8</strong><br />
  118.     <strong style="cursor:pointer;color:#000000;">Tema 9</strong><br />
  119.   </div>
  120. </aside>
  121.  
  122. <div id="num_comentarios" class="clase_fuente">37 Comentarios</div>
  123.  
  124. <aside>
  125. <kbd style="text-decoration:none;">
  126. <div id="comentarios">
  127.  
  128.     <?php
  129.     for($i = 1;$i<=10 ; $i++)
  130.     {
  131.     ?>
  132.     <div class="espacio" style="font-weight:900;">Anonimo dice:</div>
  133.     <div class="comentario">
  134.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  135.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  136.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  137.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />    
  138.     </div>
  139.     
  140.     <?php } ?>
  141. </div>
  142. </kbd>
  143. </aside>
  144.  
  145. <div id="dej_com" class="clase_fuente">
  146.     <br />Deja tu comentario<br />
  147.     <textarea style="width:665px;height:140px;"></textarea><br /><br />
  148.     Codigo de seguridad<br />
  149.     2*4 = <input type="text" /> <input type="submit" value="Enviar Comentario" style="cursor:pointer;"/><br />
  150. </div>
  151.  
  152.  
  153.  
  154. </body>
  155. </html>

CSS
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:30px;;
  32. width:970px;
  33. height:20px;
  34. font-size:18px;
  35. }
  36.  
  37. #boton1
  38. {
  39. position:relative;
  40. float:left;
  41. width:8%;
  42. height:20px;
  43. }
  44.  
  45. #boton2
  46. {
  47. position:relative;
  48. float:left;
  49. width:10%;
  50. height:20px;
  51. }
  52.  
  53. #boton3
  54. {
  55. position:relative;
  56. float:left;
  57. width:6%;
  58. height:20px;
  59. }
  60.  
  61. #boton4
  62. {
  63. position:relative;
  64. float:left;
  65. width:11%;
  66. height:20px;
  67. }
  68.  
  69. #contenido {
  70. position:relative;
  71. float:left;
  72. top:20px;
  73. width:700px;
  74. height:auto;
  75. overflow:auto;
  76. }
  77.  
  78. #lateral {
  79. position:relative;
  80. left:30px;
  81. top:20px;
  82. width:250px;
  83. height:auto;
  84. background:#FFF;
  85. overflow:auto;
  86. }
  87.  
  88. #lat_tit
  89. {
  90. position:relative;
  91. width:100%;
  92. height:auto;
  93. background:#FFF;
  94. overflow:auto;
  95. background:#336699;
  96. color:#FFFFFF;
  97. }
  98.  
  99. h3
  100. {
  101. position:relative;
  102. margin:0;
  103. font-size:14px;
  104. }
  105.  
  106. #articulo {
  107. float:left;
  108. position:relative;
  109. left:3%;
  110. width:97%;
  111. background:#FFF;
  112. overflow:auto;
  113. height:auto;
  114. }
  115.  
  116. h2
  117. {
  118. position:relative;
  119. margin:0;
  120. top:10px;
  121. text-align:center;
  122. font-size:20px;
  123. height:25px;
  124. width:100%;
  125. }
  126.  
  127. #num_comentarios {
  128. position:relative;
  129. top:30px;
  130. left:30px;
  131. font-size:18px;
  132. height:auto;
  133. width:200px;
  134. color:#FFF;
  135. }
  136.  
  137. #comentarios {
  138. position:relative;
  139. float:left;
  140. left:30px;
  141. top:30px;
  142. height:auto;
  143. width:670px;
  144. overflow:auto;
  145. }
  146.  
  147. .comentario {
  148. position:relative;
  149. float:left;
  150. width:100%;
  151. background:#FFF;
  152. height:auto;
  153. overflow:auto;
  154. }
  155.  
  156. .espacio {
  157. position:relative;
  158. float:left;
  159. height:40px;
  160. width:100px;
  161. top:15px;
  162. font-size:18px;
  163. color:#FFFFFF;
  164. text-align:justify;
  165. }
  166.  
  167. #dej_com
  168. {
  169. position:relative;
  170. float:left;
  171. top:30px;
  172. width:670px;
  173. left:30px;
  174. height:300px;
  175. color:#FFFFFF;
  176. }


El problema es->

Cuando la barra del lado derecho crece va bajando los comentarios

Me ayudan?¿