Comunidad de diseño web y desarrollo en internet online

Crear lista de informacion con UL - LI

Citar            
MensajeEscrito el 17 Dic 2009 07:17 pm
Necesito crear un listado que desplige 15 lineas de informacion, pero que esta tabulada
Ej:

Código HTML :

ul li span{
  width: 300px;
  float: right;
}
<ul>
  <li>Nombre<span>: Cristalab</span></li>
  <li>Direccion<span>: www.cristalab.com</span></li>
  <li>Tema<span>: Foros</span></li>
...
</ul>


Para que se vea algo haci:

Código HTML :

  Nombre    : Cristalab
  Direccion : www.cristalab.com
  Tema      : Foros


Pero hasta el momento no puedo hacer que me funcione.-

Por york3rs

Claber

561 de clabLevel

1 tutorial

Genero:Masculino  

LA___Chile

firefox
Citar            
MensajeEscrito el 17 Dic 2009 08:06 pm
Hola York3rs

Creo que en este caso, por lo poco que muestras, estaría plenamente justificado el uso de una tabla. Creo que lo que estás haciendo es presentar datos relacionados de forma estructurada (información tabulada).

También, quizás, lo apropiado fuese utilizar una lista de definición (dl/dt/dd). Pero no das la suficiente información como para poder asegurarlo.

Así que sólo queda responder a lo que planteas con los datos que aportas.
Fíjate que cambio lo que coloco en el span:

Código HTML :

<!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="es-es">
<head>
<title>DvillB: formularios</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0; position: relative;}
* html, * body { height:100%; overflow:auto;}
body {
  font-family: Verdana, Arial, sans-serif;
  font-size: 100%;
  background: #FFF;
}
ul {}
ul li {
  display:block;
  padding:5px;
  width:25em;
  text-shadow:1px 1px 1px #cdcdcd;
}
ul li span {
  display:inline-block;
  font-weight:bold;
  width:7em;  
}
li:nth-child(2n+1) {background: #707F00;}
li:nth-child(2n) {background: #707FF0;}
</style>
</head>
<body>
<ul> 
  <li><span>Nombre</span>Cristalab</li> 
  <li><span>Direccion</span>www.cristalab.com</li> 
  <li><span>Tema</span>Foros</li> 
</ul> 
</body>
</html>


Me he permitido un par de propiedades css3 sólo como adorno.

Saludos

Por DvillB

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Dic 2009 10:23 pm
Muchas gracias Dvillb, me finalizastes horas de pruebas.
Y la solucion magica era solo " display:inline-block;"

Por york3rs

Claber

561 de clabLevel

1 tutorial

Genero:Masculino  

LA___Chile

firefox
Citar            
MensajeEscrito el 18 Dic 2009 09:01 am
Hola york3rs.

Solo ten en cuenta que la propiedad inline-block no es aceptada por IE5.5, por Firefox 2 y no lo es completamente por IE6. Aunque otro debate sería si tenemos que seguir programando webs para navegadores como IE5.5 o IE6... algun día tendremos que dejar de hacerlo.

Por Osdiwe

5 de clabLevel



 

firefox
Citar            
MensajeEscrito el 18 Dic 2009 09:57 pm
si, también veo eso como tabulación de datos, pero creo que podría hacerse de cualquiera de estas 2 formas:

Código HTML :


<table>
   <caption>Webs Favoritas</caption>
   <tbody>
      
      <tr>
         <th scope="row">Nombre</th>
         <td>cristalab</td>
      </tr>
      
      <tr>
         <th scope="row">Dirección</th>
         <td>www.cristalab.com</td>
      </tr>
      
      <tr>
         <th scope="row">Tema</th>
         <td>desarrollo web y casa de orates</td>
      </tr>
   </tbody>
</table>




Código HTML :

<style type="text/css" media="all">
li strong{
   display: inline-block;
   width: 90px;
}
</style>
<h3>Webs Favoritas</h3>
<ul>
   <li><strong>Nombre : </strong>cristalab</li>
   <li><strong>Dirección : </strong> http://www.cristalab.com</li>
   <li><strong>Tema : </strong>desarrollo web y casa de orates</li>
</ul>

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 18 Dic 2009 10:01 pm
Osdiwe, en lo personal ya no le doy soporte a IE6 me basta con que se pueda leer y siquiera eso, sobre FF2 creo que si soportaba esa etiqueta, de todos modos los usuarios de FF tienden a mantener actualizado su browser, por lo que no tomo en cuenta FF 2



osea, actualmente e incluso pensando en IE7 (que ya esta casi obsoleto) se puede usar inline-block con seguridad, sobre todo en cosas que no son estructurales como estas, quizas para crear columnas prefiero seguir usando la tecnica de los floats

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.