Foros del Web » Creando para Internet » CSS »

Me ayudan con mi pagina

 Estas en el tema de Me ayudan con mi pagina en el foro de CSS en Foros del Web. Hola pues aqui miren tengo esta pagina HTML @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original <!DOCTYPE html> < html lang = "es" > < head > ...
  #1 (permalink)  
Antiguo 14/09/2011, 17:46
Avatar de 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?¿
  #2 (permalink)  
Antiguo 14/09/2011, 17:53
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 13 años, 8 meses
Puntos: 64
Respuesta: Me ayudan con mi pagina
es que el div de comentarios esta fuera del div de la barra lateral, el div comentario deberia ser hijo del div "lateral"
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 14/09/2011, 18:05
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 con mi pagina
osea no es que te lo exiga pero la verdad es que no me he puesto a estudiar CSS se de HTML Y PHP pero aun no mucho de CSS y es que esto que quiero lo puedo lograr con posicion absoluta pero ps asi cualquiera y yo quiero relativa!!!!

Y gracias por tu respuesta pero no entendi muy bn
  #4 (permalink)  
Antiguo 14/09/2011, 18:30
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 13 años, 8 meses
Puntos: 64
Respuesta: Me ayudan con mi pagina
olvidate lo q te dije antes, habia entendido mal tu problema ...

ahora lo estoy revisando, y el problema es porq esta mal maquetado...

debes corregir desde el principio...

Pero tampoco puedo darte todo porq seria hacer todo el trabajo...=/
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #5 (permalink)  
Antiguo 14/09/2011, 18: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 con mi pagina
mmm y no tienes algo de PHP que pueda hacer? algo asi como un trueke o cuanto me cobras

Te muestro el codigo que se ajusto a lo que necesito

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.     <?php
  73.     for($i = 1 ;$i <= 50; $i++)
  74.     {
  75.     echo "<div class='item' style='font-weight:900;font-size:13px;'>Este es el tema numero $i </div><div class='item_esp'></div>";
  76.     }
  77.     ?>
  78.   </div>
  79. </aside>
  80.  
  81. <div id="num_comentarios" class="clase_fuente">37 Comentarios</div>
  82.  
  83. <aside>
  84. <kbd style="text-decoration:none;">
  85. <div id="comentarios">
  86.  
  87.     <?php
  88.     for($i = 1;$i<=10 ; $i++)
  89.     {
  90.     ?>
  91.     <div class="espacio" style="font-weight:900;">Anonimo dice:</div>
  92.     <div class="comentario">
  93.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  94.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  95.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />
  96.     jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br />    
  97.     </div>
  98.     
  99.     <?php } ?>
  100. </div>
  101. </kbd>
  102. </aside>
  103.  
  104. <div id="dej_com" class="clase_fuente">
  105.     <br />Deja tu comentario<br />
  106.     <textarea style="width:400px;height:140px;"></textarea><br /><br />
  107.     Codigo de seguridad<br />
  108.     2*4 = <input type="text" /> <input type="submit" value="Enviar Comentario" style="cursor:pointer;"/><br />
  109. </div>
  110.  
  111.  
  112.  
  113. </body>
  114. </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:absolute;
  80. left:730px;
  81. top:130px;
  82. width:250px;
  83. height:auto;
  84. background:#FFF;
  85. overflow:auto;
  86. font-family:Verdana, Arial, Helvetica, sans-serif;
  87. }
  88.  
  89. #lat_tit
  90. {
  91. position:relative;
  92. width:100%;
  93. height:auto;
  94. background:#FFF;
  95. overflow:hidden;
  96. background:#336699;
  97. color:#FFFFFF;
  98. }
  99.  
  100. .item
  101. {
  102. position:relative;
  103. height:auto;
  104. overflow:hidden;
  105. }
  106.  
  107. .item_esp
  108. {
  109. position:relative;
  110. height:10px;
  111. }
  112.  
  113. h3
  114. {
  115. position:relative;
  116. margin:0;
  117. font-size:14px;
  118. height:auto;
  119. }
  120.  
  121. #articulo {
  122. float:left;
  123. position:relative;
  124. left:3%;
  125. width:97%;
  126. background:#FFF;
  127. overflow:auto;
  128. height:auto;
  129. }
  130.  
  131. h2
  132. {
  133. position:relative;
  134. margin:0;
  135. top:10px;
  136. text-align:center;
  137. font-size:20px;
  138. height:25px;
  139. width:100%;
  140. }
  141.  
  142. #num_comentarios {
  143. position:relative;
  144. top:30px;
  145. left:30px;
  146. font-size:18px;
  147. height:auto;
  148. width:200px;
  149. color:#FFF;
  150. }
  151.  
  152. #comentarios {
  153. position:relative;
  154. left:30px;
  155. float:left;
  156. top:30px;
  157. height:auto;
  158. width:670px;
  159. overflow:auto;
  160. }
  161.  
  162. .comentario {
  163. position:relative;
  164. float:left;
  165. width:100%;
  166. background:#FFF;
  167. height:auto;
  168. overflow:auto;
  169. }
  170.  
  171. .espacio {
  172. position:relative;
  173. float:left;
  174. height:40px;
  175. width:100px;
  176. top:15px;
  177. font-size:18px;
  178. color:#FFFFFF;
  179. text-align:justify;
  180. }
  181.  
  182. #dej_com
  183. {
  184. position:relative;
  185. float:left;
  186. top:30px;
  187. width:670px;
  188. left:30px;
  189. height:300px;
  190. color:#FFFFFF;
  191. }
Última edición por hackjose; 14/09/2011 a las 18:46

Etiquetas: contenido, html, 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 17:14.