Alineación con tablas en CSS (display: table)

Th3_Night · #1 (**permalink**) 20/01/2012, 17:40

Según tengo entendido display: table; y display: table-cell; funcionan para crear una table en CSS, le asignas un ancho y debería funcionar. Lo trato de agregar a un sitio y se alinea uno después de otro siendo que deberían estar en una sola línea.

Funcionando con Html5.
Captura de pantalla:

Html:

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Indice</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="global.css">
        <script type="text/javascript" src="jscript/jquery.min.js"></script>
        <script type="text/javascript" src="jscript/fadegray.js"></script>    
    </head>
    <body class="ultimos">
        <div class="topline"></div>
        <header><div><!-- Cabecera -->
            <a href="index.html"><div class="logo"></div></a>
            <nav><!-- Navegacion --> 
            <ul>
            <li><a href="ultimos" class="ultimos">Últimos</a></li>
            <li><a href="en_emision">En emisión</a></li>
            <li><a href="populares">Populares</a></li>
            <li><a href="series" class="series">Todas</a></li>
            <li><a href="#">Buscador</a></li>
            </ul>
            </nav><!-- Fin de la navegacion -->
        </div></header><!-- Fin de la cabecera -->
                
        <div id="content"><!-- Contenido -->
            <div id="gallery"><!-- Galeria -->
            <h1>Ultimos episodios</h1>
                <ul>
                    <li><a href="series/naruto"><img src="uploads/naruto.png"></a></li>
                    <li><a href="series/one_piece"><img src="uploads/one_piece.png"></a></li>
                    <li><a href="series/bleach"><img src="uploads/bleach.png"></a></li>
                    <li><a href="series/fairy_tail"><img src="uploads/fairy_tail.png"></a></li>
                    <li><a href="series/naruto"><img src="uploads/naruto.png"></a></li>
                    <li><a href="series/one_piece"><img src="uploads/one_piece.png"></a></li>
                    <li><a href="series/bleach"><img src="uploads/bleach.png"></a></li>
                    <li><a href="series/fairy_tail"><img src="uploads/fairy_tail.png"></a></li>
                </ul>
            </div><!-- Fin de la galeria -->
            <aside><!-- Publicidad -->
                <img src="uploads/publicidad.png">
            </aside><!-- Fin de la publicidad -->
        </div><!-- Fin del contenido -->
    
        <div class="bottomline"></div><!-- Pie de pagina -->
        <footer>
            <div>
                <section class="links">
                <ul>
                    <li><a href="help.php">Ayuda</a></li>
                    <li><a href="about.php">Acerca de</a></li>
                    <li><a href="copyright.php">Derechos de autor</a></li>
                    <li><a href="contact.php">Contacto</a></li>
                    <li><a href="team.php">Equipo</a></li>
                    <li><a href="adverten.php">Publicidad</a</li>
                    <li><a href="send_error.php">Notificar un error</a>
                </ul>
                </section>
                <section class="social">
        	<ul>
                    <li class="f_facebook"><a href="http://facebook.com"><img src="images/f_facebook.png"></a></li>
                    <li class="f_twitter"><a href="http://twitter.com"><img src="images/f_twitter.png"></a></li>
                    <li class="f_rss"><a href="#"><img src="images/f_rss.png"></a></li>
                    <li class="f_rss"><a href="#"><img src="images/f_logo.png"></a></li>
                </ul>
                </section>
            </div>               
        </footer>
    </body>
</html>

CSS:

Código PHP:

  /* ============================================================================= 
   Base 
   ========================================================================== */ 
    /* Resetear propiedades margin y padding */ 
    * { 
    margin: 0; 
    padding: 0; 
    } 
 
    /* Le decimos a los navegadores que renderize todos las etiquetas nuevas de HTML5 como block */  
    header, section, footer, aside, nav, article, figure { 
    display: block; 
    } 
     
    ::selection { background-color: rgba(122, 192, 0, 0.2); } 
    ::-moz-selection { background-color: rgba(122, 192, 0, 0.2); border: 10px solid red; } 
 
    img { 
    border: none; 
    } 
 
    :focus { 
    outline: 0; 
    } 
     
    h1 { 
    font-family: GillSans MT Condensed; 
    font-size: 35px; 
    line-height: 35px; 
    border-bottom: #bdbdbd 3px dashed; 
    display: inline; 
    } 
     
    p { 
    margin: 0; 
    line-height: 14px; 
    } 
     
    b, strong { font-weight: bold; } 
 
    html, body { 
    height: 100%; 
    } 
 
