Foros del Web » Creando para Internet » CSS »

Ancho de un span basado en el ancho de un texto contenido

Estas en el tema de Ancho de un span basado en el ancho de un texto contenido en el foro de CSS en Foros del Web. Hola señores Tengo varios span dentro de un div usando los siguientes id class: Código HTML: #menu span { font-weight: bold; color: #666666; display: block; ...
  #1 (permalink)  
Antiguo 15/01/2009, 14:14
Avatar de junihh  
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 13 años, 10 meses
Puntos: 7
Ancho de un span basado en el ancho de un texto contenido

Hola señores

Tengo varios span dentro de un div usando los siguientes id class:

Código HTML:
#menu span {
	font-weight: bold;
	color: #666666;
	display: block;
	padding-top: 6px;
	padding-right: 8px;
	padding-bottom: 6px;
	padding-left: 8px;
}
#t1 {
	background-color: #FFCC00;
	width: 88px;
}
#t2 {
	background-color: #CC99CC;
	width: 74px;
}
#t3 {
	background-color: #99CC00;
	width: 124px;
}
El div que contiene los span tiene aplicado el id #menu.

A cada span le aplico los id t1, t2, t3, etc. Como pueden ver el ancho que le aplico a cada span esta puesto manual al igual que el color. El color si debe permanecer manual, pero es posible hacer que el ancho del span sea en relacion al ancho del titulo que contiene, calculado de forma automatica ???.
__________________
JuniHH
- Mi blog
- Mi portafolio

Última edición por junihh; 15/01/2009 a las 14:19
  #2 (permalink)  
Antiguo 15/01/2009, 15:01
Avatar de yosoyraro  
Fecha de Ingreso: enero-2009
Ubicación: Madrid
Mensajes: 26
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Ancho de un span basado en el ancho de un texto contenido

Puedes poner la url de ejemplo?
:)
  #3 (permalink)  
Antiguo 15/01/2009, 15:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ancho de un span basado en el ancho de un texto contenido

No deberías necesitar las medidas exactas,

<div id="menu">
<span id="t1> contenido dentro del span</span>
...
</div>
debería aplicarle las propiedades de #menu span (padding: 6px 8px; y resto) y a mayores las de #t1 ( no se anula ninguna al ser diferentes).

Así que no necesitas calcular de antemano el tamaño.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 15/01/2009, 15:31
 
Fecha de Ingreso: octubre-2008
Mensajes: 2
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Ancho de un span basado en el ancho de un texto contenido

La solución puede ser agregar:

Código:
#menu span {
  ...
  width: auto;
  white-space: nowrap;
}
y quitar el ancho a los # de los spans
  #5 (permalink)  
Antiguo 15/01/2009, 15:39
Avatar de junihh  
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 13 años, 10 meses
Puntos: 7
Respuesta: Ancho de un span basado en el ancho de un texto contenido

Gracias por sus respuestas.

@kseso?, como bien dices realmente no lo necesitaria, ya que el span lo hace automatico, pero el problema es que me vi forzado a aplicar display: block; para que quedaran uno bajo el otro y no uno junto al otro.

Los div tampoco permiten el ancho automatico.

Aqui tienes la muestra y aqui el CSS.
__________________
JuniHH
- Mi blog
- Mi portafolio
  #6 (permalink)  
Antiguo 15/01/2009, 15:46
Avatar de junihh  
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 13 años, 10 meses
Puntos: 7
Respuesta: Ancho de un span basado en el ancho de un texto contenido

@wilburhimself, lo siento amigo, tampoco funciono.
__________________
JuniHH
- Mi blog
- Mi portafolio
  #7 (permalink)  
Antiguo 15/01/2009, 16:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ancho de un span basado en el ancho de un texto contenido

