ala888 Posted July 12, 2014 Share Posted July 12, 2014 Any idea on how I can make a box with a set style(background,border) that is invisible when there is no text inside of it and is only as large as the amount of text inside of it? Ive tried not setting a width/height; but that ultimately culminates in screen scraping blocks. While the alternative, setting a fixed height/width, detracts from the original point of the "resizable" box Link to comment Share on other sites More sharing options...
newseed Posted July 12, 2014 Share Posted July 12, 2014 div is a block element. You can set it using display:inline so that it only expands the height and width to whatever is contained in it. As for the border/background, background not a problem but the border is. You will either need server side scripting or jquery. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 12, 2014 Share Posted July 12, 2014 (edited) As long as there are paragraphs a content of "" is added after the paragraph content with styling of background color and border. #outer {position:relative;} #outer p:after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom:0; background-color: #CC9933; border: 2px solid red; z-index: -1;} <div id="outer"><p>Test</p><p>Test</p><p>Test</p><p>Test</p></div> Edited July 12, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
newseed Posted July 12, 2014 Share Posted July 12, 2014 Pretty awesome. I have totally missed that. Link to comment Share on other sites More sharing options...
scout1idf Posted July 13, 2014 Share Posted July 13, 2014 (edited) ~ Edited July 13, 2014 by scout1idf Link to comment Share on other sites More sharing options...
dsonesuk Posted July 13, 2014 Share Posted July 13, 2014 (edited) Any idea on how I can make a box with a set style(background,border) that is invisible when there is no text inside of it Does it show background colour and border: yes! Does the background colour and border become invisible when theres no text. yes! So what part is not what the OP asked for? that he has to make the mistake of using js, when the same effect can be achieved with css alone, tell me i want to know. note how newsreed acknowledged css solution over javascript as well. Edited July 13, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
scout1idf Posted July 13, 2014 Share Posted July 13, 2014 (edited) ~ Edited July 13, 2014 by scout1idf Link to comment Share on other sites More sharing options...
dsonesuk Posted July 13, 2014 Share Posted July 13, 2014 Then i suggest next time you READ the posts and TEST fully, AND give a reason why it is not what the op wanted, before just simply posting a reply dismissing a persons solution. 1) As long as there are paragraphs a content of "" is added after the paragraph content. 2) think about it! why would the op leave empty p tags within the div? it would only cause unnecessary spacing to appear. 3) I suggest you READ ALL posts 4) PHP why? we haven't established what server script the OP is using, or even if he is using any at all, also this is CSS topic, and i provided a CSS solution. Link to comment Share on other sites More sharing options...
scout1idf Posted July 13, 2014 Share Posted July 13, 2014 (edited) ~ Edited July 13, 2014 by scout1idf Link to comment Share on other sites More sharing options...
dsonesuk Posted July 13, 2014 Share Posted July 13, 2014 (edited) LOOK you can bother as much as you like, BUT! do not just dismiss, give an explanation why you think it is not the OP wanted. newsreed instead newseed... wow! really just because i caught 'r' key, i can really see how this relate to this topic, this i will dismiss without further discussion. oops did it again:) Edited July 13, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
ala888 Posted July 14, 2014 Author Share Posted July 14, 2014 #outer {position:relative;}#outer p:after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom:0; background-color: #CC9933; border: 2px solid red; z-index: -1;} can you explain this a little more to me? I tried it out and its not working.When I remove the innerHTML of the paragraphs "test" The div box just becomes a red line- but its still there ! Link to comment Share on other sites More sharing options...
scout1idf Posted July 15, 2014 Share Posted July 15, 2014 #outer {position:relative;}#outer p:after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom:0; background-color: #CC9933; border: 2px solid red; z-index: -1;} can you explain this a little more to me? I tried it out and its not working.When I remove the innerHTML of the paragraphs "test" The div box just becomes a red line- but its still there ! Sorry, I'm not going to touch this one again....... Link to comment Share on other sites More sharing options...
dsonesuk Posted July 15, 2014 Share Posted July 15, 2014 BUT you just did? As long as there is a paragraph the second line will add "" (content: "" ) which is styled to produce the background, and border. So no paragraph means no border, no background, no empty space (margins of paragraph) produced by leaving empty paragraph. 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