Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Alinear un texto a derecha y otro a izquierda dentro de <li> en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 26/06/2009, 02:51
 
Fecha de Ingreso: octubre-2008
Mensajes: 64
Antigüedad: 9 años, 1 mes
Puntos: 1
Alinear un texto a derecha y otro a izquierda dentro de <li>

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.
  #2 (permalink)  
Antiguo 26/06/2009, 03:11
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Alinear un texto a derecha y otro a izquierda dentro de <li>

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

Salud!
  #3 (permalink)  
Antiguo 26/06/2009, 03:13
 
Fecha de Ingreso: octubre-2008
Mensajes: 64
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Alinear un texto a derecha y otro a izquierda dentro de <li>

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
  #4 (permalink)  
Antiguo 26/06/2009, 06:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alinear un texto a derecha y otro a izquierda dentro de <li>

Cita:
Iniciado por AlbertoGarcia Ver Mensaje
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
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 26/06/2009, 06:37
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Alinear un texto a derecha y otro a izquierda dentro de <li>

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!

Última edición por AlbertoGarcia; 26/06/2009 a las 06:44
  #6 (permalink)  
Antiguo 26/06/2009, 08:39
 
Fecha de Ingreso: octubre-2008
Mensajes: 64
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Alinear un texto a derecha y otro a izquierda dentro de <li>

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 :)
  #7 (permalink)  
Antiguo 26/06/2009, 09:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Alinear un texto a derecha y otro a izquierda dentro de <li>

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>listas numeradas</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin:0;padding:0; position: relative;}
  7. html, body {height: 100%;}
  8. #contenedor {width:948px;;
  9. padding:10px;
  10. margin: 0 auto;
  11. background: red;
  12. overflow: hidden;
  13. }
  14. .sidebar_box {
  15. background:#cdcdc;
  16. padding:10px 10px 10px 10px;
  17. margin-bottom:20px;
  18. }
  19. .lista-clasificacion{
  20.     margin:0px;
  21.     padding: 0px;
  22.     margin-top:.5em;
  23. }
  24.  
  25. .lista-clasificacion li{
  26.   list-style-position: inside;
  27.  
  28. }
  29.  
  30. .lista-clasificacion li span{display: inline-block;
  31.   width: 250px;
  32.   border-bottom:1px dotted #444444;
  33.   line-height: 2em;
  34.   }
  35. </head>
  36. <div id="contenedor">
  37. <div class="sidebar_box">
  38. <ol class="lista-clasificacion">
  39.         <li><span>Pepe Ramírez</span><span>15 puntos</span></li>
  40.         <li><span>José Martínez</span><span>5 puntos</span></li>
  41.         <li><span>Pepe Juan</span><span>1 punto</span></li>
  42. </ol></div>
  43. </div>
  44. </body>
  45. </html>

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 26/06/2009, 10:23
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Alinear un texto a derecha y otro a izquierda dentro de <li>

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!
  #9 (permalink)  
Antiguo 28/06/2009, 20:12
Avatar de roloamoroso  
Fecha de Ingreso: mayo-2008
Ubicación: La Paz
Mensajes: 20
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Alinear un texto a derecha y otro a izquierda dentro de <li>

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> 
  #10 (permalink)  
Antiguo 29/06/2009, 21:11
 
Fecha de Ingreso: junio-2009
Mensajes: 1
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Alinear un texto a derecha y otro a izquierda dentro de <li>

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!

Última edición por juanlujones; 29/06/2009 a las 21:29
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:28.