Foros del Web » Creando para Internet » CSS »

span de ancho variable pero que siempre termine a la misma altura.

Estas en el tema de span de ancho variable pero que siempre termine a la misma altura. en el foro de CSS en Foros del Web. Buenas tardes compañeros, esta vez traigo un reto que creo será un poco difícil. Tengo una lista con palabras de distintos tamaños, digamos algo así: ...
  #1 (permalink)  
Antiguo 28/02/2010, 23:25
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
span de ancho variable pero que siempre termine a la misma altura.

Buenas tardes compañeros, esta vez traigo un reto que creo será un poco difícil.

Tengo una lista con palabras de distintos tamaños, digamos algo así:

Código HTML:
<h2>Calificaciones.</h2>
<ul>
<li>Ana<span class="bar">-</span>9</li>
<li>Maria<span class="bar">-</span>7</li>
<li>Ana Maria<span class="bar">-</span>8</li>
</ul> 
La idea es mediante CSS, hacer que el span tenga color transparente y un fondo que muestre un patrón. Quiero que comience al terminar el nombre, pero terminen todos a la misma altura, para que los números queden alineados:

Calificaciones.
· Ana ---------------- 9
· Maria -------------- 7
· Ana Maria --------- 8

¿Alguien sabría como podría hacer este efecto?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #2 (permalink)  
Antiguo 01/03/2010, 11:02
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 7 años, 11 meses
Puntos: 45
Respuesta: span de ancho variable pero que siempre termine a la misma altura.

Buenas,

a ver que te parece mi propuesta, probado en firefox y opera

Código HTML:
Ver original
  1. <dl>
  2.     <dt><em>nombre</em></dt>
  3.     <dd>9</dd>
  4.     <dt><em>nombre mucho pero que mucho mas largo</em></dt>
  5.     <dd>10</dd>
  6. </dl>

Código CSS:
Ver original
  1. dt {
  2.     background: #f2ecf6 url(imagen_patron);
  3.     line-height: 15px;
  4.     margin-right: 30px;
  5. }
  6.  
  7. dd {
  8.     background: #f2ecf6;
  9.     line-height: 15px;
  10.     margin-top: -15px;
  11.     text-align: right;
  12.     width: 30px;
  13.     float: right;
  14. }
  15.  
  16. em {
  17.     background: #f2ecf6;    /* sin color se ve el patron bajo el texto */
  18.     padding-right: 10px;
  19. }
  #3 (permalink)  
Antiguo 01/03/2010, 12:04
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: span de ancho variable pero que siempre termine a la misma altura.

probá poniendole a tu span

Cita:
span {width:medida en px o %;display:inline-block;}
Espero funcione, yo lo utilice para unos labes de un form y no tuve problemas
  #4 (permalink)  
Antiguo 01/03/2010, 15:19
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: span de ancho variable pero que siempre termine a la misma altura.

¡Muchísimas gracias a los dos!

Al final, he tenido que hacer un pequeño híbrido:

Código HTML:
<h2>Calificaciones.</h2>
<ul class="calif">
<li><span><em>Ana</em>-</span>9</li>
<li><span><em>Maria</em>-</span>7</li>
<li><span><em>Ana Maria</em>-</span>8</li>
</ul> 
Código:
.calif li span{color:transparent;background:url('bar.png') repeat-x;width:20em;display:inline-block}
.calif li span em{color:#000;background:#fff;font-style:normal}
Había intentado hacerlo con un .calif li span span, pero hacía unas cosas extrañas... Creo que debía haber puesto algo como "hijo de" o hacerlo con clases. Pero de cualquier forma, creo que semánticamente el nombre sería la parte enfatizada de la lista, aunque no lo muestre en itálica, por lo que no representaría un error

Muchísimas gracias
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 01/03/2010, 16:07
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: span de ancho variable pero que siempre termine a la misma altura.

Cita:
Iniciado por daPhyre Ver Mensaje
¡Muchísimas gracias a los dos!

Etiquetas: altura, ancho, siempre, span, variables
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 07:42.