dren68 Posted August 21, 2006 Share Posted August 21, 2006 I searched the forum for the answer to this but had no luck. What I'm doing is placing several paragraphs on top of a background image. In order to be able to read the text, I'm using a background color behind the text, which works fine. The problem is that the background color extends all the way past the last word on each line and covers up too much of the image with the blocks of color. Sort of like this...http://www.w3schools.com/css/tryit.asp?fil...ackground-colorWhat I want is for the color behind the text to end directly behind the last word on each line and then continue behind the next line of text and so forth. Is there any way to do this? I tried display: inline; which sort of worked, but it ran all the text together and I have several paragraphs, so that's not really what I want to do. Any help would be appreciated! Link to comment Share on other sites More sharing options...
boen_robot Posted August 21, 2006 Share Posted August 21, 2006 If I have understood correctly, all you need to do is remove the margins: p {margin: 0;} Link to comment Share on other sites More sharing options...
dren68 Posted August 21, 2006 Author Share Posted August 21, 2006 No, that didn't change anything. Thanks, though. Link to comment Share on other sites More sharing options...
[Coyot3] Posted August 21, 2006 Share Posted August 21, 2006 I supose you can easy solve the problem placing all text inside a div.Define the best width you need. Than apply the background-color to text div. Link to comment Share on other sites More sharing options...
dren68 Posted August 21, 2006 Author Share Posted August 21, 2006 I guess that will do, if there's no other way. The only thing with that is if there's a line with only two or three words, the black background still extends all the way to the end of the line, which is still what I'm trying to avoid if possible. Link to comment Share on other sites More sharing options...
[Coyot3] Posted August 21, 2006 Share Posted August 21, 2006 what you want is possible to do with CSS but imagine that you have a paragraph with 3 line.The first 2 lines are full and the last one finish before the others. Here you will get the same problem.you can create a span element and set the background color. Than you get something like this<p><span class="highlight">bla bla bla bla</span></p> <html><head><style type="text/css">span.highlight{background-color:yellow}</style></head><body><p><span class="highlight">This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.This is a text.</span></p><p><span class="highlight">hahaha</span></p></body></html> See if like in example you get your problem solved.Paulo A. Silva Link to comment Share on other sites More sharing options...
dren68 Posted August 22, 2006 Author Share Posted August 22, 2006 Yes, that worked! I knew there had to be some way to do it. Thank you! Link to comment Share on other sites More sharing options...
devzero Posted August 22, 2006 Share Posted August 22, 2006 Yes, that worked! I knew there had to be some way to do it. Thank you!There are several other ways of doing this also: Set the width of each element : h1{background-color: #00ff00; width:33%;} Use the float property, Then position each element: h1{background-color: #00ff00; float:left;} The simplest way tho, if you can edit the HTML, is use display inline and a BR after each heading.: <html><head><style type="text/css">body {background-color: yellow}h1{background-color: #00ff00; display:inline;}h2 {background-color: transparent}p {background-color: rgb(250,0,255)}</style></head><body><h1>This is header 1</h1><br><h2>This is header 2</h2><p>This is a paragraph</p></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now