WordPress.org

Ready to get started?Download WordPress

Forums

Site styling problem - right side column (11 posts)

  1. mattnaugle2
    Member
    Posted 9 years ago #

    I am working on http://www.ohioforblackwell.com/blog/ - Why on earth won't the ENTIRE right column turn blue? Any suggestions?

    Thanks :-)

  2. NuclearMoose
    Member
    Posted 9 years ago #

    Basically you need to use a background colour or background image for the sidebar itself, and not just the sidebar menu.

  3. mattnaugle2
    Member
    Posted 9 years ago #

    Here is the style sheet:

    /* General Layout */
    body {
    margin: 0;
    padding: 0;
    background: #f6f6f6;
    color: #000;
    font-family: 'lucida grande', 'lucida sans unicode', verdana, sans-serif;
    text-align: center; /* added by Alex King for compatibility with IE 5 */
    }

    #rap {
    margin: 10px auto 0 auto;
    padding: 0;
    width: 767px;
    border: 3px solid #aba;
    background: #fff;
    background-image: url('slant-whitegray.gif');
    overflow: auto;
    text-align: left; /* added by Alex King for compatibility with IE 5 */
    }

    #header {
    background-image: url("http://www.ohioforblackwell.com/blog/images/slant-green.gif");
    margin: 0;
    padding: 0px;
    font: normal 2.8em georgia;
    border-bottom: 2px solid #aba;
    }

    #header a {
    color: #666;
    text-decoration: none;
    }

    #content {
    width: 500px;
    margin: 0;
    text-align: left;
    float: left;
    background-color: transparent;
    padding: 10px 25px;
    border-right: 2px solid #aaa;
    }

    #menu {
    margin: 0;
    padding: 0;
    width: 215px;
    background: #00135E;
    float: right;
    overflow: hidden;
    }

    .credit {
    clear: both;
    width: 750px; /* changed by Alex King to match the width of the body */
    margin: 0 auto 10px auto;
    padding: 5px 3px;
    background-image: url('slant-green.gif');
    color: #000;
    text-align: center;
    }

    .credit cite {
    color: #000;
    font-size: 90%;
    font-style: normal;
    letter-spacing: 1px;
    }

    .credit a, .credit a:link, .credit a:hover {
    color: #fff;
    text-decoration: none;
    }

    /* Basic XHTML styling */
    h1, h2, h3 {
    font-family: georgia, palatino, serif;
    }

    h2 {
    margin: 0;
    padding: 0;
    font-size: 110%;
    }

    h3 {
    font-size: 120%;
    }

    p {
    font: 80%/130% verdana, 'lucida sans unicode', sans-serif;
    color: #555E55;
    }

    /* Links */
    a {
    color: #aba;
    text-decoration: none;
    }

    a:link, a:visited {
    color: #666;
    text-decoration: none;
    }

    a:hover {
    text-decoration: none;
    }

    a:active {
    text-decoration: none;
    }

    a img {
    border: none;
    }

    /* Menu styling */
    #menu a:link, #menu a:visited, #menu a:hover, #menu a:active {
    margin: 0;
    padding: 0;
    }

    #menu ul {
    margin: 10px 0 5px 10px;
    padding: 0;
    color: #D10000;
    list-style-type: none;
    font: 12px palatino, georgia;
    }

    #menu ul li ul {
    margin: 0 10px;
    padding: 0;
    }

    #menu ul li ul li {
    margin-top: 2px;
    }

    #menu #categories, #menu #search, #menu #archives, #menu #other, #menu #meta, #menu #style {
    padding-top: 10px;
    }

    #menu form {
    margin: 0;
    }

    #menu input {
    font-family: 'lucida sans unicode', verdana, sans-serif;
    }

    #menu form #searchbox {
    width: 8em;
    padding: 2px;
    }

    /* Form styling */
    form {
    margin: 0;
    padding: 0;
    }

    input, textarea {
    padding: 1px;
    }

    /* other elements */
    code {
    font-style: normal;
    color: #000;
    padding-left: 15px;
    font-family: 'courier new', courier, monospace;
    }

    acronym, abbr {
    border-bottom: 1px dashed #aaa;
    cursor: help;
    font-size: 80%;
    letter-spacing: .07em;
    font-weight: bold;
    }

    /* WordPress elements */
    .post {
    text-align: left;
    margin: 0 0 25px 0;
    }

    .storytitle {
    margin: 0;
    padding: 0;
    font-size: 120%;
    font-family: georgia, palatino, serif;
    font-weight: normal;

    }

    .storytitle a {
    color: #9BAA9B;
    text-decoration: none;
    }

    .storycontent ul, .storycontent ol {
    font: .8em 'lucida sans unicode', 'lucida grande', verdana, sans-serif;
    }

    .storycontent ul li, .storycontent ol li {
    margin-top: 3px;
    }

    .meta {
    font: 11px 'lucida grande', 'lucida sans unicode', verdana, sans-serif;
    }

    .meta a {
    color: #747474;
    }

    .meta ul {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
    }

    .meta li {
    display: inline;
    }

    .feedback {
    font: 11px 'lucida grande', 'lucida sans unicode', verdana, sans-serif;
    color: #000;
    text-align: left;
    }

    /* WordPress comments form */
    #commentform input, #commentform textarea {
    background: #fff;
    border: 1px solid #aaa;
    }

    #commentform textarea {
    width: 100%;
    }

    /* WordPress calendar */
    #calendar {
    margin: 10px 0;
    }

    #wp-calendar {
    border-left: 1px solid #aba;
    border-right: 1px solid #aba;
    border-bottom: 1px solid #aba;
    empty-cells: show;
    margin: 0;
    width: 80%;
    }

    #wp-calendar caption {
    padding: 3px;
    text-align: center;
    background-color: #aba;
    color: #fff;
    }

    #wp-calendar #next a {
    margin-top: 5px;
    padding-right: 10px;
    text-align: right;
    }

    #wp-calendar #prev a {
    margin-top: 5px;
    padding-left: 10px;
    text-align: left;
    }

    #wp-calendar a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    }

    #wp-calendar a:hover {
    background: #000;
    color: #fff;
    }

    #wp-calendar td {
    color: #777;
    font-family: 'lucida grande', 'lucida sans unicode', verdana, sans-serif;
    letter-spacing: normal;
    padding: 3px 0;
    text-align: center;
    }

    #wp-calendar #today {
    background: #aba;
    color: #fff;
    }

    #wp-calendar th {
    font-style: normal;
    text-transform: capitalize;
    }

    I don't see anything that seperates the menu from the "sidebar"- Am I wrong?

  4. Lorelle
    Member
    Posted 9 years ago #

    Yikes, it's not very good form to post your entire stylesheet - only the part with the problem. And the sidebar and menu are words used synonymously.
    Yours is called menu.

  5. mattnaugle2
    Member
    Posted 9 years ago #

    I sincerely apologize- I am a stupid newbie who doesn't know much about css, other than trial and error.

    How do I make the height of the blue to be 100%?

  6. Root
    Member
    Posted 9 years ago #

    You have a bg gif already. Just add a blue bit on the end of the graphic.

  7. mattnaugle2
    Member
    Posted 9 years ago #

    That doesn't work- The gif doesn't do anything at this point- I just took it out and it still looks the same. Is there no way to change the background color of the right column?

  8. mattnaugle2
    Member
    Posted 9 years ago #

    I apologize again aboust posting my entire style file- If a mod could delete that, please do.

    I am still stuck with trying to make this blue menu be 100% tall- Any suggestions? :-)

  9. Kiddeath91
    Member
    Posted 9 years ago #

  10. Root
    Member
    Posted 9 years ago #

    As I suggested.

  11. mattnaugle2
    Member
    Posted 9 years ago #

    It works perfectly! Thank you so much guys!!!!

    :-)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.