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.