Tema: [Ayuda] Div al lado del otro
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/11/2009, 23:48
_F3R_
 
Fecha de Ingreso: octubre-2008
Mensajes: 22
Antigüedad: 15 años, 6 meses
Puntos: 0
[Ayuda] Div al lado del otro
Hola gente, habia echo mi web con tabla y css :P y eso es una incorrecta maquetación y me decidi a pasarla con divs ;)
El tema es que el header y el navbar todo bien...
pero.
Yo en donde va el contenido en las tablas lo tenia asi:
Código html: 
Ver original
  1. <table class="tablepad" width="898" border="0" align="center" cellpadding="0" cellspacing="0">
  2.   <tr>
  3.     <td width="30" class="up-l"></td>
  4.     <td width="838" class="up"></td>
  5.     <td width="30" class="up-r"></td>
  6.   </tr>
  7.   <tr>
  8.     <td class="left"></td>
  9.     <td class="contenido">&nbsp;</td>
  10.     <td class="right"></td>
  11.   </tr>
  12.   <tr>
  13.     <td class="down-l"></td>
  14.     <td class="down creditos">&nbsp;</td>
  15.     <td class="down-r"></td>
  16.   </tr>
  17. </table>
ese es como lo tenia
por ejemplo a los bordes de arriba del conte lo tenia asi:
elborde superior izq el del medio y el de la der
y lo quise hacer con divs pero se me ponen uno abajo del otro.
Asi lo hice con divs en html:
Código html: 
Ver original
  1. <div id="contenedor">
  2.  
  3. <div id="header"></div>
  4. <div id="navbar" class="nav"></div>
  5. <div class="contepad">
  6. <div id="upcnt"><div class="up-l"></div><div class="up"></div><div class="up-r"></div>
  7. </div>
  8. </div>
y el css:
Código css: 
Ver original
  1. body{
  2. background-image:url(imgs/background.png);
  3. background-repeat:repeat-x;
  4. background-color:#403e3e;
  5. margin-top:0px;
  6. }
  7. p{
  8. margin-bottom:0px;
  9. margin-top:0px;
  10. text-indent:5px;
  11. }
  12. #contenedor{
  13. width:898px;
  14. padding:0;
  15. margin:0 auto;
  16. }
  17. #header{
  18. background-image:url(imgs/header.png);
  19. background-repeat:no-repeat;
  20. background-position:center;
  21. height:150px;
  22. width:600px;
  23. padding:0;
  24. margin:0 auto;
  25. }
  26. #navbar{
  27. background-image:url(imgs/navbar.png);
  28. height:40px;
  29. background-repeat:no-repeat;
  30. line-height:40px;
  31. text-align:center;
  32. width:898px;}
  33. a.nav:link{
  34. color:#000000;
  35. font:Arial, Helvetica, sans-serif;
  36. font-size:15px;
  37. text-decoration:none;
  38. font-weight:bold
  39. }
  40. a.nav:hover{
  41. color:#00FF00;
  42. font:Arial, Helvetica, sans-serif;
  43. font-size:16px;
  44. text-decoration:underline;
  45. font-weight:bold;
  46. }
  47. a.nav:visited{
  48. color:#000000;
  49. font:Arial, Helvetica, sans-serif;
  50. font-size:15px;
  51. text-decoration:none;
  52. font-weight:bold
  53. }
  54. .contepad{
  55. margin-top:20px;
  56. background-color:#222222
  57. }
  58. /*Bordes Contenido*/
  59. #upcnt{
  60. height:29px;
  61. width:898px;
  62. }
  63. .up{
  64. background-image:url(imgs/up.png);
  65. background-repeat:repeat-x;
  66. height:29px;
  67. }
  68. .down{
  69. background-image:url(imgs/down.png);
  70. background-repeat:repeat-x;
  71. height:29px;
  72. }
  73. .up-l{
  74. background-image:url(imgs/up-left.png);
  75. background-repeat:no-repeat;
  76. height:29px;
  77. width:30px;
  78. }
  79. .up-r{
  80. background-image:url(imgs/up-right.png);
  81. background-repeat:no-repeat;
  82. height:29px;
  83. width:30px;
  84. }
  85. .left{
  86. background-image:url(imgs/left.png);
  87. background-repeat:repeat-y;
  88. width:30px;
  89. }
  90. .right{
  91. background-image:url(imgs/right.png);
  92. background-repeat:repeat-y;
  93. width:30px;
  94. }
  95. .down-l{
  96. background-image:url(imgs/down-left.png);
  97. background-repeat:no-repeat;
  98. height:29px;
  99. width:30px;
  100. }
  101. .down-r{
  102. background-image:url(imgs/down-right.png);
  103. background-repeat:no-repeat;
  104. height:29px;
  105. width:30px;
  106. }
Por ahora si ven el html solo probe con los de arribas :/