Sidebar horizontal line without padding or margin – Balance

Community Forums Forums Design Tips and Tricks Sidebar horizontal line without padding or margin – Balance

This topic is: not resolved

This topic contains 8 replies, has 2 voices, and was last updated by  mariafernandez 1 year, 10 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #6220

    mariafernandez
    Participant
    Post count: 19

    I’m trying to get the horizontal lines in my sidebar (http://www.spanish-bites.com/) to cover the whole sidebar width. So far I’ve failed with the changes I’ve made to my .css

    Can anyone suggest how this is achieved? I’ve seen it done on other blogs.

    Maria

     

    #6262

    AC
    Blocked
    Post count: 7712

    I see a lot of lines and bars. Can you be more specific in the location possibly describing the text that is near what you want changed?

    #6269

    mariafernandez
    Participant
    Post count: 19

    On my blog’s sidebar there’s technically only one horizontal line, which gets repeated after each section. The social media icons, for instance, have a line above and below them.

    I’d like that bar to reach the edges of the white area, but I haven’t found a way of doing it.

    Blog: http://www.spanish-bites.com

    Maria

     

    #6277

    AC
    Blocked
    Post count: 7712

    Oh, I don’t believe you can do that. The CSS is adjusting to the width of the sidebar. There’s no way to get it go stretch outside of that area like that.

    #6361

    mariafernandez
    Participant
    Post count: 19

    Outside? That would look ugly. What I want is what this other blog has done: http://www.janscarbrough.com/biography/

    (See sidebar lines reaching the edges, rather than covering only the same area as the text because of the padding)

    #6363

    AC
    Blocked
    Post count: 7712

    Are you referring to the the “sidebar” as in right sidebar where your search box is located?

    #6366

    AC
    Blocked
    Post count: 7712

    I see now, because you have a white background I couldn’t see it. I used Firebug and see that it’s the left and right Margins, not the padding. So remove your left and right margins and it will fix it.

    **NEW NOTE** her Margins are set at 0.

    • This reply was modified 1 year, 10 months ago by  AC.
    • This reply was modified 1 year, 10 months ago by  AC.
    #6380

    mariafernandez
    Participant
    Post count: 19

    On my .css I’ve tried changing to zero just about every margin and padding I can see. Nothing seems to work. The text moves to the edges every time. Perhaps you can give me a clue as to which margin you’re referring to?

    Thanks.

    #6383

    mariafernandez
    Participant
    Post count: 19

    OK. I’ve now figured it out. In case there’s someone else with the same problem, here’s the solution:

    The original .css was:

    .sidebar .widget {
    border-bottom: 1px solid #ddd;
    margin: 0 0 30px;
    padding: 0 0 30px;
    }

    Now I have:

    .sidebar .widget {
    border-bottom: 1px solid #ddd;
    margin: 0 0 10px;
    padding: 20px 20px 20px;
    }

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

You must be logged in to reply to this topic.