Tema: Tablas y css
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 26/04/2011, 05:17
saul123
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 13 años, 9 meses
Puntos: 9
Respuesta: Tablas y css
Hola


Con una tabla podria ser mas facil , poro con css también se puede , te dejo esto que he hecho , pruebalo y ya mediras
Código HTML: 
Ver original
  1. <body>
  2. <ul id="dias">
  3. <li>Lunes</li>
  4. <li>Martes</li>
  5. <li>Miercoles</li>
  6. <li>Juves</li>
  7. <li>Viernes</li>
  8. </ul>
  9. <ul id="horas">
  10. <li class="borde"> horas</li>
  11. <li>00:00</li>
  12. <li>00:01</li>
  13. <li>00:02</li>
  14. <li>00:03</li>
  15. <li>00:04</li>
  16. <li>00:06</li>
  17. <li>00:07</li>
  18. <li>00:08</li>
  19. </ul>
  20. <ul id="cero">
  21. <li></li>
  22. <li></li>
  23. <li></li>
  24. <li></li>
  25. <li></li>
  26. </ul>
  27. <ul id="uno">
  28. <li></li>
  29. <li></li>
  30. <li></li>
  31. <li></li>
  32. <li></li>
  33. </ul>
  34. <ul class="completa" id="dos">
  35. <span>esta fila esta completa toda la semana</span>
  36. </ul>
  37. <ul id="tres">
  38. <li></li>
  39. <li></li>
  40. <li></li>
  41. <li></li>
  42. <li></li>
  43. </ul>
  44. <ul id="cuatro">
  45. <li></li>
  46. <li></li>
  47. <li></li>
  48. <li></li>
  49. <li></li>
  50. </ul>
  51. <ul id="cinco">
  52. <li></li>
  53. <li></li>
  54. <li></li>
  55. <li></li>
  56. <li></li>
  57. </ul>
  58. <ul id="seis">
  59. <li></li>
  60. <li></li>
  61. <li></li>
  62. <li></li>
  63. <li></li>
  64. </ul>
  65. <ul id="siete">
  66. <li></li>
  67. <li></li>
  68. <li></li>
  69. <li></li>
  70. <li></li>
  71. </ul>
  72. </body>

Este seria el css , pero no olvides agregar la hoja de reset
Código CSS: 
Ver original
  1. #dias{
  2.     margin-left:200px;
  3.     margin-top:50px;
  4.     background:#0F6;
  5.     float: left;
  6.     
  7. }
  8. #dias li{
  9.     float:left;
  10.     display:block;
  11.     width:80px;
  12.     padding:10px;
  13.     border-right:1px #000 dotted;
  14.     border-top:1px #000 dotted;
  15.     border-bottom:1px #000 dotted;
  16.     text-align:center;
  17. }
  18. .borde{
  19.     border-top:1px #000 dotted;
  20. }
  21. #cero,#uno,#dos,#tres,#cuatro,#cinco,#seis,#siete{
  22.     float:left;
  23.     clear:left;
  24.     margin-left:200px;
  25. }
  26. #cero li,#uno li,#dos li,#tres li,#cuatro li,#cinco li,#seis li,#siete li{
  27.     float:left;
  28.     display:block;
  29.     width:80px;
  30.     padding:10px;
  31.     border-right:1px #000 dotted;
  32.     border-bottom:1px #000 dotted;
  33.     text-align:center;
  34.     height:16px;
  35. }
  36. #horas{
  37.     position:absolute;
  38.     margin-top:50px;
  39.     margin-left:99px;
  40.     float: left;
  41. }
  42. #horas li{
  43.     display:block;
  44.     width:80px;
  45.     padding:10px;
  46.     border-right:1px #000 dotted;
  47.     border-left:1px #000 dotted;
  48.     border-bottom:1px #000 dotted;
  49.     text-align:center;
  50. }
  51. .completa{
  52.     height:36px;
  53.     width:504px;
  54.     border-bottom:1px #000 dotted;
  55.     border-right:1px #000 dotted;
  56. }
  57. </style>