Efecto fondo de texto

alvaro0022 · #1 (**permalink**) 18/02/2011, 17:41

Hola

Al colocarle fondo al texto con css del tipo "background-color: #000000;" Esete queda de la siguiente manera:

Pero me gustaria saber si hay alguna forma de hacer que el fondo se adapte al texto de esta manera:

alvaro0022 · #2 (**permalink**) 18/02/2011, 18:47

Alguna ayuda por favor!!!!!!!!!!!!!

sanxuan · #3 (**permalink**) 18/02/2011, 19:59

Puedes usar una clase CSS:
.fondoNegro{
background:#000;
color:#fff;
}

y usar la etiqueta span:

Probando efecto css en texto


Para eliminar líneas blancas entre renglones puedes jugar con la propiedad line-height.

alvaro0022 · #4 (**permalink**) 18/02/2011, 21:49

Gracias por tu respuesta sanxuan

El problema es que no puedo dividir las palabras porque son nombres y estos cambian no es siempre el mismo texto.

sanxuan · #5 (**permalink**) 19/02/2011, 07:38

Coloqué los saltos de línea con para simular el texto que indicaste.
Funcionará igual si el párrafo tiene un ancho fijo. En esta ocasión te incluyo el estilo en las etiquetas por abreviar.


Probando efecto css en texto

kseso? · #6 (**permalink**) 19/02/2011, 08:17

Para poder encontrar una vía, debe entender primero el porqué sucede lo que sucede.
Los párrafos // son etiquetas de bloque. Ya sabe lo que eso implica. Ocuparán toda la línea horizontal.
Por lo tanto, aunque las letras no lleguen hasta el final, sí lo hace el párrafo y sus propiedades.

Recordado lo anterior, creo que ya verá por donde ha de buscar.
Hay dos propiedades que puede alterar. Una me he encontrado que en crome falla. La segunda, un poquito menos obvia, es funcional hasta en los ie (el 7 y 8 emulados).
Si no llega a la solucción o encuentra algún escollo, comente y sigo ampliando pistas.

alvaro0022 · #7 (**permalink**) 19/02/2011, 10:07

Saludos;

Gracias por tu respuesta Kseso?

Dejo mi codigo para que puedan ver y entender lo que quiero. En donde {image_name} seria el texto que quiero que aparezca de la siguiente manera:

Código HTML:

<style type="text/css">
*  {
border-width:	none;
margin:	0;
padding:	0;
}

.over  {
overflow:	hidden;
position:	relative;
width:	304px;
}

.over span.tooltip  {
display:	none;
}

.over:hover span.tooltip  {
background-color:	#000000;
background-position:	;
color:	#FFFFFF;
display:	block;
font-family:	Helvetica;
font-size:	14pt;
font-weight:	bold;
float:	left;
left:	0;
margin-left:	8px;
margin-right:	8px;
margin-top:	8px;
position:	absolute;
text-align:	justify;
top:	0;
width:	150;
z-index:	10;
text-transform: uppercase;
}

body, html  {
height:	100%;
width:	100%;
}
</style>
</head>
<body>
<div class="over">{thumbnail}
<span class="tooltip">{image_name}</span></div>
</body>

Aqui mi sitio http://www.picalls.com/picalls

Saludos!!

kseso? · #8 (**permalink**) 22/02/2011, 02:50

Sr. Álvaro, de verdad, no puede ir soltando información relevante por cuentagotas.
De todas formas, la respuesta se la ofrecí en #6:
convierta ese elemento en uno de línea, no de bloque.

Y mis disculpas por el retraso en la respuesta, se me despistó este hilo.

Edito:
Olvídese de todo, por favor, y antes de seguir, valide su sus páginas en una sóla página:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.picalls.com%2 Fpicalls%2F

No lo puedo creer, a no ser que no haya mirado ni una sola vez el código html generado, la de veces que abre y cierra el html, el head y el body.
Si le hago caso al firebug, 21
Comience por una buena limpieza a fondo del código y aproveche a olvidarse de la maquetación en tablas.