My theme is going crazy!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Peter Boosten

    (@pboosten)

    16 years, 8 months ago

    the sidebar is too wide to fit next to container.

    Peter

    Thread Starter demetria

    (@demetria)

    16 years, 8 months ago

    But it’s only 210px!

    My CSS:

    body, h1, h2, h3, h4, h5, h6, blockquote, p, form {
    margin : 0;
    padding : 0;
    }

    body {
    margin : 0;
    font-family : Arial, Helvetica, Georgia, Sans-serif;
    font-size : 12px;
    text-align : center;
    vertical-align : top;
    background-color:#ffffff;
    background-image: url(“http://i78.photobucket.com/albums/j98/klewyx/AP_bcg.jpg”);
    background-repeat: repeat-xy;
    color : #000000;
    }

    h1 {
    font-family : Georgia, Sans-serif;
    font-size : 24px;
    padding : 0 0 10px 0;
    }

    a:link, a:visited {
    text-decoration : underline;
    color : #336699;
    }

    a:hover {
    text-decoration : none;
    }

    p {
    padding : 10px 0 0 0;
    }

    #wrapper {
    margin : 0 auto 0 auto;
    width : 800px;
    text-align : left;
    }

    #header {
    width : 800px;
    }

    #container {
    width : 590px;
    background: url(‘http://i78.photobucket.com/albums/j98/klewyx/posta_bg_ap.png’) repeat-y top left;
    float: left;

    }

    .post {
    padding : 10px 0 10px 0;
    }

    .post h2 {
    font-family : Georgia, Sans-serif;
    font-size : 18px;
    }

    .entry {
    line-height : 18px;
    }

    p.postmetadata {
    border-top : 1px solid #ccc;
    margin : 10px 0 0 0;
    }

    .navigation {
    padding : 10px 0 0 0;
    font-size : 14px;
    font-weight : bold;
    line-height : 18px;
    }

    #sidebar
    {
    background: url(‘http://i78.photobucket.com/albums/j98/klewyx/sidebar_bg_ap.png’) repeat-y top left;
    float: left;
    padding: 0px 20px;
    text-align: left;
    width: 210px;
    }

    .bottom_sidebar
    {
    background: url(‘http://i78.photobucket.com/albums/j98/klewyx/sidebar_bottom_ap.png’) no-repeat bottom center;
    float: right;
    padding: 0px 0px 0px 15px;
    height: 79px;
    text-align: left;
    width: 210px;
    }

    .sidebar ul {
    list-style-type : none;
    margin : 0;
    padding : 0 10px 0 10px;
    }

    .sidebar ul li {
    padding : 10px 0 10px 0;
    }

    .sidebar ul li h2 {
    font-family : Georgia, Sans-serif;
    font-size : 14px;
    }

    .sidebar ul ul li {
    padding : 0;
    line-height : 24px;
    }

    table#wp-calendar {
    width : 100%;
    }

    #footer
    {
    background: url(‘http://i78.photobucket.com/albums/j98/klewyx/footer_ap.png’) no-repeat top left;
    height: 382px;
    text-align: left;
    width: 800px;
    }

    .comments-template {
    margin : 10px 0 0;
    border-top : 1px solid #ccc;
    padding : 10px 0 0;
    }

    .comments-template ol {
    margin : 0;
    padding : 0 0 15px;
    list-style : none;
    }

    .comments-template ol li {
    margin : 10px 0 0;
    line-height : 18px;
    padding : 0 0 10px;
    border-bottom : 1px solid #ccc;
    }

    .comments-template h2, .comments-template h3 {
    font-family : Georgia, Sans-serif;
    font-size : 16px;
    }

    .commentmetadata {
    font-size : 12px;
    }

    .comments-template p.nocomments {
    padding : 0;
    }

    .comments-template textarea {
    font-family : Arial, Helvetica, Georgia, Sans-serif;
    font-size : 12px;
    }

    Michael

    (@alchymyth)

    16 years, 8 months ago

    padding is always added to the width – so your sidebar is actually 250px wide (you have `#sidebar {padding: 0px 20px;} in your style).
    set it to ‘padding; 0px 0px;’ to solve one of your problems.

    Peter Boosten

    (@pboosten)

    16 years, 8 months ago

    Yeah, but has 20px padding to its left and right, and therefore its 250px

    Peter

    Thread Starter demetria

    (@demetria)

    16 years, 8 months ago

    But the text still is going out of frames. :/

    Peter Boosten

    (@pboosten)

    16 years, 8 months ago

    what exactly do you consider ‘frames’?

    A good method for applying paddings and/or margins is the use of inner divs.

    You create outer divs as placeholders (which are the exact width you want them to be), and create inner divs to place the actual text in. You can apply paddings and margins to these inner divs, without having to worry about divs moving away.

    an example

    <div id="outer">
  <div id="inner">
    your text goes here
  </div> <!-- inner div -->
</div> <!-- outer div -->

    and the css

    #outer {
  width: 500px;
}

#inner {
  padding: 10px;
  margin: 10px;
}

    That’ll take 40px of width of your inner div, but won’t harm your outer div’s width.

    Peter

    Thread Starter demetria

    (@demetria)

    16 years, 8 months ago

    Thanks, but now I have another problem 😀

    Footer isn’t showing up.

    Peter Boosten

    (@pboosten)

    16 years, 8 months ago

    because it’s empty (between <div id="footer"> and </div>)

    Peter

    Thread Starter demetria

    (@demetria)

    16 years, 8 months ago

    Yes, but even then when I write something in it the background image doesn’t show up! 🙁

    .footer
    {
    background: url(‘http://i78.photobucket.com/albums/j98/klewyx/footer_ap.png&#8217;);
    height: 382px;
    text-align: left;
    width: 800px;
    }

    Peter Boosten

    (@pboosten)

    16 years, 8 months ago

    change .footer into #footer 😉

    It’s not defined as class in your xhtml.

    Peter

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘My theme is going crazy!’ is closed to new replies.