Grow your CSS skills. Land your dream job.

Problem with my sidebar background (misplaced)

  • # September 23, 2009 at 4:13 am

    Hello,

    This is my first time coding a theme for wordpress and I’ve been able to solve most of the problems that I’ve had but I can’t work out what happens with this one.

    The background of my sidebar is misplaced, the text won’t get centered. The link to my page is this http://personal.carmeriera.com (Note that there’re other problems that I’m still trying to solve by myself… Any suggestions on those will be welcome, obviouslly!)

    I’ll paste the code for you to check it:

    CSS:

    Code:
    /*
    Theme name: Carme Riera v.1
    Theme URL: http://personal.carmeriera.com
    Version: 1.0
    Author: Carme Riera
    */

    body {
    background-image: url(images/body_bg.jpg);
    background-repeat: repeat-x;
    background-color: #631a24;
    font: constantia, palatino, “times new roman”;
    font-weight: lighter;
    line-height: 150%;
    color: #fff;
    height: 100%;
    }

    a {
    text-decoration: none;
    color: #e2989a;
    }

    a img { border: none; background: none; }

    ul { list-style: none; }

    ol { list-style: decimal inside; }

    h2 {
    font-size: 31px;
    font-family: Bookman, serif;
    font-weight: lighter;
    font-style: italic;
    color: #e2989a;
    line-height: 120%;
    }

    h3 {
    font-size: 12px;
    font-family: “Times New Roman”;
    font-weight: lighter;
    color: #fff;
    }

    h4 {
    font-size: 20px;
    font-family: “Times New Roman”;
    font-weight: lighter;
    color: #fff;
    }

    h5 {
    color: #c4ad9c;
    font-size: 20px;
    font-family: “Times New Roman”;
    text-transform: uppercase;
    font-weight: lighter;
    font-style: normal;
    line-height: 140%;
    }

    /* Mozilla based browsers */
    ::-moz-selection {
    background-color: #e2989a;
    color: #000;
    }

    /* Works in Safari */
    ::selection {
    background-color: #e2989a;
    color: #000;
    }

    .about {
    text-align: justify;
    }

    span.highlight {
    background-color: #842124;
    padding: 3px;
    }

    /****** STRUCTURE *****/

    #wrap {
    width:900px;
    margin:0 auto;
    }

    .moretext {
    float: right;
    }

    /******* Header Style *******/

    #header {
    margin: 40px 0px 50px 0px;
    }

    h1#logo {
    letter-spacing:1px;
    float: left;
    margin: 0px 150px 100px 0px;
    font-size:35px;
    font-weight: normal;
    }

    h1#logo span {
    font-weight: bold;
    }

    h1#logo a {
    color: #e2989a;
    }

    ul#nav {
    letter-spacing: 1px;
    line-height: 50px;
    font-size: 15px;
    }

    ul#nav li {
    float: right;
    display: inline;
    margin: 0px 20px 0px 0px;
    text-transform: uppercase;
    }

    ul#nav li.current_page_item a {
    border-bottom: 2px solid #5e2b32;
    }

    ul#nav li a {
    color: #fff;
    }

    /**** COS ****/

    .post_snippet {
    margin:40px 0px;
    padding:20px;
    -moz-border-radius: 10px 10px 10px 0px;
    }

    .comment {
    font-family: “Times New Roman”;
    font-size: 40px;
    color: #FFF;
    text-align: right;
    }

    .shield {
    position: relative;
    left: 442px;
    bottom: 6px;
    }

    .commentscloud {
    position: absolute;
    text-align: center;
    line-height: 37px;
    top: -70px;
    left: 22px;
    width: 44px;
    height: 53px;
    padding: 0px;
    background: url(/wp-content/themes/prova/images/comment_bubble.png) no-repeat 0 0;
    }

    #main-col { width: 546px; }

    /***** SIDEBAR *****/

    #sidebar { color: #381e1c;
    font-family: Georgia;
    font-weight: normal;
    font-size: 12px;
    font-style: normal;
    text-align: center;
    line-height: 130%;
    width: 250px;
    float: right;
    margin: 130px 0px 0px 0px;
    background: url(images/sidebar_tiny_bg.png);
    background-repeat: repeat;
    padding: 0px;
    position: relative;
    }

    .twitter_img {
    position: absolute;
    left: 10px;
    top: -126px;
    z-index:1;

    }

    #shield_t {
    position: relative;
    }

    #tweet {
    position: absolute;
    top: 110px;
    right: 80px;
    font-size: 12px;
    width: 250px;
    line-height: 15px;
    }

    /***** FOOTER *****/

    #footer {
    background: #000;
    height: 300px;
    }

    #footer_inside {
    color: #fff;
    text-align: center;
    }

    #social_links {
    color: #f2c18e;
    font-size: 14px;
    }

    Sidebar.php:

    Code:
    < ?php echo Twitterpate(); ?>
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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