Prueba:
Cita:
#menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
//text-shadow: #000000 1px 2px 2px;
}
#menu a {
color: #FFFFFF;
text-decoration: none;
}
#menu a:hover {
color: #FFFFFF;
text-decoration: underline;
}
#menu span {
font-weight: bold;
color: #666666;
padding: 6px 8px;
}
#t1 {
background-color: #FFCC00;
}
#t2 {
background-color: #CC99CC;
}
#t3 {
background-color: #99CC00;
}
Cita:
<body>
<div id="menu">
<p><span id="t1"><a href="#">quiénes somos</a></span></p>
<p><span id="t2"><a href="#">cómo usarla</a></span><p>
<p><span id="t3"><a href="#">preguntas frecuentes</a></span><p>
</div>
</body>
Pero para un menú, sería más correcto usar listas desordenadas (ul/li)
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 15/01/2009, 16:52
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: Ancho de un span basado en el ancho de un texto contenido

Cita:
Iniciado por kseso? Ver Mensaje
Pero para un menú, sería más correcto usar listas desordenadas (ul/li)
Desde luego que sí.

¿Y por qué no le quitas el display: block a los span y se lo pones a los enlaces:

Cita:
#menu a {
color: #FFFFFF;
text-decoration: none;
display: block;
}
Te cortará la línea igual, pero te permitirá que los span se comporten como deben.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 15/01/2009, 18:32
Avatar de junihh  
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 13 años, 10 meses
Puntos: 7
Respuesta: Ancho de un span basado en el ancho de un texto contenido

@Mikmoro: Lo hice pero cada span asumio el 100% del browser, asi que no me sirve. Fue por eso que me vi precisado a forzarle el ancho con width:value.

@kseso?: Al agregarle paragraph a su vez me agrega un espacio que no quiero entre los div.

Ciertamente no me queda otra que intentarle con ul/li. Ni modo. Muchas gracias amigos por todas sus buenas sugerencias.
__________________
JuniHH
- Mi blog
- Mi portafolio
  #10 (permalink)  
Antiguo 16/01/2009, 01:40
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: Ancho de un span basado en el ancho de un texto contenido

Cita:
Iniciado por junihh Ver Mensaje
@Mikmoro: Lo hice pero cada span asumio el 100% del browser, asi que no me sirve.
Repito:
Cita:
¿Y por qué no le quitas el display: block a los span y se lo pones a los enlaces?
Si lo has quitado, es sencillamente imposible que te ocupen el 100%, a menos que se lo estés poniendo mediante su clase o algo así.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 16/01/2009, 07:35
Avatar de junihh  
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 13 años, 10 meses
Puntos: 7
Respuesta: Ancho de un span basado en el ancho de un texto contenido

@Mikmoro: Simple, para muestra un link:

1) De esta forma lo deje finalmente, con el "display: block;" en el span y el ancho forzado en el id de cada span:
http://junihh.info/menu/01/

2) Aqui lo tienes con el "display: block;" en el enlace y no en el span. No tiene el ancho forzado:
http://junihh.info/menu/02/

3) Aqui lo tienes con el "display: block;" en el span y sin ponerle el ancho forzado en el id de cada span:
http://junihh.info/menu/03/

Revisa a "styles.css" de cada enlace y si quieres descargalos y pruebalos tu mismo.

La otra prueba que hice fue con ul/li, pero bajo IE6 deja un espacio entre cada li que no quiero, asi que descarte esa posibilidad aunque sea la mas correcta. Lo puedes ver aqui (bajo IE6, por favor):
http://junihh.info/menu/04/
__________________
JuniHH
- Mi blog
- Mi portafolio

Última edición por junihh; 16/01/2009 a las 07:51
  #12 (permalink)  
Antiguo 16/01/2009, 10: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: Ancho de un span basado en el ancho de un texto contenido

@junihh: igual de simple.
En ningún lado he visto que digas cuánto mide el menú de ancho ni si se lo has asignado de alguna manera.
Ya que hablas de un menú, y de las opciones aparecerán una encima de otra en vertical, no puedo imaginar que ese div menú va a ocupar todo el ancho de la pantalla (que seguro que finalmente no será así). Debeido a eso, si asignas un ancho a ese div menú, los enlaces tal y como te he dicho ocuparán todo el ancho del menú, no de la pantalla.

En fin, falta de entendimiento.

Creo que es mejor que concretes qué es lo que quieres conseguir exactamente con el caso real al completo, y por otro lado, que hagas caso a lo que te dijo kseso?: ¿un menú de opciones? En una lista (ul) desordenada. Es la forma estandar y la más indicada.
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 16/01/2009 a las 10:33
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 18:01.