Grow your CSS skills. Land your dream job.

styling an unordered list

  • # July 30, 2010 at 1:39 pm

    Hello

    I am making a wordpress site where i need an unordered list in one of my posts. It needs to look like this:

    http://www.simontornby.dk/textpost.png

    Since i can’t space it out via spacing in the post, my first idea was to style my .post strong class, but the problem is that this affects all my post headers as well.

    Is there a way to do it via the .post ul or .post ul li class, or is there some other way around this?

    Thanks
    Simon

    # July 30, 2010 at 3:03 pm

    Yes. Just style the li elements inside the ul.

    If you had an html example we could help you better, and provide you with some CSS.

    # August 1, 2010 at 8:29 am

    Hello again

    Thank you for your reply.

    I can’t really make it work as I want. Since I am working locally, I wont be able to provide live html. And since I want my client to add the info via WordPress I guess it is a question about styling the ul in css?
    But I just can’t seem to get my head around how to do it.

    Here is how it looks now:
    http://www.simontornby.dk/list1.png

    And I would really love to make it look like this:
    http://www.simontornby.dk/list2.png

    Here is my css:

    Code:
    .post ul { float: left; margin-left: 120px; padding-top: 10px; padding-bottom: 10px;}

    .post ul li strong { padding-right: 100px; }

    .post ul li { margin-left: 0px; padding-top: 7px; padding-bottom: 7px; }

    Hope you can help. Apparently it seems simple, but I can’t make it work…
    Thanks.

    Simon

    # August 1, 2010 at 9:07 am

    Ok

    It seems that I managed to solve it myself:

    Code:
    .post ul { width: 800px; float: left; margin-left: 250px; padding-top: 10px; padding-bottom: 10px;}

    .post ul li strong { position: absolute; display: block; width: 200px; margin-left: -200px; }

    .post ul li { margin-left: 0px; padding-top: 6px; padding-bottom: 6px;

    /Simon

    # August 1, 2010 at 4:20 pm

    That looks more like a table than a list :)

    # August 2, 2010 at 4:48 am
    "clifference" wrote:
    That looks more like a table than a list :)

    Was going to say the exact same thing, actually.

    # August 2, 2010 at 9:20 am

    yes i know, but it does the trick ;)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".