Foros del Web » Creando para Internet » CSS »

Simular "display: inline-block" prescindiendo de él.

Estas en el tema de Simular "display: inline-block" prescindiendo de él. en el foro de CSS en Foros del Web. Hola chicos/as: Mi duda no se trata de nada a vida o muerte. Es más bien una espina que quiero quitarme. Años atrás necesité haber ...
  #1 (permalink)  
Antiguo 10/07/2010, 04:09
Avatar de Negora  
Fecha de Ingreso: agosto-2003
Mensajes: 122
Antigüedad: 14 años, 3 meses
Puntos: 5
Simular "display: inline-block" prescindiendo de él.

Hola chicos/as:

Mi duda no se trata de nada a vida o muerte. Es más bien una espina que quiero quitarme.

Años atrás necesité haber usado la propiedad "display" y su valor "inline-block" para cierto objetivo. No pude debido a su escaso o erróneo soporte en navegadores. En Firefox, por ejemplo, ese valor no fue soportado hasta la versión 3.x. El caso es que teniendo el CSS más asentado, quiero averiguar si podría haber conseguido simular su comportamiento en aquellos tiempos (sin recurrir a JavaScript).

Por ejemplo, supongamos que quiero poner en la misma línea, un texto, un enlace, otro texto y otro enlace, teniendo los enlaces unas dimensiones concretas porque disponen de una imagen de fondo que "cambia" con eventos CSS de foco y ratón (lo que hacen estos eventos es desplazar la imagen de fondo arriba o abajo para dar efecto de cambio sin que haya retrasos de carga).

Debido a ese requisito de los enlaces, lo único que me viene a la cabeza es usar "display: block" (para darles un tamaño) en conjunto con "float: left" o "float: right" (para que no salten de línea). Eso sí, para mantener el buen orden de los elementos, por lo que he podido experimentar, debo de aplicar esto a todos los correspondientes a la misma línea. Esto expresado en XHTML + CSS:

Código:
		<span style="float: left;">Text 1</span>

		<a href="#" style="display: block; float: left; width: 20px; height: 20px; background-color: red;"></a>

		<span style="float: left;">Text 2</span>

		<a href="#" style="display: block; float: left; width: 20px; height: 20px; background-color: blue;"></a>
Los enlaces tienen fondos de color en los ejemplos, pero llevarían una imagen. Aunque el resultado me convence, ¿Existía (existe) alguna manera de lograr algo semejante de otra manera? Remarco la importancia de que los enlaces sean enlaces y no otros elementos "recubiertos" por enlaces, ya que han de ser sensibles al foco del cursor del teclado y no sólo del ratón, para que así el efecto sea idéntico. Como elemento "inline" que por defecto tenga dimensiones el único que se me ocurre es "image"... Pero claro, éste no gana foco.

Muchas gracias :) .

Etiquetas: simular
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 22:07.