Forums

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

Home Forums CSS Creating a sidebar that doesn’t break with…

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #29721
    WildSpirit
    Member

    I’m building a small site in wordpress and am having a problem with the sidebars.

    I am using simplepie to pull post into each sidebar so the lady can edit everything there.

    Problem is that since there are spaces or breaks after heading and such it’s breaking my sidebar box up all weird.

    See here: http://thinwithinubeta.thinwithin.com/

    Is there a better way to build this so it won’t do that??

    Also, does anyone know if code for a form (like for a newsletter signup, lady gave me all the code) can go into the top very top sidebar (this also currently pulls from a post.

    Thanks,
    lyle

    #81098
    WildSpirit
    Member

    If you look at the link, you will see that the sidebars are all broken. I created them by making a class of .sidebar, which is where i put the bottom rounded corners image and the fill color (the blue) and then i created another class called .sidebar p and that is where the top rounded corners image is.

    How ever when ever there is a paragraph break, or any break, it doesn’t allow the sidebar to look like one complete piece. It breaks it up with gaps.

    hmmm I hope that was a better explanation!

    Thanks :)
    ~Lyle

    #81109
    virtual
    Participant
    Quote:
    How ever when ever there is a paragraph break, or any break, it doesn’t allow the sidebar to look like one complete piece. It breaks it up with gaps.

    That’s because you put the top rounded corner image on the <p> tag. Do you want rounded images for every paragraph or just for the sidebar? You could also use this method
    https://css-tricks.com/snippets/css/rounded-corners/
    or
    https://css-tricks.com/examples/RoundedCorners/

    You are also making improper use of the p tags. You should not be using

    Code:
    <p><br class="spacer_" /></p>

    the <br> has no use as the empty p tag will make space anyway, you should use padding for that. You reset margin and padding to 0 so you need to add it back in accordingly to style the tags. Any tag that you want to perform differently can be given a separate class. Also anything that looks like a list should use an unordered list e.g. the bold text underneath the second h1 tag.

    #81114
    WildSpirit
    Member

    I want to use the rounded corner just for the sidebar. If not in class .sidebar p where should that top rounded corners image go??

    Thanks,
    lyle

    #81115
    virtual
    Participant

    If you are using images you will have to break the sidebar up into 3 sections, for example sidebar-top, sidebar-middle and sidebar-bottom. The top and bottom take the images as background images and the p tag and all other text etc. go in the middle section which will then expand. It makes for more markup which is why I gave you the other solution.

    #81118
    WildSpirit
    Member

    So I set my html up like this"

    Code:
    <div class="sidebar">
    <div class="sidebartop"></div>
    <div class="sidebarmiddle">
    <p> You Get to Decide!<br />
    Select the class you want <br />
    to attend or class recording <br />
    you want to have and YOU GET TO DECIDE</a> the amount you want to pay for it. <br />
    Click here to get started!</p>
    </div>
    <div class="sidebarbottom"></div>
    </div>

    and this is my css:

    Code:
    .sidebartop {
    background: url(images/sb2_top.png) center top no-repeat;
    padding: 20px 15px 20px 15px;
    }

    .sidebarmiddle {
    background: #517381;
    color: #fff;
    padding: 20px 15px 20px 15px;
    }

    .sidebarmiddle p {
    background: #517381;
    color: #fff;
    padding: 20px 15px 20px 15px;
    }

    .sidebarbottom {
    background: url(images/sb2_bottom.png) center bottom no-repeat #517381;
    }

    It still doesn’t seem to be working… What am I missing?

    Thanks,
    Lyle

    #81122
    virtual
    Participant

    The html is fine. For the css, the bg images should sit flush with the sides, you don’t need padding. That is for the elements that go inside the middle portion e.g. h and p tags, to push them away from the sides. Can you post what you have so far, so I can see what is going on?

    #81201
    WildSpirit
    Member

    Hi Virtual,
    I think I am getting closer… now just having one little white gap showing between the <h4> tags and the <p> tags.

    Since this side bar is being created from a post and being pulled into a sidebar via simple pie not sure how to make this work quite right…

    So here is the site where you can view whats going on (it’s the two blue side bars):
    http://thinwithinubeta.thinwithin.com/

    and here is the new css after reading your last comment:

    Code:
    .sidebartop {
    background: url(images/sb2_top.png) center top no-repeat #517381;
    padding-top: 20px;
    }

    .sidebarmiddle {
    background: #517381;
    color: #fff;
    padding:0px 15px;
    }

    .sidebarmiddle p {
    background: #517381;
    color: #fff;
    padding: 0px 15px;
    }

    .sidebarbottom {
    background: url(images/sb2_bottom.png) center bottom no-repeat #517381;
    padding-bottom:20px;
    }

    Thanks,
    Lyle

    #81205
    WildSpirit
    Member

    OK figured out the problem!

    Had some other conflicting css in there!

    Thanks for all your help! :)

    ~Lyle

    #81208
    virtual
    Participant

    The site online has a background image still in the .sidebar p tag – remove it.

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.