Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Alineación con tablas en CSS (display: table) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/01/2012, 17:40
Avatar de Th3_Night  
Fecha de Ingreso: junio-2011
Ubicación: Montevideo
Mensajes: 8
Antigüedad: 13 años
Puntos: 1
Alineación con tablas en CSS (display: table)

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 */
    
* {
    
margin0;
    
padding0;
    }

    
/* Le decimos a los navegadores que renderize todos las etiquetas nuevas de HTML5 como block */ 
    
headersectionfooterasidenavarticlefigure {
    
displayblock;
    }
    
    ::
selection background-colorrgba(12219200.2); }
    ::-
moz-selection background-colorrgba(12219200.2); border10px solid red; }

    
img {
    
bordernone;
    }

    :
focus {
    
outline0;
    }
    
    
h1 {
    
font-familyGillSans MT Condensed;
    
font-size35px;
    
line-height35px;
    
border-bottom#bdbdbd 3px dashed;
    
displayinline;
    }
    
    
{
    
margin0;
    
line-height14px;
    }
    
    
bstrong font-weightbold; }

    
htmlbody {
    
height100%;
    }

/* =============================================================================
   Global
   ========================================================================== */

    
body {
        
background#efefef url(images/bg_body.png);
        
color#151515;
        
font-familyColaborate RegularArial;
        
font-size13px;
        
text-transformuppercase;
        
text-aligncenter;
        
margin0padding0;
    }
    
    
a:linka:visited color#000; text-decoration: none; }
    
a:hovera:active color#000; text-decoration: underline; }

    /* Mejora la legibilidad cuando el puntero pasa sobre el y es cliqueado -en todos los navegadores- */
    
a:hovera:active outline0; }

    .
logo {
        
backgroundurl(images/logo.pngno-repeat;
        
height57px;
    
width150px;
    
margin25px 0 0 0;
    }
    
    .
topline {
        
backgroundurl(images/topline.pngrepeat-x;
        
height15px;
        
width100%;
        
top0left0right0;
    
positionabsolute;
    }
    
    
header {
        
backgroundurl(images/bg_header.pngrepeat-x;
        
padding15px 0;
    
height100px;
        
width100%;
    }
    
    
header div {
    
width950px;
    
marginauto auto;
    }

    
nav ul{
        
font-size13px;
        
floatright;
        
margin: -25px 0 0 0;
        
padding0;
    }

    
nav ul li{
        
floatleft;
        
margin0 3px 0 3px;
        
padding0;
        list-
stylenone;
    }

    
nav ul li anav ul li a:visited{
        
color#000;
        
text-decorationnone;
        
font-weightbold;
        
padding4px 7px 4px 7px;
    }

    
nav ul li a:hovernav ul li a:active {
    
text-decorationnone;
    }

    
body.ultimos nav ul li a.ultimos{
        
color#fff;
        
background#7195d2;
        
border-radius4px;
        -
webkit-border-radius4px;
        -
moz-border-radius4px;
    }
    
    
#content {
        
width950px;
    
displaytable;
    
marginauto auto;
    
text-alignleft;
    }
    
    
#gallery {
    
displaytable-cell;
    
width740px;
    }
    
    
aside {
    
displaytable-cell;
    
width230px;
    }
    
    
div#gallery ul {
    
list-stylenone;
    
margin20px 0 0 0padding0;
    }

    
div#gallery ul li {
        
background#1c1c1c;
        
floatleft;
        
margin10px 10px 10px 0;
        
displayinline/*--IE6 Fix - Arregla el fallo de doble margen en IE6--*/
    
}

    
div#gallery ul li a img {
        
background#1c1c1c;
        
padding6px;
        
width145px/*--Ancho de la imagen--*/
        
height200px/*--Alto de la imagen--*/
    
}

    .
label {
    
background#5d7bc0;
    
padding3px 4px;
    
color#efefed;
    
font-faceColaborate Medium;
    
font-size15px;
    }
    
    .
bottomline {
        
backgroundurl(images/bottomline.pngrepeat-x;
        
height15px;
        
width100%;
    
margin-top117px;
    }  
    
    
footer {
        
background#151515;
        
width100%;
    
height100px;
    
positionabsolute;
    }
    
    
footer div {
        
width950px;
    
displaytable;
    
marginauto auto;
    }
        
    
footer div section.links {
    
displaytable-cell;
    
width50%;
    
text-aligncenter;
    }

    
footer div section.links ul  {
        
margin0 0 0 0padding0;
    
font-weight600;
    }
    
    
footer div section.links ul li {
    
margin0 15px 0 0;
    list-
style:none;
    
floatleft;
    
padding0;
    }    
    
    
footer div section.social {
    
displaytable-cell;
    
width50%;
    }
    
    
footer div section.social ul {
    
margin15px 0 0 0;
    }

    
footer div section.social ul li {
        
margin0 0 0 20px;
        list-
stylenone;
    
floatleft;
    
padding0;
    }
        
    
footer div section ul li a:linkfooter div section ul li a:visitedfooter div section ul li a:hoverfooter div section ul li a:active {
    
color#fff;
    
text-decorationnone;
    }

/* =============================================================================
   Typograprafías
   ========================================================================== */

    
@font-face {
    
font-family'GillSans MT Condensed';
    
srcurl('fonts/gilsans.eot');
    
srcurl('fonts/gilsans.eot?#iefix'format('embedded-opentype');
    
srcurl('fonts/gilsans.ttf'format('truetype');
    
srcurl('fonts/gilsans.otf');
    
font-weightnormal;
    
font-stylenormal;
}

    @
font-face {
    
font-family'Colaborate Regular';
    
srcurl('fonts/colaborater.eot');
    
srcurl('fonts/colaborater.eot?#iefix'format('embedded-opentype');
    
srcurl('fonts/colaborater.ttf'format('truetype');
        
srcurl('fonts/colaborater.otf');
    
font-weightnormal;
    
font-stylenormal;


Etiquetas: alineacion, contenido, display, html, html5, tablas, table-cell;, table;
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 23:36.