[SOLUCIONADO] Problema con la alineación de un tabla

miriamgomez · #1 (**permalink**) 05/11/2013, 07:50

Hola:

tengo el siguiente problema:

en un div quiero poner las tablas centradas, pero siempre me las manda a la izquierda, aunque le ponga a la tabla la propiedad :

<table width="450" border="1" align="center">

Despues de investigar un poco el problema viene por la hoja de estilo que usa el menu:

Código CSS:

Ver original/* Reset code to remove theme inherent styling */
*
{
margin:0;
padding:0;
}
.dcjq-mega-menu ul.menu ul, .dcjq-mega-menu ul.menu li {
list-style: none; 
padding: 0; 
margin: 0;
}
.dcjq-mega-menu ul.menu ul {
display: none; /* Hides non-mega links */
}
.dcjq-mega-menu ul.menu .sub ul {
display: block; /* overrides above hide */
}
 
/* Main menu styles */
.dcjq-mega-menu ul.menu {
    width: 100%;
    height: 40px;
    position: relative; /* Important - required for positioning of mega menu */
    font: normal 13px Arial, sans-serif;
 
    background: #222 url(images/bg_black.png) repeat-x 0 -80px; 
    background-repeat: repeat-x;
    background-position: 0 -80px;
}
.dcjq-mega-menu ul.menu li {
float: left; 
font-weight: bold;
}
.dcjq-mega-menu ul.menu li a {
float: left; 
display: block;  
padding: 12px 25px; 
background: url(images/fondo.fw.png) repeat-x 100% 0; 
color: #fff;
text-shadow: 1px 1px 1px #000; 
text-decoration: none;
}
.dcjq-mega-menu ul.menu li.mega-hover a, .dcjq-mega-menu ul.menu li a:hover {
    background-position: 100% -40px;
    color: #006;
    text-shadow: none;
}
 
/* Arrow tag for parent links */
.dcjq-mega-menu ul.menu li a.dc-mega {
padding-right: 38px; /* Additional padding for arrow */
position: relative; /* Required for arrow positioning */
}
.dcjq-mega-menu ul.menu li a .dc-mega-icon {
display: block; 
position: absolute; 
top: 18px; 
right: 15px; 
width: 8px; 
height: 6px; 
background: url(images/arrow.png) no-repeat 0 0;
}
.dcjq-mega-menu ul.menu li.mega-hover a .dc-mega-icon {
background-position: 0 100%;
}
 
