Foros del Web » Creando para Internet » CSS »

No consigo centrar estas tablas

Estas en el tema de No consigo centrar estas tablas en el foro de CSS en Foros del Web. Buenas, No consigo centrar estas tablas en medio de la pantalla, he probado de todo, desde margin:0 auto, hasta text-align:center, pero no hay manera. ¿Podéis ...
  #1 (permalink)  
Antiguo 11/12/2009, 09:33
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
No consigo centrar estas tablas

Buenas,

No consigo centrar estas tablas en medio de la pantalla, he probado de todo, desde margin:0 auto, hasta text-align:center, pero no hay manera.

¿Podéis decirme que estoy haciendo mal?

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <title>Tiempos Pectra</title>
  3. <style type="text/css">
  4.  
  5. body{
  6. text-align:center;
  7. }
  8. table, th, td {
  9.     border: 1px solid #D4E0EE;
  10.     border-collapse: collapse;
  11.     font-family: "Trebuchet MS", Arial, sans-serif;
  12.     color: #555;
  13. }
  14.  
  15. h2,h4 {
  16.     font-family: "Trebuchet MS", Arial, sans-serif;
  17.     color: #555;
  18. }
  19.  
  20. caption {
  21.     font-size: 150%;
  22.     font-weight: bold;
  23.     margin: 5px;
  24. }
  25.  
  26. td, th {
  27.     padding: 7px;
  28. }
  29.  
  30. thead th {
  31.     text-align: center;
  32.     background: #E6EDF5;
  33.     color: #4F76A3;
  34.     font-size: 100% !important;
  35. }
  36.  
  37.  
  38. tbody th {
  39.     font-weight: bold;
  40. }
  41.  
  42. tbody tr { background: #FCFDFE; }
  43.  
  44. tbody tr.odd { background: #F7F9FC; }
  45.  
  46. table a:link {
  47.     color: #718ABE;
  48.     text-decoration: none;
  49. }
  50.  
  51. table a:visited {
  52.     color: #718ABE;
  53.     text-decoration: none;
  54. }
  55.  
  56. table a:hover {
  57.     color: #718ABE;
  58.     text-decoration: underline !important;
  59. }
  60.  
  61. tfoot th, tfoot td {
  62.     font-size: 85%;
  63. }
  64.  
  65. .right{
  66. float:right;
  67. }
  68. .left{
  69. float:left;
  70. }
  71.  
  72. .empleados{
  73. float:right;
  74. margin-right:90px;
  75. }
  76.  
  77. .titulo1 {
  78.     text-align: center;
  79.     color: #4F76A3;
  80.     font-size: 100% !important;
  81.     padding: 2px;
  82.     font-weight: bold;
  83.     border: 0px solid #D4E0EE;
  84.     border-collapse: collapse;
  85.     font-family: "Trebuchet MS", Arial, sans-serif;
  86.     color: #555;
  87.     width:364px;
  88.     margin:0px;
  89. }
  90. .verde thead th{
  91. background: #CEEF9C;
  92. color:#59B74F;
  93. padding: 7px;
  94. border: 1px solid #CEEF9C;
  95. }
  96. .verde td {
  97. border: 1px solid #CEEF9C;
  98. }
  99.  
  100. .resumenanterior{
  101. float:left;
  102. margin-left:20px;
  103. }
  104. .resumenhoy{
  105. float:left;
  106. margin-left:20px;
  107.  
  108. }
  109.  
  110. .resumenhoy td, .resumenmes td, .resumenanterior td, .tiempo td{
  111. text-align:center;
  112. }
  113.  
  114.  
  115. .resumenmes{
  116. float:left;
  117. margin-left:20px;
  118. }
  119.  
  120. .both{
  121. clear:both;
  122. }
  123.  
  124. .incidencias{
  125. margin-bottom:30px;
  126. }
  127.  
  128. .tiempo table{
  129. margin:auto;
  130. }
  131. .footer{
  132. font-family: "Trebuchet MS", Arial, sans-serif;
  133. font-size: 13px;
  134. color:#555;
  135. }
  136. #center{
  137. margin:0 auto;
  138. }
  139.  
  140. #contenedor{
  141. margin:0 auto;
  142. text-align:center;
  143. }
  144.  
  145.  
  146. <script type="text/javascript">
  147. function abreSitio(){
  148. var URL = "http://";
  149. var web = document.form1.empleados.options[document.form1.empleados.selectedIndex].value;
  150. window.open(URL+web, '_self', '');
  151. }
  152. </head>
  153.  
  154. <div id="contenedor">
  155. <h2>Tiempos Empleado1</h2>
  156. <h4>Fecha: 10/12/2009</h4>
  157.  
  158. <div class="empleados">
  159.     <form name="form1" action="#" target="_blank">
  160.     <select name="empleados">
  161.     <option>» Selecciona Empleado «</option>
  162.     <option value="#">Empleado1</option>
  163.     <option value="#">Empleado2</option>
  164.     <option value="#">Empleado3</option>
  165.     <option value="#">Empleado4</option>
  166.     <option value="#">Empleado5</option>
  167.     </select>
  168.     <input type="button" value="Ir" onClick="javascript:abreSitio()"/>
  169.     </form>
  170. </div>
  171.  
  172. <div class="tiempo">
  173.     <table><thead>
  174.     <tr><th title="Minutos que anotamos en las Aperturas de Incidencias">Tiempo Aperturas</th><th title="Minutos de Aperturas MAS tiempo de los Comentarios de Pectra">Tiempo Total</th></tr></thead>
  175.     <tr><td>50</td><td>385</td></tr></table>
  176. </div>
  177. <br/>
  178. <div class="both"/>
  179. <div id="center">
  180. <div class="resumenanterior">
  181.     <p class="titulo1">Mes Anterior - NOVIEMBRE</p>
  182.     <table><thead><tr><th>Abiertas</th><th title="Botón Solucionar Incidencia">Solucionadas</th><th title="Botón Finalizar Incidencia">Cierre Administrativo</th></tr></thead>
  183.     <tr><td>17</td><td>23</td><td>26</td></tr></table>
  184. </div>
  185.  
  186. <div class="resumenhoy">
  187.     <p class="titulo1">HOY</p>
  188.     <table class="verde"><thead><tr><th>Abiertas</th><th title="Botón Solucionar Incidencia">Solucionadas</th><th title="Botón Finalizar Incidencia">Cierre Administrativo</th></tr></thead>
  189.     <tr><td>17</td><td>23</td><td>26</td></tr></table>
  190. </div>
  191.  
  192. <div class="resumenmes">
  193.     <p class="titulo1">Mes Actual - DICIEMBRE</p>
  194.     <table><thead><tr><th>Abiertas</th><th title="Botón Solucionar Incidencia">Solucionadas</th><th title="Botón Finalizar Incidencia">Cierre Administrativo</th></tr></thead>
  195.     <tr><td>17</td><td>23</td><td>26</td></tr></table>
  196. </div>
  197. </div>
  198. <div class="both"/>
  199. <br/>
  200. <br/>
  201.  
  202. <div class="incidencias">
  203. <table><thead><tr><th>ID_Comentari</th><th>ID_Incidencia</th><th>Data</th><th>Descripcio</th><th>Temps Dedicat</th><th>Creat Per</th></tr></thead>
  204. <tr><td>69002</td><td>22161</td><td>10/12/2009 9:53:57</td><td><p>aaaaaaaaaaa</p></td><td>120</td><td>12571</td></tr>
  205. <tr><td>69002</td><td>22161</td><td>10/12/2009 9:53:57</td><td><p>bbbbbbbbbbbb</p></td><td>120</td><td>12571</td></tr>
  206. <tr><td>69002</td><td>22161</td><td>10/12/2009 9:53:57</td><td><p>cccccccccccc</p></td><td>120</td><td>12571</td></tr>
  207. <tr><td>69002</td><td>22161</td><td>10/12/2009 9:53:57</td><td><p>ddddddddddddd</p></td><td>120</td><td>12571</td></tr>
  208.  
  209. </div>
  210.  
  211. </div>
  212. </body>
  213. </html>

