do this in CSS?
- Started
- Last post
- 42 Responses
- blackspade
hey guys,
Anyone know of any tricks/ways around having a solid background colour around text in CSS, without having it hug tight to the edge of each word (in other words increase the overall padding around HTML text)
Exactly like this...
http://twitpic.com/u0zdrany ideas? or have u seen any tutorials around about a simple way to achieve this?
CHeers!
C
- blackspade0
like this^
- 7point340
padding
- +1ornj
- <<tymeframe
- not a case of just adding paddingblackspade
- blackspade0
yea as far as Im aware and from what the CSS guy here is telling me its not that simple as adding padding?
im trying to find a method to prove him wrong
- AdamWintle0
Add padding, float left?
- blackspade0
sure you can do that, but the background color just stretches the width of your div or width of your page, it doesnt end directly at the end of each word on each line, if that makes sense
- Try display block too?AdamWintle
- display block makes the entire div solid, not just the text :/blackspade
- dMullins0
Post a public image?
- link is public ?blackspade
- Having to login = not public. L2read.dMullins
- tymeframe0
this is quickie but
<div style="background-color:#069; width: 150px; padding: 25px;">
<p>This is my copy</p>
</div>
- 7point340
you can get it to do that with quirks mode.
otherwise, why not go to that page and view the source?
- cos its my flat design that havent built yet, in process of being built and im getting a "cant do that" from css guyblackspade
- scenek0
i used this to do that with anchor tags. should work for regular text right?
background-color:#666666;
margin-left:-4px;
padding:2px 4px;- interesting thought lemme seeblackspade
- nope, just a full width block, doesnt hug the text, ie break when text breaks, nice even padding around creating the stepped block colorblackspade
- oh true, won't work if text breaksscenek
- blackspade0
tyme, both of those give me a sold block of colour
ie: doesnt wrap nicely matching the edge of the line of text, have tried a few options, its trickier than it seems to achieve that exact effect
- ah, i see what you're going for and it's not what I posted, oopstymeframe
- 7point340
p { float: left; clear: both; padding: 0 5px; margin: 0; background: #d00;color: #fff; font: 18px/24px verdana;}
<p>here is some text.</p><p>here is some more text on a longer line.</p>
- canuck0
Try adding
position:absolute;
- my default when I'm in trouble.juhls
- yeh. It feels like a cop-out sometimes, but like totally why not ?mikotondria3
- juhls0
Post the code and BAM! It'll be solved in no time.
- blackspade0
not bad, thanks point. think thats bout as best as its gonna get
cant quite get the perfect spacing heightwise while keeping a nice tight leading, but its close
thanks i appreciate the help guys =)
- canuck0
- not so good for a piece of copy for clients to edit via CMS, with all the divs and <br>blackspade
- True but i'm not sure you would have this effect occur that often.canuck
- blackspade0
not bad, thanks point. think thats bout as best as its gonna get
cant quite get the perfect spacing heightwise while keeping a nice tight leading, but its close
thanks i appreciate the help guys =)
- blackspade0
forgot to mention this is editable text in the CMS so will need to be flexible for different copy week to week (ie not sure lots of divs is CMS friendly !?
- dont need divs - use 7point34's solution. it workedckentish
- ckentish0
dont need divs - use 7point34's solution. it worked
- blackspade0
Still getting a NO from CSS :/
cant have multiple Paragraphs, as it will be 1 heading tag, so cant force all the <P> they'd have to be breaks <strong> ?? :/