No consigo centrar estas tablas

neodani · #1 (**permalink**) 11/12/2009, 09:33

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tiempos Pectra</title>
<style type="text/css">
 
body{
text-align:center;
}
table, th, td {
    border: 1px solid #D4E0EE;
    border-collapse: collapse;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #555;
}
 
h2,h4 {
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #555;
}
 
caption {
    font-size: 150%;
    font-weight: bold;
    margin: 5px;
}
 
td, th {
    padding: 7px;
}
 
thead th {
    text-align: center;
    background: #E6EDF5;
    color: #4F76A3;
    font-size: 100% !important;
}
 
 
tbody th {
    font-weight: bold;
}
 
tbody tr { background: #FCFDFE; }
 
tbody tr.odd { background: #F7F9FC; }
 
table a:link {
    color: #718ABE;
    text-decoration: none;
}
 
table a:visited {
    color: #718ABE;
    text-decoration: none;
}
 
table a:hover {
    color: #718ABE;
    text-decoration: underline !important;
}
 
tfoot th, tfoot td {
    font-size: 85%;
}
 
.right{
float:right;
}
.left{
float:left;
}
 
.empleados{
float:right;
margin-right:90px;
}
 
.titulo1 {
    text-align: center;
    color: #4F76A3;
    font-size: 100% !important;
    padding: 2px;
    font-weight: bold;
    border: 0px solid #D4E0EE;
    border-collapse: collapse;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #555;
    width:364px;
    margin:0px;
}
.verde thead th{
background: #CEEF9C;
color:#59B74F;
padding: 7px;
border: 1px solid #CEEF9C;
}
.verde td {
border: 1px solid #CEEF9C;
}
 
.resumenanterior{
float:left;
margin-left:20px;
}
.resumenhoy{
float:left;
margin-left:20px;
 
}
 
.resumenhoy td, .resumenmes td, .resumenanterior td, .tiempo td{
text-align:center;
}
 
 
.resumenmes{
float:left;
margin-left:20px;
}
 
.both{
clear:both;
}
 
.incidencias{
margin-bottom:30px;
}
 
.tiempo table{
margin:auto;
}
.footer{
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 13px;
color:#555;
}
#center{
margin:0 auto;
}
 
#contenedor{
margin:0 auto;
text-align:center;
}
 
 
</style>
<script type="text/javascript">
function abreSitio(){
var URL = "http://";
var web = document.form1.empleados.options[document.form1.empleados.selectedIndex].value;
window.open(URL+web, '_self', '');
}
</script>
</head>
 
<body>
<div id="contenedor">
<h2>Tiempos Empleado1</h2>
<h4>Fecha: 10/12/2009</h4>
 
<div class="empleados">
    <form name="form1" action="#" target="_blank">
    <select name="empleados">
    <option>» Selecciona Empleado «</option>
    <option value="#">Empleado1</option>
    <option value="#">Empleado2</option>
    <option value="#">Empleado3</option>
    <option value="#">Empleado4</option>
    <option value="#">Empleado5</option>
    </select>
    <input type="button" value="Ir" onClick="javascript:abreSitio()"/>
    </form>
</div>
 
<div class="tiempo">
    <table><thead>
    <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>
    <tr><td>50</td><td>385</td></tr></table>
</div>
<br/>
<div class="both"/>
<div id="center">
<div class="resumenanterior">
    <p class="titulo1">Mes Anterior - NOVIEMBRE</p>
    <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>
    <tr><td>17</td><td>23</td><td>26</td></tr></table>
</div>
 
<div class="resumenhoy">
    <p class="titulo1">HOY</p>
    <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>
    <tr><td>17</td><td>23</td><td>26</td></tr></table>
</div>
 
<div class="resumenmes">
    <p class="titulo1">Mes Actual - DICIEMBRE</p>
    <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>
    <tr><td>17</td><td>23</td><td>26</td></tr></table>
</div>
</div>
<div class="both"/>
<br/>
<br/>
 
<div class="incidencias">
<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>
<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>
<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>
<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>
<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>
 
</table>
</div>
 
</div>
</body>
</html>

Muchas gracias de antemano!

Impostor · #2 (**permalink**) 11/12/2009, 12:58

Intentalo dandole al div #contenedor un ancho fijo.

Saludos¡¡

neodani · #3 (**permalink**) 11/12/2009, 14:41

