Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How can you make a multi column list with images for bullets?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #195251
    Chaze
    Participant

    I found how to add a multi column which looks nice, I just need to get some image bullets on the left of each item.

    So I have this:

    I tried to use a pen but you have to pay them I guess.
    css
    div#multiColumn {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    }
    html

    • List Item
    • List Item
    • List Item
    • List Item
    • List Item
    • List Item
    • List Item
    • List Item
    • List Item
    • List Item

    I also guess you can’t post html code on a css code site, a little strange.

    I am happy to use any multi column code that will work.

    I have tried too may ways to list but nothing will show a bullet or image.

    #195252
    Chaze
    Participant

    I added this and it works but now there is a dot and the image lol

    ul2 li {
    background-image: url(/images/icons/check-mark-small.gif);
    background-repeat: no-repeat;
    background-position: 0px center;
    padding-left: 15px;
    }

    Aha, this guy fixes it:

    list-style-type: none;

    <hr />

    Now any ideas how to add space between the image and the text? They are stacked on top of each other.

    O.K. this fixed that, prtoblem solved

    height: 25px;
    padding-left: 44px;
    padding-top: 3px;
    

    So the full css for the multi column image list is…

    div#multiColumn {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    }

    ul2 li {
    background-image: url(/images/icons/check-mark-small.gif);
    background-repeat: no-repeat;
    background-position: 0px center;
    height: 25px;
    padding-left: 44px;
    padding-top: 3px;
    list-style-type: none;
    }

    #195255
    Paulie_D
    Member

    You do not need to pay to use Codepen, you aren’t even required to sign up.

    Please try to use it, it’s a lot easier than codedumps like you have above.

    #195279
    Chaze
    Participant

    If you add a link here to a codepen that is not a registered account there then it gives a error saying you cannot use a unregistered account from code pen in your links.

    So I went to codepen to register and all the options cost money.

    Ohh I see there is a hidden free option in the bottom.

    Thanks!

    Shady sites man, jeeze

    Feel like I’m trying to find the free version of AVG here… lol

    A little late now but here it is before :)

    http://codepen.io/Chaze/pen/dPZdrm

    And here is it after:

    http://codepen.io/Chaze/pen/xbPYBL

    I should say, Cpdepen is an awesome site and probably worth paying. Just didn’t like the hidden free sign up.

    #195281
    Chaze
    Participant

    My next step is to try to make the columns be closer to each other.

    Aha, so simple, just added this guy

    width: 600px;
    
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.