/* Mega Menu Styling */
/* Mega Drop Down Container */
.dcjq-mega-menu ul.menu li .sub-container {
position: absolute; /* Required */
background: url(images/bg_sub_left.png) no-repeat 0 100%; 
padding-left: 10px; 
margin-left: -3px;
}
.dcjq-mega-menu ul.menu li .sub {
background: url(images/bg_sub.png) no-repeat 100% 100%; 
padding: 20px 20px 20px 10px;
}
.dcjq-mega-menu ul.menu li .sub-container.mega .sub {
padding: 20px 10px 0 0;
}
.dcjq-mega-menu ul.menu li .sub .row { /* Clear the sub-menu floats */
width: 100%; 
overflow: hidden; 
clear: both;
}
.dcjq-mega-menu ul.menu li .sub li {
float: none; 
font-size: 1em; 
font-weight: bold;
}
/* Sub-menu Headers */
.dcjq-mega-menu ul.menu li .sub li.mega-hdr { /* Sub-menu headers - i.e. 2nd level navigation */
float: left; /* Float the sub-menus and give them a fixed width to from the mega menu rows */
width: 260px;
margin: 0 10px 20px 10px;
border: 1px solid #ccc; 
}
.dcjq-mega-menu ul.menu li .sub a { /* Clear the styles from the top-level links and set the font styles */
    background: none;
    border: none;
    text-shadow: none;
    color: #009;
    padding: 7px 10px;
    display: block;
    float: none;
    text-decoration: none;
    font-size: 0.9em;
    text-align: left;
}
.dcjq-mega-menu ul.menu li .sub li.mega-hdr a.mega-hdr-a {
    padding: 7px 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc;
    text-transform: uppercase;
    font-weight: bold;
    color: #006;
    background: #EAEAEA url(images/bg_hdr.png) repeat-x center center;
}
.dcjq-mega-menu ul.menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000; 
text-shadow: none;
}
 
 
/* Add the individual sub-menu backgrounds */
.dcjq-mega-menu ul.menu li .sub li#menu-item-1 {
background: url(images/bg_coupe.jpg) no-repeat 135px 40px;
}
.dcjq-mega-menu ul.menu li .sub li#menu-item-2 {
background: url(images/bg_sedan.jpg) no-repeat 135px 40px;
}
.dcjq-mega-menu ul.menu li .sub li#menu-item-3 {
background: url(images/bg_convert.jpg) no-repeat 135px 40px;
}
.dcjq-mega-menu ul.menu li .sub li#menu-item-4 {
background: url(images/bg_suv.jpg) no-repeat 135px 40px;
}
.dcjq-mega-menu ul.menu li .sub li#menu-item-5 {
background: url(images/bg_pickup.jpg) no-repeat 135px 40px;
}
.dcjq-mega-menu ul.menu li .sub li#menu-item-6 {
background: url(images/bg_sports.jpg) no-repeat 135px 40px;
}
 
/* Style the 3rd level links */
.dcjq-mega-menu ul.menu li .sub li ul li {
margin-right: 90px;
}
.dcjq-mega-menu ul.menu .sub li.mega-hdr li a {
color: #006;
font-weight: normal; 
padding: 3px 0 3px 25px; 
background: url(images/bullet.png) no-repeat 10px 8px; 
}
.dcjq-mega-menu ul.menu .sub li.mega-hdr li a:hover {
    color: #0066FF;
    background-image: url(images/bullet_on.png);
}
 
/* Styling for items with only 2 levels */
.dcjq-mega-menu ul.menu li .sub-container.non-mega .sub {
padding: 20px 20px 20px 10px;
}
.dcjq-mega-menu ul.menu li .sub-container.non-mega li {
width: 190px; /* Set the drop down width */
}
.dcjq-mega-menu ul.menu li .sub-container.non-mega li a {
padding: 7px 5px 7px 22px; 
background: url(images/bullet.png) no-repeat 5px 12px;
}
.dcjq-mega-menu ul.menu li .sub-container.non-mega li a:hover {
color: #0066ff;
background-image: url(images/bullet_on.png);
}

No doy con el motivo de que luego las tablas de vayan a la izquierda, ni se como decirle que en el div que va la tabla vayan centradas, alguna idea

alzacon · #2 (**permalink**) 05/11/2013, 10:48

Has probado a añadir al css de la tabla

Código CSS:

Ver originalclear: both;

miriamgomez · #3 (**permalink**) 05/11/2013, 11:07

no se si te entendi, pero he hecho esto:

#cuerpo_titulo table{
background-color: #0F3;
clear: both;
}

pero no funciona, sigo intentandolo

C2am · #4 (**permalink**) 05/11/2013, 11:09

Así sin el css que corresponde al div o a la tabla y sin el html es difícil opinar al respecto.
Publica el html y el css.
El css que muestra es tan especifico que dudo tenga algo que ver, pero claro, sin más código y sin el marcado html es pura especulación.

Tambien sirve un enlace.

Saludos

miriamgomez · #5 (**permalink**) 05/11/2013, 11:21

En este primero esta anulado el codigo css que citaba al principio:

http://sebisur.com/sistemas_biometricos/eventos.php

Pero si lo dejo para que funcione el menu pasa esto otro:

http://sebisur.com/sistemas_biometricos/noticias.php