Cita:

Iniciado por Impostor

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...

jomaruro · #4 (**permalink**) 11/12/2009, 16:42

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.

neodani · #5 (**permalink**) 12/12/2009, 04:09

Cita:

Iniciado por jomaruro

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tiempos Pectra</title>
<style type="text/css">
 
* {
    margin:0 auto;
    margin-right:auto;
    
}
body{
    text-align:center;
    margin-top:10px;
}
table, th, td {
    border: 1px solid #D4E0EE;
    border-collapse: collapse;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #555;
}
 
h2,h4 {
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #555;
}
 
caption {
    font-size: 150%;
    font-weight: bold;
    margin: 5px;
}
 
td, th {
    padding: 7px;
}
 
thead th {
    text-align: center;
    background: #E6EDF5;
    color: #4F76A3;
    font-size: 100% !important;
}
 
 
tbody th {
    font-weight: bold;
}
 
tbody tr { background: #FCFDFE; }
 
tbody tr.odd { background: #F7F9FC; }
 
table a:link {
    color: #718ABE;
    text-decoration: none;
}
 
table a:visited {
    color: #718ABE;
    text-decoration: none;
}
 
table a:hover {
    color: #718ABE;
    text-decoration: underline !important;
}
 
tfoot th, tfoot td {
    font-size: 85%;
}
.verde thead th{
    background: #CEEF9C;
    color:#59B74F;
    padding: 7px;
    border: 1px solid #CEEF9C;
}
.verde td {
    border: 1px solid #CEEF9C;
}
 
.right{
    float:right;
}
.left{
    float:left;
}
.both{
    clear:both;
}
.empleados{
    float:right;
    margin-right:90px;
    margin-bottom:-30px;
    padding-top:20px;
}
 
.titulo1 {
    text-align: center;
    color: #4F76A3;
    font-size: 100% !important;
    padding: 2px;
    font-weight: bold;
    border: 0px solid #D4E0EE;
    border-collapse: collapse;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #555;
    width:364px;
    margin:0px;
}
.resumenanterior{
    float:left;
    margin-left:20px;
}
.resumenhoy{
    float:left;
    margin-left:20px;
}
.resumenmes{
    float:left;
    margin-left:20px;
}
.resumenhoy td, .resumenmes td, .resumenanterior td, .tiempo td{
    text-align:center;
}
.incidencias{
    margin-bottom:30px;
}
.center{
    margin:0 auto;
    width:1190px;
    overflow:auto;
    margin-top:20px;
}
.footer{
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 13px;
    color:#555;
}
 
</style>
<script type="text/javascript">
function abreSitio(){
var URL = "http://";
var web = document.form1.empleados.options[document.form1.empleados.selectedIndex].value;
window.open(URL+web, '_self', '');
}
</script>
</head>
 
<body>
 
<h2>Tiempos Empleado1</h2>
<h4>Fecha: 10/12/2009</h4>
 
<div class="empleados">
    <form name="form1" action="#" target="_blank">
    <select name="empleados">
    <option>» Selecciona Empleado «</option>
    <option value="#">Empleado1</option>
    <option value="#">Empleado2</option>
    <option value="#">Empleado3</option>
    <option value="#">Empleado4</option>
    <option value="#">Empleado5</option>
    </select>
    <input type="button" value="Ir" onClick="javascript:abreSitio()"/>
    </form>
</div>
 
<div class="center">
<div class="tiempo">
    <table><thead>
    <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>
    <tr><td>50</td><td>385</td></tr></table>
</div>
</div>
 
<div class="both"/>
<div class="center">
<div class="resumenanterior">
    <p class="titulo1">Mes Anterior - NOVIEMBRE</p>
    <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>
    <tr><td>17</td><td>23</td><td>26</td></tr></table>
</div>
 
<div class="resumenhoy">
    <p class="titulo1">HOY</p>
    <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>
    <tr><td>17</td><td>23</td><td>26</td></tr></table>
</div>
 
<div class="resumenmes">
    <p class="titulo1">Mes Actual - DICIEMBRE</p>
    <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>
    <tr><td>17</td><td>23</td><td>26</td></tr></table>
</div>
</div>
<div class="both"/>
<br/>
<br/>
 
<div class="incidencias">
<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>
<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>
<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>
<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>
<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>
 
</table>
</div>
 
</body>
</html>