problemas con background-color

[BuckInc]

Tengo una capa llamada contenido dentro de esta tengo mi texto, lo que quiero es darle un formato al texto asignandole un fondo con background-color.. hasta ahi bien.

ahora bien, mi problema es que si me pigmenta el color al texto.. pero no me respeta ese fondo el diferente tamaño de los renglones, es decir pone en negro todo el fondo del renglon.. aunque este tenga 3 letras.. y yo lo que quiero es que la sombra quede escalonada sobre el texto. si en un renglon hay 20 caracteres solo pigmente el fondo para esos 20 caracteres. y si hay 5 solo pigmente 5.. y no el 45% por decir algo de lo que mide la dimension en ancho de la capa.

Agradezco cualquier comentario.


Saludos


atte.
Buck Inc

[kseso?]

prueba a ver:

.contenido p {color: #tucolor;
padding: 0 5px; /*para que el color de fondo ocupe 5 px a la izq y a la dch del párrafo, puedes darle un valor arriba y abajo para que se vea todo como un bloque, el valor depende de tu line-height*/
background-color: #tucolordefondo;}

Un saludo
௫

[BuckInc]

Aplique el codigo que me facilitaste y sigue haciendo el efecto que no quiero, ya que ocupa todo el ancho de la capa el color del fondo.


Y lo que yo unicamente quiero es que aunque me capa mida 400px de ancho, si por ejemplo en el renglon hay 3 caracteres.. sea el fondo unicamente para esos tres caracteres.

Como cuando haces un menu, y alineases todas las opciones a la izquierda.. y le pones un fondo.. se ven como escalones..

Perdon por dar guerra.. mas si puedes ayudarme agradeceria muchisimo.

[kseso?]

Hola BuckInc
creo que se me quedó "display: inline-block"

Un saludo
௫

[BuckInc]

Quedo solucionado.. muchas gracias por tu seguimiento, de hecho utilice un <span class=walltxt> y ahi en esta declaracion fue que aplique el efecto.

.wtxt { color:#FFFFFF;
background:#000000;}

Y asi quedo solucionado.

Ahora bien tengo otro detalle.. la capa asignada para menu, tengo un problema.

.menu li a {
text-decoration:none;
font-size:14px;
text-align:right;
/*margin:0px;
padding:0px;
padding:2px 0px 0px;*/
display:block;
}

.menu li a:hover { color:none;}

.menu ul {list-style-type:none;
/*margin:0px;
padding:0px;*/
}

img {border: 0px;}*/



Es una lista donde las opciones del menu son imagenes, el detalle es que cuando hago previsualizo.. en IE no me respeta el margin y el padding. Me deja un espacion entre opción y opción, los separa demasiado.

Agradeceria cualquier sugerencia. en Fire fox e incluso en Chrome corre muy bien.


Saludos!

[kseso?]

10-4 BuckInc

Sobre el menú, creo que es mejor la nueva consulta la publiques en un tema nuevo. Tendrás más posibilidades de obtener ayuda.
Un saludo
௫