Muchas gracias de antemano!
  #2 (permalink)  
Antiguo 11/12/2009, 12:58
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: No consigo centrar estas tablas

Intentalo dandole al div #contenedor un ancho fijo.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #3 (permalink)  
Antiguo 11/12/2009, 14:41
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: No consigo centrar estas tablas

Cita:
Iniciado por Impostor Ver Mensaje
Intentalo dandole al div #contenedor un ancho fijo.

Saludos¡¡
Que va... ni poniendo un ancho fijo al contenedor se alinea las 3 tablas de en medio...
  #4 (permalink)  
Antiguo 11/12/2009, 16:42
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: No consigo centrar estas tablas

Hola:

Añade al principio del css esto:

Código:
* {
	margin:0 auto;
        margin-right:auto;
}
Y después modifica esto:

#center{
margin:0 auto;
width:1190px;
overflow:auto;
border:1px dashed #ff0000;
}

Saludos.

  #5 (permalink)  
Antiguo 12/12/2009, 04:09
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: No consigo centrar estas tablas

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

Añade al principio del css esto:

Código:
* {
	margin:0 auto;
        margin-right:auto;
}
Y después modifica esto:

#center{
margin:0 auto;
width:1190px;
overflow:auto;
border:1px dashed #ff0000;
}

Saludos.

