do this in CSS? 4242 Responses

Last post: 2 years, 1 month ago | Thread started: Dec 18, 09, 7:53 a.m.

RespondNew TopicDisable Images

• 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/u0zdr

  any ideas? or have u seen any tutorials around about a simple way to achieve this?

  CHeers!
  C

  Dec 18, 09, 7:53 a.m. – Permalink

• blackspade

  

  
  like this^

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 7:54 a.m. – Permalink

• 7point34

  padding

  • +1– ornj1/3

    <<– tymeframe2/3

    not a case of just adding padding– blackspade3/3

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 7:54 a.m. – Permalink

• blackspade

  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

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 7:56 a.m. – Permalink

• AdamWintle

  Add padding, float left?

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 7:59 a.m. – Permalink

• blackspade

  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?– AdamWintle1/2

    display block makes the entire div solid, not just the text :/– blackspade2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:02 a.m. – Permalink

• dMullins

  Post a public image?

  • link is public ?– blackspade1/2

    Having to login = not public. L2read.– dMullins2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:06 a.m. – Permalink

• tymeframe

  this is quickie but

  <div style="background-color:#069; width: 150px; padding: 25px;">
  <p>This is my copy</p>
  </div>

  • nope– Samush

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:06 a.m. – Permalink

• 7point34

  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 guy– blackspade

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:07 a.m. – Permalink

• tymeframe

  or

  <div>
  <p style="background-color:#069; display:block; width: 150px; padding: 25px;">This is my copy</p>
  </div>

  • Yeah but you are specifying the width, what if the txt goes beyond that 150px– canuck

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:07 a.m. – Permalink

• scenek

  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 see– blackspade1/3

    nope, just a full width block, doesnt hug the text, ie break when text breaks, nice even padding around creating the stepped block color– blackspade2/3

    oh true, won't work if text breaks– scenek3/3

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:08 a.m. – Permalink

• blackspade

  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, oops– tymeframe

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:11 a.m. – Permalink

• 7point34

  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>

  • done– 7point341/2

    nice!– tymeframe2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:15 a.m. – Permalink

• canuck

  Try adding

  position:absolute;

  • my default when I'm in trouble.– juhls1/2

    yeh. It feels like a cop-out sometimes, but like totally why not ?– mikotondria32/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:17 a.m. – Permalink

• juhls

  Post the code and BAM! It'll be solved in no time.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:20 a.m. – Permalink

• blackspade

  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 =)

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:20 a.m. – Permalink

• canuck

  

  • not so good for a piece of copy for clients to edit via CMS, with all the divs and <br>– blackspade1/2

    True but i'm not sure you would have this effect occur that often.– canuck2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:20 a.m. – Permalink

• blackspade

  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 =)

  • css guys are notorious for saying "you can't do that" it's usually only a tweak or two away– 7point341/2

    your css guy sucks then– bigtrick2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:20 a.m. – Permalink

• blackspade

  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 worked– ckentish

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:24 a.m. – Permalink

• ckentish

  dont need divs - use 7point34's solution. it worked

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:31 a.m. – Permalink

• blackspade

  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> ?? :/

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earDec 18, 09, 8:34 a.m. – Permalink