espero que os sirva y sino os pongo todo el codigo

C2am · #6 (**permalink**) 05/11/2013, 11:28

La tabla prueba la veo centrada, lo que no se ve bien es el menú.

Uso Chrome

Edito: no había visto el segundo link

miriamgomez · #7 (**permalink**) 05/11/2013, 11:35

si, por que anule el css del menu.

Se trata de centrarlo estando ese css activo, es el que adjunte en el primer post

C2am · #8 (**permalink**) 05/11/2013, 11:48

Bueno, de acuerdo a lo que dices y a lo que pude observar:
Tienes el css del menú luego del css general, lo cual se podría considerar correcto, pero el problema es que en el menuoriginal.css tienes un reset

Código CSS:

Ver original*{margin:0 y padding:0}

que es lo que se aplica a la tabla según el inspector del Chrome.
Te recomiendo que el reset lo pongas en la primer hoja de estilos que enlaces, ya que sirve para resetear los valores por defecto de los navegadores.

Saludos

NOTA: LOS ID DEBEN SER UNICOS, NO PUEDES TENER DOS ID=CABECERA

alzacon · #9 (**permalink**) 05/11/2013, 12:09

No entiendo porque el align no funciona con el "margin:0;"
De todas formas para alinear elementos horizontalmente se puede usar

Código CSS:

Ver originalmargin: 0 auto;

miriamgomez · #10 (**permalink**) 05/11/2013, 12:13

Creo que he seguido tus consejos:

He cambiado lo de cabecera, tenían el mismo nombre por que los dos hacían la misma función, pero ya cada uno se llama de una manera.

He pasado el reset a la pagina principal de estilo (estilo.css):

*
{
margin:0;
padding:0;
}

Es necesario para el tema del menu, pero las tablas no se pueden centrar ahora en ninguna de las dos paginas.

Mil gracias por tu tiempo

C2am · #11 (**permalink**) 05/11/2013, 12:14

alzacon
Recuerda la parte de "cascada" en esto de los estilos.
El estilo que prevalece es el último declarado, a menos que exista alguno con mayor especificidad.

El margin: 0 auto; dice que el margen superior e inferior sea 0 y que el margen izquierdo y derecho sea automatico, por eso se centra horizontalmente.
En cambio margin:0; le dice que todos los margenes son 0.

Habría que investigar porque choca con el align:center.

miriamgomez · #12 (**permalink**) 05/11/2013, 12:16

he probado tambien tu consejo alzacon:

margin: 0 auto;

y tampoco

C2am · #13 (**permalink**) 05/11/2013, 12:19

En este enlace: http://sebisur.com/sistemas_biometricos/eventos.php

veo que no borraste, o al menos no subiste la modificación del menu.css, ya que se muestra ambos reset.

Además, te sugiero que uses el margin:0 auto en la hoja de estilos y no el align:center.

Saludos

CUIDADO: el reset es margin:0 y no margin:0 auto;

Si necesitas el margin:0 auto; aplicalo al elemento que necesites. Recuerda para qué sirve el reset css

C2am · #14 (**permalink**) 05/11/2013, 12:29

Pasando en limpio:

El reset en la primer hoja de estilo linkeada, que en tu caso es estilos.css, siendo ese reset:

Código CSS:

Ver original*{
margin:0;
padding:0;}

Quitar ese reset de la hoja de estilos menuoriginal.css

Quitar el align=center de la tabla.
Aplicar a la tabla el siguiente estilo:

Código CSS:

Ver original#cuerpo_titulo table {
background-color: rgb(0, 255, 51);
margin: 0 auto;}

Con esto debería funcionar... espero!

miriamgomez · #15 (**permalink**) 05/11/2013, 12:33

pedir disculpas¡¡¡

quite el reset de la hoja menuoriginal.css, pero no la subí.

Al subirla ya funciona.

De nuevo mil gracias por vuestro tiempo y esfuerzo