Muchas gracias jomaru, pude arreglar todo con lo que me dijiste

Aquí el código completo, con las modificaciones que hice.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <title>Tiempos Pectra</title>
  3. <style type="text/css">
  4.  
  5. * {
  6.     margin:0 auto;
  7.     margin-right:auto;
  8.    
  9. }
  10. body{
  11.     text-align:center;
  12.     margin-top:10px;
  13. }
  14. table, th, td {
  15.     border: 1px solid #D4E0EE;
  16.     border-collapse: collapse;
  17.     font-family: "Trebuchet MS", Arial, sans-serif;
  18.     color: #555;
  19. }
  20.  
  21. h2,h4 {
  22.     font-family: "Trebuchet MS", Arial, sans-serif;
  23.     color: #555;
  24. }
  25.  
  26. caption {
  27.     font-size: 150%;
  28.     font-weight: bold;
  29.     margin: 5px;
  30. }
  31.  
  32. td, th {
  33.     padding: 7px;
  34. }
  35.  
  36. thead th {
  37.     text-align: center;
  38.     background: #E6EDF5;
  39.     color: #4F76A3;
  40.     font-size: 100% !important;
  41. }
  42.  
  43.  
  44. tbody th {
  45.     font-weight: bold;
  46. }
  47.  
  48. tbody tr { background: #FCFDFE; }
  49.  
  50. tbody tr.odd { background: #F7F9FC; }
  51.  
  52. table a:link {
  53.     color: #718ABE;
  54.     text-decoration: none;
  55. }
  56.  
  57. table a:visited {
  58.     color: #718ABE;
  59.     text-decoration: none;
  60. }
  61.  
  62. table a:hover {
  63.     color: #718ABE;
  64.     text-decoration: underline !important;
  65. }
  66.  
  67. tfoot th, tfoot td {
  68.     font-size: 85%;
  69. }
  70. .verde thead th{
  71.     background: #CEEF9C;
  72.     color:#59B74F;
  73.     padding: 7px;
  74.     border: 1px solid #CEEF9C;
  75. }
  76. .verde td {
  77.     border: 1px solid #CEEF9C;
  78. }
  79.  
  80. .right{
  81.     float:right;
  82. }
  83. .left{
  84.     float:left;
  85. }
  86. .both{
  87.     clear:both;
  88. }
  89. .empleados{
  90.     float:right;
  91.     margin-right:90px;
  92.     margin-bottom:-30px;
  93.     padding-top:20px;
  94. }
  95.  
  96. .titulo1 {
  97.     text-align: center;
  98.     color: #4F76A3;
  99.     font-size: 100% !important;
  100.     padding: 2px;
  101.     font-weight: bold;
  102.     border: 0px solid #D4E0EE;
  103.     border-collapse: collapse;
  104.     font-family: "Trebuchet MS", Arial, sans-serif;
  105.     color: #555;
  106.     width:364px;
  107.     margin:0px;
  108. }
  109. .resumenanterior{
  110.     float:left;
  111.     margin-left:20px;
  112. }
  113. .resumenhoy{
  114.     float:left;
  115.     margin-left:20px;
  116. }
  117. .resumenmes{
  118.     float:left;
  119.     margin-left:20px;
  120. }
  121. .resumenhoy td, .resumenmes td, .resumenanterior td, .tiempo td{
  122.     text-align:center;
  123. }
  124. .incidencias{
  125.     margin-bottom:30px;
  126. }
  127. .center{
  128.     margin:0 auto;
  129.     width:1190px;
  130.     overflow:auto;
  131.     margin-top:20px;
  132. }
  133. .footer{
  134.     font-family: "Trebuchet MS", Arial, sans-serif;
  135.     font-size: 13px;
  136.     color:#555;
  137. }
  138.  
  139. <script type="text/javascript">
  140. function abreSitio(){
  141. var URL = "http://";
  142. var web = document.form1.empleados.options[document.form1.empleados.selectedIndex].value;
  143. window.open(URL+web, '_self', '');
  144. }
  145. </head>
  146.  
  147.  
  148. <h2>Tiempos Empleado1</h2>
  149. <h4>Fecha: 10/12/2009</h4>
  150.  
  151. <div class="empleados">
  152.     <form name="form1" action="#" target="_blank">
  153.     <select name="empleados">
  154.     <option>» Selecciona Empleado «</option>
  155.     <option value="#">Empleado1</option>
  156.     <option value="#">Empleado2</option>
  157.     <option value="#">Empleado3</option>
  158.     <option value="#">Empleado4</option>
  159.     <option value="#">Empleado5</option>
  160.     </select>
  161.     <input type="button" value="Ir" onClick="javascript:abreSitio()"/>
  162.     </form>
  163. </div>
  164.  
  165. <div class="center">
  166. <div class="tiempo">
  167.     <table><thead>
  168.     <tr><th title="Minutos que anotamos en las Aperturas de Incidencias">Tiempo Aperturas</th><th title="Minutos de Aperturas MAS tiempo de los Comentarios de Pectra">Tiempo Total</th></tr></thead>
  169.     <tr><td>50</td><td>385</td></tr></table>
  170. </div>
  171. </div>
  172.  
  173. <div class="both"/>
  174. <div class="center">
  175. <div class="resumenanterior">
  176.     <p class="titulo1">Mes Anterior - NOVIEMBRE</p>
  177.     <table><thead><tr><th>Abiertas</th><th title="Botón Solucionar Incidencia">Solucionadas</th><th title="Botón Finalizar Incidencia">Cierre Administrativo</th></tr></thead>
  178.     <tr><td>17</td><td>23</td><td>26</td></tr></table>
  179. </div>
  180.  
  181. <div class="resumenhoy">
  182.     <p class="titulo1">HOY</p>
  183.     <table class="verde"><thead><tr><th>Abiertas</th><th title="Botón Solucionar Incidencia">Solucionadas</th><th title="Botón Finalizar Incidencia">Cierre Administrativo</th></tr></thead>
  184.     <tr><td>17</td><td>23</td><td>26</td></tr></table>
  185. </div>
  186.  
  187. <div class="resumenmes">
  188.     <p class="titulo1">Mes Actual - DICIEMBRE</p>
  189.     <table><thead><tr><th>Abiertas</th><th title="Botón Solucionar Incidencia">Solucionadas</th><th title="Botón Finalizar Incidencia">Cierre Administrativo</th></tr></thead>
  190.     <tr><td>17</td><td>23</td><td>26</td></tr></table>
  191. </div>
  192. </div>
  193. <div class="both"/>
  194. <br/>
  195. <br/>
  196.  
  197. <div class="incidencias">
  198. <table><thead><tr><th>ID_Comentari</th><th>ID_Incidencia</th><th>Data</th><th>Descripcio</th><th>Temps Dedicat</th><th>Creat Per</th></tr></thead>
  199. <tr><td>69002</td><td>22161</td><td>10/12/2009 9:53:57</td><td><p>aaaaaaaaaaa</p></td><td>120</td><td>12571</td></tr>
  200. <tr><td>69002</td><td>22161</td><td>10/12/2009 9:53:57</td><td><p>bbbbbbbbbbbb</p></td><td>120</td><td>12571</td></tr>
  201. <tr><td>69002</td><td>22161</td><td>10/12/2009 9:53:57</td><td><p>cccccccccccc</p></td><td>120</td><td>12571</td></tr>
  202. <tr><td>69002</td><td>22161</td><td>10/12/2009 9:53:57</td><td><p>ddddddddddddd</p></td><td>120</td><td>12571</td></tr>
  203.  
  204. </div>
  205.  
  206. </body>
  207. </html>
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




La zona horaria es GMT -6. Ahora son las 15:12.