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

junihh · #1 (**permalink**) 15/01/2009, 14:14

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 ???.

yosoyraro · #2 (**permalink**) 15/01/2009, 15:01

Puedes poner la url de ejemplo?
:)

kseso? · #3 (**permalink**) 15/01/2009, 15:13

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.

wilburhimself · #4 (**permalink**) 15/01/2009, 15:31

La solución puede ser agregar:

Código:

#menu span {
  ...
  width: auto;
  white-space: nowrap;
}

y quitar el ancho a los # de los spans

junihh · #5 (**permalink**) 15/01/2009, 15:39

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 · #6 (**permalink**) 15/01/2009, 15:46

@wilburhimself, lo siento amigo, tampoco funciono.

kseso? · #7 (**permalink**) 15/01/2009, 16:20

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)

Mikmoro · #8 (**permalink**) 15/01/2009, 16:52

Cita:

Iniciado por kseso?

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.

junihh · #9 (**permalink**) 15/01/2009, 18:32

@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.

Mikmoro · #10 (**permalink**) 16/01/2009, 01:40

Cita:

Iniciado por junihh

@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í.

junihh · #11 (**permalink**) 16/01/2009, 07:35

@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/

Mikmoro · #12 (**permalink**) 16/01/2009, 10:26

@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.