Moving the sidebar divider

Community Forums Forums General Discussion Moving the sidebar divider

This topic is: resolved

This topic contains 11 replies, has 2 voices, and was last updated by  Riavon 1 year, 6 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #7793

    shewearswhite
    Participant
    Post count: 15

    Hi all,
    I would like to increase the width of the sidebar on my site and decrease the width of my main content. (In effect keeping the total width the same).
    My website is http://www.shewearswhite.com
    My main content was 740 and I have adjusted it to 640, my sidebar was 220 and I have increased it to 320.
    The css I used in my stylesheet to adjust the widths is;
    .content-sidebar #content,
    .sidebar-content #content {
    width: 640px;
    }

    .content-sidebar #sidebar,
    .sidebar-content #sidebar {
    width: 320px;
    }

    The problem is that when I adjust the width the sidebar divider line stays in the same place (except for the front page!) All other pages the line doesn’t move. If anyone could guide me how to move the line on all pages it would be fantastic!
    Any help would be be hugely appreciated!! Thank you.
    Katie

    #7800

    Riavon
    Participant
    Post count: 95

    That line is generated by an image here:

    .home #wrap #inner {

    background-image: url(“images/home-inner.png”);
    background-repeat: repeat-y;

    }

    To get rid of it, just change that to background-image:none and delete the background-repeat-y (not needed)

    To move it you can position it to stay lined up with your content at any width if you add the style to the

    .content-sidebar #content, .sidebar-content #content

    like so:

    .content-sidebar #content, .sidebar-content #content {

    width: 640px;
    background-image: url(“images/home-inner.png”);
    background-repeat: repeat-y;

    }


    Twitter: @riavonentprises

    #7817

    shewearswhite
    Participant
    Post count: 15

    Hi Ria,

    I’ve changed the code as you suggested;

    .home #wrap #inner {
    background-image: none;
    }

    and

    .content-sidebar #content,
    .sidebar-content #content {
    width: 640px;
    background-image: url(“images/home-inner.png”);
    background-repeat: repeat-y;
    }

    but the sidebar is still in the same place and now the homepage is also showing the sidebar at 740 pixels instead of 640.

    Any ideas?

    #7823

    Riavon
    Participant
    Post count: 95

    Sorry for the delay in responding. Ok, I see now the issue. I assumed that was a 1px x 1px image but it’s a 960px x 1px image so it’s forcing your content div to be too wide. I’d recommend removing that image entirely and simply add a border:
    .content-sidebar #content, .sidebar-content #content {

    background-image: none;
    border-right: 1px solid #E5E5E5;
    width: 639px;

    }


    Twitter: @riavonentprises

    #7824

    Riavon
    Participant
    Post count: 95

    I can’t see it using Firebug, but looking at your stylesheet I see:

    .content-sidebar #inner {
    background: url(images/content-sidebar.png) repeat-y;
    }

    which is what I think may be causing the issue with the odd line going down the middle of the sidebar area. I’d recommend trying to remove that background image as well, then your right border on the content area will serve as the separator between the two sections.


    Twitter: @riavonentprises

    #7827

    shewearswhite
    Participant
    Post count: 15

    Hi Ria,

    I have changed the css however now I have no line, I’m not too fussed because it actually looks quite nice without the line down the middle but would you know how to add it if I did want a line?

    Under the content css here is the existing code;

    /* Content
    ———————————————————— */

    #content {
    float: left;
    width: 420px;
    }

    .content-sidebar #content,
    .sidebar-content #content {
    width: 640px;
    background-image: none;
    border-right: 1px solid #E5E5E5:
    width: 639px:
    }

    #7871

    Riavon
    Participant
    Post count: 95

    I just used Firebug to look at your site, and I see this on line 814 of your style.css :

    .content-sidebar #content, .sidebar-content #content {

    background-image: none;
    width: 640px;

    }
    In the code you posted in your reply to me above, I see you have two width declarations. In order to show the border you must place the code correctly into your style.css exactly as this:

    .content-sidebar #content, .sidebar-content #content {

    background-image: none;
    border-right: 1px solid #E5E5E5;
    width: 639px;

    }
    An easy way for you to hide that line is to simply change the #e5e5e5 (that’s your light gray color) to transparent – border-right: 1px solid transparent;


    Twitter: @riavonentprises

    #7980

    shewearswhite
    Participant
    Post count: 15

    Hi Ria,

    Thanks for that, I’ve managed to add the divider line however it doesn’t go all the way to the bottom, as you can see especially on the real weddings page (because there are no posts) it only goes to below the title, any ideas how to make it stretch to the very bottom?

    Thank you again!

    Katie

    #7983

    Riavon
    Participant
    Post count: 95

    Yikes, is your site down?


    Twitter: @riavonentprises

    #7986

    shewearswhite
    Participant
    Post count: 15

    It sure is!! Just talking to my hosts now trying to figure out why!

    #8002

    shewearswhite
    Participant
    Post count: 15

    Back up and running, if you have any ideas about the sidebar going all the way to the bottom that would be great!

    #8010

    Riavon
    Participant
    Post count: 95

    On line 2024 of style.css add min-height:352px;
    [css]
    .elle-white #content .post,
    .elle-white #content .page,
    .elle-white .navigation {
    min-height: 352px;
    padding: 15px 10px;
    }[/css]
    Of course, you could always just add some posts, too. ;-)


    Twitter: @riavonentprises

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

You must be logged in to reply to this topic.