9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

Hanging Bullet CSS

by KingOfContentMarketing
7 replies


Dear HTML/CSS Whiz Kid,

I'm trying to get the text to line up with this middle of the bullet.
It looks okay if it is only one line, but as soon as it extends to two lines
it hangs like above.

I've checked several CSS sources and still can't get it the way I want. I'd
like to avoid tables if possible but will do that if needed.

Can you share how you personally do the CSS with bullet images?
Any insight is appreciated.

Joe
#bullet #css #hanging
  • Profile picture of the author yukon
    Banned
    You could use the image as a background image then position.

    Example:
    {{ DiscussionBoard.errors[7243036].message }}
    • Profile picture of the author KingOfContentMarketing
      Originally Posted by yukon View Post

      You could use the image as a background image then position.

      Sort of something like this for a custom list?

      .custom li.check {
      list-style-type: none;
      background: url('images/check.png') no-repeat top left;
      }
      Signature
      Marketing is not a battle of products. It is a battle of perceptions.
      - Jack Trout
      {{ DiscussionBoard.errors[7243062].message }}
  • Profile picture of the author yukon
    Banned
    Hang on a min., I'll attach a sample HTML/CSS file with your image.
    {{ DiscussionBoard.errors[7243069].message }}
  • Profile picture of the author yukon
    Banned
    Adjust the bullet image X/Y position in the attached CSS file with:

    background-position: 0px 5px;



    Adjust the bullet text X/Y position in the attached CSS file with:

    padding-left: 50px;
    padding-top: 15px;
    {{ DiscussionBoard.errors[7243084].message }}
  • Profile picture of the author yukon
    Banned
    You'll have to play around with the X/Y positions since your font & font size are different.
    {{ DiscussionBoard.errors[7243099].message }}
    • Profile picture of the author KingOfContentMarketing
      Originally Posted by yukon View Post

      You'll have to play around with the X/Y positions since your font & font size are different.
      Yukon- I plugged it in and tweaked it. Worked like a charm. Thanks again.
      Signature
      Marketing is not a battle of products. It is a battle of perceptions.
      - Jack Trout
      {{ DiscussionBoard.errors[7244040].message }}
  • Profile picture of the author KingOfContentMarketing
    Cool, man, I have to run out the door but I'll play with it when I get back. Thanks for the help.
    Signature
    Marketing is not a battle of products. It is a battle of perceptions.
    - Jack Trout
    {{ DiscussionBoard.errors[7243117].message }}

Trending Topics