Alinear un texto a derecha y otro a izquierda dentro de <li>

mrc2407 · #1 (**permalink**) 26/06/2009, 01:51

Buenas.

Quisiera hacer algo tipo lo siguiente:

Código:

1. Pepe Ramírez               15 puntos
2. José Fernández             10 puntos
3. Pepe Juan                   5 puntos

Es decir, el nombre alineado a la izquierda y los puntos a la derecha. Para hacerlo, tengo esto:

Código HTML:

<div class="sidebar_box">
<ol class="lista-clasificacion">
		<li><span class="usuario-classificacion">Pepe Ramírez</span> <span class="puntuacion-clasificacion">15 puntos</span></li>
		<li><span class="usuario-classificacion">José Martínez</span> <span class="puntuacion-clasificacion">5 puntos</span></li>
		<li><span class="usuario-classificacion">Pepe Juan</span> <span class="puntuacion-clssificacion">1 punto</span></li>
</ol></div>

Y esto en CSS:

Código:

.sidebar_box {
background:#111;
padding:10px 10px 10px 10px;
margin-bottom:20px;
}
.lista-clasificacion{
	margin:0px;
	padding: 0px;
	margin-top:.5em;
}

.lista-clasificacion li{
	border-top:1px dotted #444444;
	padding: 0.5em;
}

span.usuario-clasificacion{display:block;float:left;}
span.puntuacion-clasificacion{display:block;float:right;}

Pero me sale horroroso. He probado con text-align, también poniendo positin:absolute y right:0px, pero tampoco.

Alguna idea, por favor?

EDIT: Acabo de comprobar que si los span los pongo con display:block y text-align (left i right para cada uno) aparece lo que quiero, pero los puntos aparecen en la línea inferior.

AlbertoGarcia · #2 (**permalink**) 26/06/2009, 02:11

Eso son datos tabulares, usa una tabla, son para eso.

Salud!

mrc2407 · #3 (**permalink**) 26/06/2009, 02:13

Pero son datos obtenidos con PHP... Entonces como puedo poner la posición de cada persona? Con esto?

Código PHP:

<?php echo ++$posicion; ?>

:S

Mikmoro · #4 (**permalink**) 26/06/2009, 05:26

Cita:

Iniciado por AlbertoGarcia

Eso son datos tabulares, usa una tabla, son para eso.

Exacto, Alberto, no me has dado tiempo a decirlo: siempre estamos denostando las tablas, pero son justo para eso, para mostrar datos tabulares. No hay que ser más papista que el Papa

AlbertoGarcia · #5 (**permalink**) 26/06/2009, 05:37

mrc2407, no se como será tu código php, tendríamos que verlo, pero igual que lo estabas intentado hacer con la lista pero cambiando las etiquetas por las de una tabla. La posición vendrá dada por php no por html.

Mikmoro, es cierto, queda mucho camino para la web semántica de verdad. ;)

Salud!

mrc2407 · #6 (**permalink**) 26/06/2009, 07:39

Vale, os explico: al ser una clasificación, que al fin y al cabo es una lista ordenada, pensé que iría bien hacerla con <ol>. De hecho, puedo hacerlo bien, está claro, pero si quiero hacerlo como quiero la lista en realidad no sirve.

Probé de aplicar a la tabla el estilo que tenía para la lista, pero me aparecían espacios en blanco porque la tabla tiene un borde (aunque pongas border="0" aparecen espacios).

Por suerte para mí, existe la propiedad "border-collapse:collapse;" (lo pongo para los que se encuentren con el mismo problema que yo), que lo que hace es eliminar estos espacios en blanco.

Gracias por vuestra ayuda :)

kseso? · #7 (**permalink**) 26/06/2009, 08:16

Podrías aplicar el contador también a las filas de la tabla, pero si quieres seguir adelante con la idea de presentarlos como una lista numerada, quizás esto te sirva como base:

Código html:

Ver original<!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>listas numeradas</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0; position: relative;}
html, body {height: 100%;}
#contenedor {width:948px;;
padding:10px;
margin: 0 auto;
background: red;
overflow: hidden;
}
.sidebar_box {
background:#cdcdc;
padding:10px 10px 10px 10px;
margin-bottom:20px;
}
.lista-clasificacion{
    margin:0px;
    padding: 0px;
    margin-top:.5em;
}
 
.lista-clasificacion li{
  list-style-position: inside;
 
}
 
.lista-clasificacion li span{display: inline-block;
  width: 250px;
  border-bottom:1px dotted #444444;
  line-height: 2em;
  }
</style>
</head>
<body>
<div id="contenedor">
<div class="sidebar_box">
<ol class="lista-clasificacion">
        <li><span>Pepe Ramírez</span><span>15 puntos</span></li>
        <li><span>José Martínez</span><span>5 puntos</span></li>
        <li><span>Pepe Juan</span><span>1 punto</span></li>
</ol></div>
</div>
</body>
</html>

Un saludo

AlbertoGarcia · #8 (**permalink**) 26/06/2009, 09:23

Sigo creyendo que una lista no es adecuado. Lo correcto es una tabla con tres columnas y meter la posición en la primera columna (posición / nombre / puntos).

Salud!

roloamoroso · #9 (**permalink**) 28/06/2009, 19:12

Cita:

Sigo creyendo que una lista no es adecuado. Lo correcto es una tabla con tres columnas y meter la posición en la primera columna (posición / nombre / puntos).

Exacto tres columnas y para lo de lo de los borders pon:

Código HTML:

<table cellspacing="0">
<tr> bla bla bla...
</table>

juanlujones · #10 (**permalink**) 29/06/2009, 20:11

Hola mcr. Con tablas es una solución. Pero si quieres prescindir de ellas, puedes hacerlo solo con listas y css. Hay dos maneras:

1- Creando dos clases para dos etiquetas <ol> diferentes. Ala primera, supongamos que la llamas "nombres" y le das los siguientes atributos:

.nombres{
margin:5em 50px 0 0;
padding: 0;
float:left;
}

A la segunda supongamos que la llamas "puntajes", y le das lo siguiente:

.puntajes{
margin:5em 0 0 0;
padding: 0;
}

Lo que estoy haciendo es poner la segunda lista a la derecha de la primera dandole la propiedad float:left a la primera y separándolas con un margen de 50px. Fijate que los valores de margin puedes ponerlos todos en la misma declaración, en sentido de las agujas del reloj empezando por top.
Ciudado que el margin-top de 5em que le estás agregando puede traerte problemas en etse caso. Si quieres que queden alineadas arriba recomiendo que soluciones ese margen de otra manera.

2- Si sabes cual es el elemento que está antes de tus listas, o dentro de que contenedor están, te puedes ahorrar el hecho de crear clases, concatenando simplemente las etiquetas.

Por ejemplo, si tu lista está en un div cuyo id es "main", puedes declarar lo siguiente para la primera lista:

#main ol{
margin:5em 50px 0 0;
padding: 0;
float:left;
}

Y para la segunda:

#main ol + ul{
margin:5em 0 0 0;
padding: 0;

}

El espaciado entre #main y ol, indica que las declaraciones se apliquen para todo elemento ol dentro del div main. La concatenación "+" entre ol y ul (si es que la segunda lista es ul) indica que las declaraciones se apliquen a todos los elementos ul que estén inmediatamente seguidos a cualquier ol que a su vez esté dentro del div main. ¿Me explico????

De esta maneera te ahorras la creación de clases y te aseguras de que lo que declares sólo se aplicará para ese caso específico y no para todas las demás ul y ol.

Espero que siva de algo.
Salute!