Comunidad de diseño web y desarrollo en internet online

¿Usar tabla o no en este caso?

Citar            
MensajeEscrito el 02 Nov 2010 06:56 am
Les comento, me pidieron poner estos datos alineados estilo tablas; para esto me pidieron que lo hiciera con tablas pero yo estoy intentando hacerlo con CSS.

Código HTML :

<style type="text/css">
.producto{
  width:500px;
}
.producto li{
  list-style:none;
  padding-left:1px;
  margin-top:1px;
  width:45%;
  display: inline-block;
}
.producto li strong{
  display: inline-block;
  width: 30%;
}
.producto li span{
  width:65%;
}
</style>

<div class="producto">
  <ul class="producto">
    <li><strong>Categoria:</strong> <span ui:field="spRealtyCategoryName">Este es un texto super largo de prueba</span></li>
    <li><strong>Tipo Operacion:</strong> <span ui:field="spOperationType">asdfasdf</span></li>
    <li><strong>Precio:</strong><span ui:field="spFromPrice">asfd</span></li>
    <li><strong>Cuartos:</strong> <span ui:field="spBedrooms">asdf</span></li>
    <li><strong>Baños:</strong> <span ui:field="spBathrooms">asdf</span></li>
    <li><strong>Est:</strong> <span ui:field="spParkingSpaces">asdf</span></li>
    <li><strong>Terreno:</strong> <span ui:field="spLotSize">asdf</span></li>
    <li><strong>Const:</strong> <span ui:field="spConstructionSize">asdf</span></li>
  </ul>
  </div>



Tengo una lista a dos columnas y dentro de cada tag li tengo un strong y un span(necesario para instanciarlo y setearle valores desde GWT) pero el problema es que cuando el texto del span es mas largo queda debajo del strong, cuando deberia alinearse debajo de donde comienza el texto, osea debajo del strong debe quedar en blanco y el texto debe continiar debajo de donde comenzo el mismo span; como si fuera una sola celda de la tabla.

Les dejo el link de prueba: http://www.jorgelig.com/pruebas/test.html

Por Jorgelig

Claber

3035 de clabLevel

12 tutoriales

 

Monterrey, Nuevo Leon, MX

chrome
Citar            
MensajeEscrito el 02 Nov 2010 10:36 am
¿Y por qué no quieres usar tablas?, claramente lo que quieres hacer ES una tabla.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 02 Nov 2010 12:41 pm
Efectivamente tambien puede ser una tabla, aunque no veo mal que sea una lista de carateristicas

Código HTML :

<style type="text/css">
.producto{
  width:500px;
}
.producto tr{
  padding-left:1px;
  margin-top:1px;
  width:45%;
  vertical-align: top;
  display: inline-block;
}
.producto th{
  width: 30%;
  font-weight: bold;
}
.producto li td{
  width:65%;
}
</style>
<table class="producto">
  <tbody>
    <tr><th>Categoria:</td><td>Este es un texto super largo de prueba</td></tr>
    <tr><th>Tipo Operacion:</th><td>asdfasdf</td></tr>
    <tr><th>Precio:</th><td>asfd</td></tr>
    <tr><th>Cuartos:</th> <td>asdf</td></tr>
    <tr><th>Baños:</th><td>asdf</td></tr>
    <tr><th>Est:</th><td>asdf</td></tr>
    <tr><th>Terreno:</th><td>asdf</td></tr>
    <tr><th>Const:</th><td>asdf</td></tr>
  </tbody>
</table>

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 02 Nov 2010 04:38 pm
Tnks :)

Por Jorgelig

Claber

3035 de clabLevel

12 tutoriales

 

Monterrey, Nuevo Leon, MX

chrome

 

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