WordPress.org

Ready to get started?Download WordPress

Forums

CSS styling the list in the sidebar (16 posts)

  1. databell96
    Member
    Posted 6 years ago #

    I'm trying to figure out how to add padding or a margin just to the unordered list in the #sidebar element but it either ignores it completely or adds to much and then drops the div down beneath my other content div. How can I get it to let's say add a margin-left of 10 pixels?

    http://reggae.esolutions.net/~granolag/index.php

  2. yazin
    Member
    Posted 6 years ago #

    Just took a look at your source;

    You have

    • Links
  3. #sidebar li
    {
    margin-left: 10px;
    }

    this should put 10px margin for the whole thing. if you want margin for other ul and li, you can go like this;

    #sidebar li ul
    #sidebar lu ul li
    and etc.

  • Joni
    Member
    Posted 6 years ago #

    That's incorrect.

    It should be:
    #sidebar ul
    #sidebar ul li
    #sidebar ul ul
    #sidebar ul li ul li < for child list elements

    And also remember that Opera, FF and IE all put different amounts of left padding into list elements to begin with so you'll have to play with it and possibly write a conditional stylesheet if you want them exactly alike across all browsers.

    http://www.darrenfauth.com/css-sandbox/css-list-cross-browser.php

    ;)

  • databell96
    Member
    Posted 6 years ago #

    First off, Darren's site won't load so I can't read his article. Secondly, I do want 10px margin-left for the whole unordered list but even adding:

    #sidebar ul {
    margin-left: 10px;
    }

    it does nothing. It's still butt left to the entire sidebar div. That should not be happening at all. However, if I add a width to that element, everything goes crazy. The div drops down underneath the content div on the left and it doesn't matter how much of a width you give to the div. It also adds a ton of margin (or padding?) to the ul li ul li on the sidebar. Again, that's only if a width is suggested. Why is that?

  • Joni
    Member
    Posted 6 years ago #

    Article loads just fine for me. I've cut and pasted it below for you.

    [EDIT: The code in this article is making the rest of the replies to this thread wonky, so I've removed it. /jmm]

  • databell96
    Member
    Posted 6 years ago #

    OK, I get that but that's not my problem. My problem is that no matter what margin I give it, it just ignores it and nothing happens unless I add a width and then it goes kerflooey. Thing is I shouldn't need to add a width at all. Just a margin (or padding).

  • Joni
    Member
    Posted 6 years ago #

    I'm looking at your stylesheet and I don't see #sidebar in there at all. I did a "Find" and came up with nothing.

    Bear in mind that you have a fixed width wrapper so that limits the area you have to work with. You need to be sure there's enough "air" between the left #content and right #sidebar. Then within #sidebar you should be able to apply margins and padding that you want, but remember if you add margins and padding there, you'll need to adjust it downward elsewhere or the sidebar will drop down below the content. Make sense?

  • Joni
    Member
    Posted 6 years ago #

    No, you should add width and it will need to be a specific width or you'll get the drop down behavior you are experiencing now. Hey, I'm trying to help you, thought you might want that article, but what the hell do I freaking know, right?

  • databell96
    Member
    Posted 6 years ago #

    Well, that's the weird thing. The #sidebar div is in this file called rtl.css which comes along with the style.css and I guess that the page doesn't see that. Why do we get two .css files with the templates anyway?

  • Joni
    Member
    Posted 6 years ago #

    rtl.css is only for right-to-left text (such as is common in Muslim or Asian blogs, which generally read from right to left, rather than left to right).

    You need to put that code into the style.css file; that's prolly why nothing's worked for you.

  • databell96
    Member
    Posted 6 years ago #

    OK, so that's what it means! Well, I followed your advice and added it but now it's collapsing beneath the #content div and so I'm trying everything to make it work. Setting all sorts of margins and padding to zero, Eliminating the headers from each div, changing the width of the sidebar div to next to nothing. Absolutely nothing works.

  • Joni
    Member
    Posted 6 years ago #

    I'm not at my usual computer and don't have my FireFox dev. tools handy on this machine. I'll try to take a look at it when I'm home later. Shouldn't be too hard of a fix. BTW, and a little OT, I'd love to know when that site goes live; there's some great info there and I know two people who could benefit from it. :)

  • whooami
    Member
    Posted 6 years ago #

    Muslim or Asian blogs

    you sure about that?? (lol, 2 fer 2)

  • databell96
    Member
    Posted 6 years ago #

    Cool. I'll gladly let you know, Joni. This is actually one of the last sticking points. The store (which is using the ZenCart template) is essentially done. And the blog was working until the client decided to bring back the sidebar and then everything got messed up.

  • Joni
    Member
    Posted 6 years ago #

    @Whoo: Maybe that wasn't the right choice of words, Middle Eastern. Those read right to left; I worked for an Egyptian for a year and it drove me crazy. Drove our copy department nuts too. Asian (Japanese, Chinese, Vietnamese -- and I'm sure Korean as well, not sure) also read from right to left.

    Why me? WTF have I ever done?

  • Joni
    Member
    Posted 6 years ago #

    Here:
    http://en.wikipedia.org/wiki/Right_to_left#Directionality

    P.S. I don't keep score. And I'm never mean to those I like. Others, however, best watch out.

  • Topic Closed

    This topic has been closed to new replies.

    About this Topic

    Tags