/* ============================================================================= 
   Global 
   ========================================================================== */ 
 
    body { 
        background: #efefef url(images/bg_body.png); 
        color: #151515; 
        font-family: Colaborate Regular, Arial; 
        font-size: 13px; 
        text-transform: uppercase; 
        text-align: center; 
        margin: 0; padding: 0; 
    } 
     
    a:link, a:visited { color: #000; text-decoration: none; } 
    a:hover, a:active { color: #000; text-decoration: underline; } 
 
    /* Mejora la legibilidad cuando el puntero pasa sobre el y es cliqueado -en todos los navegadores- */ 
    a:hover, a:active { outline: 0; } 
 
    .logo { 
        background: url(images/logo.png) no-repeat; 
        height: 57px; 
    width: 150px; 
    margin: 25px 0 0 0; 
    } 
     
    .topline { 
        background: url(images/topline.png) repeat-x; 
        height: 15px; 
        width: 100%; 
        top: 0; left: 0; right: 0; 
    position: absolute; 
    } 
     
    header { 
        background: url(images/bg_header.png) repeat-x; 
        padding: 15px 0; 
    height: 100px; 
        width: 100%; 
    } 
     
    header div { 
    width: 950px; 
    margin: auto auto; 
    } 
 
    nav ul{ 
        font-size: 13px; 
        float: right; 
        margin: -25px 0 0 0; 
        padding: 0; 
    } 
 
    nav ul li{ 
        float: left; 
        margin: 0 3px 0 3px; 
        padding: 0; 
        list-style: none; 
    } 
 
    nav ul li a, nav ul li a:visited{ 
        color: #000; 
        text-decoration: none; 
        font-weight: bold; 
        padding: 4px 7px 4px 7px; 
    } 
 
    nav ul li a:hover, nav ul li a:active { 
    text-decoration: none; 
    } 
 
    body.ultimos nav ul li a.ultimos{ 
        color: #fff; 
        background: #7195d2; 
        border-radius: 4px; 
        -webkit-border-radius: 4px; 
        -moz-border-radius: 4px; 
    } 
     
    #content { 
        width: 950px; 
    display: table; 
    margin: auto auto; 
    text-align: left; 
    } 
     
    #gallery { 
    display: table-cell; 
    width: 740px; 
    } 
     
    aside { 
    display: table-cell; 
    width: 230px; 
    } 
     
    div#gallery ul { 
    list-style: none; 
    margin: 20px 0 0 0; padding: 0; 
    } 
 
    div#gallery ul li { 
        background: #1c1c1c; 
        float: left; 
        margin: 10px 10px 10px 0; 
        display: inline; /*--IE6 Fix - Arregla el fallo de doble margen en IE6--*/ 
    } 
 
    div#gallery ul li a img { 
        background: #1c1c1c; 
        padding: 6px; 
        width: 145px; /*--Ancho de la imagen--*/ 
        height: 200px; /*--Alto de la imagen--*/ 
    } 
 
    .label { 
    background: #5d7bc0; 
    padding: 3px 4px; 
    color: #efefed; 
    font-face: Colaborate Medium; 
    font-size: 15px; 
    } 
     
    .bottomline { 
        background: url(images/bottomline.png) repeat-x; 
        height: 15px; 
        width: 100%; 
    margin-top: 117px; 
    }   
     
    footer { 
        background: #151515; 
        width: 100%; 
    height: 100px; 
    position: absolute; 
    } 
     
    footer div { 
        width: 950px; 
    display: table; 
    margin: auto auto; 
    } 
         
    footer div section.links { 
    display: table-cell; 
    width: 50%; 
    text-align: center; 
    } 
 
    footer div section.links ul  { 
        margin: 0 0 0 0; padding: 0; 
    font-weight: 600; 
    } 
     
    footer div section.links ul li { 
    margin: 0 15px 0 0; 
    list-style:none; 
    float: left; 
    padding: 0; 
    }     
     
    footer div section.social { 
    display: table-cell; 
    width: 50%; 
    } 
     
    footer div section.social ul { 
    margin: 15px 0 0 0; 
    } 
 
    footer div section.social ul li { 
        margin: 0 0 0 20px; 
        list-style: none; 
    float: left; 
    padding: 0; 
    } 
         
    footer div section ul li a:link, footer div section ul li a:visited, footer div section ul li a:hover, footer div section ul li a:active { 
    color: #fff; 
    text-decoration: none; 
    } 
 
/* ============================================================================= 
   Typograprafías 
   ========================================================================== */ 
 
    @font-face { 
    font-family: 'GillSans MT Condensed'; 
    src: url('fonts/gilsans.eot'); 
    src: url('fonts/gilsans.eot?#iefix') format('embedded-opentype'); 
    src: url('fonts/gilsans.ttf') format('truetype'); 
    src: url('fonts/gilsans.otf'); 
    font-weight: normal; 
    font-style: normal; 
} 
 
    @font-face { 
    font-family: 'Colaborate Regular'; 
    src: url('fonts/colaborater.eot'); 
    src: url('fonts/colaborater.eot?#iefix') format('embedded-opentype'); 
    src: url('fonts/colaborater.ttf') format('truetype'); 
        src: url('fonts/colaborater.otf'); 
    font-weight: normal; 
    font-style: normal; 
}