How to indent a list?

Community Forums Forums Design Tips and Tricks How to indent a list?

This topic is: not resolved

This topic contains 2 replies, has 3 voices, and was last updated by  Peter 7 months, 4 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #83402

    nicole2013
    Participant
    Post count: 28

    Is there a way to indent a list so that it does not appear on top of an image (as it does on this page)?

    http://www.creative-printables.com/crackers-with-printable-editable-labels/
    #83412

    dmassive
    Participant
    Post count: 3

    I can think of a couple ways to make this happen although I’m unsure of which method would the most “proper”.

    1. Give your <ul> and id something like <ul id="sups_need"> and then use CSS to apply the following

    #sups_need {
          list-style-position: inside;
    }

    i’m unsure of how much more space this will give you but it’s a good place to start

    more on list-style-position at http://www.w3schools.com/cssref/pr_list-style-position.asp

    2. Give the <p>that contains the <ul> and id and manipulate the <p> margin via CSS

    • This reply was modified 7 months, 4 weeks ago by  dmassive.
    • This reply was modified 7 months, 4 weeks ago by  dmassive.
    #83432

    Peter
    Participant
    Post count: 95

    You could give your <ul> overflow: hidden;, which prevents text wrapping around floated elements.

    But with list-style-position: inside; the second line of text in a list-item starts below the bullet, you might not want that.

    • This reply was modified 7 months, 4 weeks ago by  Peter.
    • This reply was modified 7 months, 4 weeks ago by  Peter.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.