Listado sin usar tablas, puro css

therocha · #1 (**permalink**) 11/04/2008, 09:38

Hola a todos tengo un problema despues de buscar la forma en hacer un listado con css, ahora me encuentro con otro y es que se me descuadra todo! hasta donde he podido ver se trata de un problema en:

Código PHP:

  #tabla li {

    width: 250px;

    display:block;

    float:left; <--- EXACTAMENTE AQUÍ

    border-bottom: .05em solid #666;

    padding: 1px;

    margin: 0px;

}

Ahí se puede ver cómo esta el problema
www[.]erikrocha[.]info/tmp/listado.php

Código PHP:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Cyber Control</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>

<body>

<div id="contenedor">

    <div id="header">

        <h1> Internet - Darlynet </h1>

    </div>

    

    <div id="listaUsuarios">

        

         <div id="tabla">

            <ul id="cabecera">    

              <li>Nombre</li>

              <li>Apellidos</li>

              <li>Fecha Alta</li>

            </ul>

            <?for($i=1;$i<=$num;$i++){?>

            <?$row = mysql_fetch_array($usuarios);?>

            <ul>

              <li><?echo $row[nombre]?></li>

              <li><?echo $row[apellidos]?></li>

              <li><?echo $row[fechalta]?></li>

            </ul>

            <?}?>

            

        </div>

    </div>

    

    <div  id="footer">Este es el footer</div>

 
</div>

</body>

</html>

Aquí vá la hoja de estílos

Código PHP:

  #contenedor{

  text-align: left;

  border: 1px solid #cccccc;

  width:95%;

  font-family: "Lucida Sans Unicode" ;

  font-size: 12px;

}

 
#header{

  margin: 20px;

  background-color: #cccccc;

}

 
#footer{

  float:left;

  margin: 20px;

  background-color: #ccccff;

}

 
#listaUsuarios{

  background-color:#ccffcc;

  margin: 20px;

}

 
 
#tabla {

    width: 900px;

    margin: 10px;

}

#tabla ul {

    list-style:none;

    text-align: left;

    margin: 0px;

}

 
#tabla li {

    width: 250px;

    display:block;

    float:left;

    border-bottom: .05em solid #666;

    padding: 1px;

    margin: 0px;

}

 
#cabecera li {

    font-weight: bold;

    color: black;

    background-color:#cccccc;

}

Ahora cómo que no me convence esta forma de hacer un listado con css, exite alguna forma mejor de hacerlo? toda sugerencia es bienvenida gracias.

juaniquillo · #2 (**permalink**) 11/04/2008, 09:42

No entiendo por que no usas una tabla para estos casos. Por lo que veo lo que quieres hacer no es un listado, sino mostrar información tabular.