Grow your CSS skills. Land your dream job.

Copying Chris

  • # July 13, 2009 at 1:54 pm

    Hey there, new poster trying to learn more about CSS every day. Great site Chris!

    So in watching Chris’ tutorials on skinning a WP site, I really liked a lot of his standard CSS setup. Just a good starting point. So I copied some of that and am trying to make my own "scratch css file". So most of it is fine and I can change all the colors and what not. Just trying to figure out what I want to keep or lose.

    Anyway, I was specifically trying to copy his .button css which didn’t seem overly complicated, but I’m just not getting it to work. And nevermind the round corners, I just can’t get the background image to load in the button at all. Any thoughts on why it’s not working?

    http://www.i9creative.com/testing.html

    Thanks in advance for any help!

    # July 13, 2009 at 2:09 pm

    Try adding some css. all you have done in the stylesheet is give the body a background colour, specified a font and font size and put a margin underneath a paragraph.

    # July 13, 2009 at 6:29 pm

    Hmmm. Well, I’m kinda dumb, so bear with me, but this is what I have in my css file. It should at least be enough to put the frame around the button and give it a background, right? Please be patient with me. Sometimes I think I’ve got some of this CSS down and then I run into the smallest thing that gives me a headache. :? :oops:

    I just did some more digging and here’s what I found… This is what I first had in the CSS file…

    Code:
    @charset “UTF-8″;
    /* CSS Document */

    /* Start Structure */

    * {
    margin:0;
    padding:0;
    }

    html {
    overflow-y:scroll;
    }

    body {
    -x-system-font:none;
    background:#4C4C4C none repeat scroll 0 0;
    font-family:Georgia,Serif;
    font-size:12px;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:normal;
    }

    #page-wrap {
    margin:0 auto;
    width:960px;
    }

    .floatLeft {
    float:left;
    }

    .floatLeft {
    float:left;
    }

    .clear {
    clear:both;
    }

    .inside {
    border:1px solid #999999;
    padding:10px;
    }

    .inside img {
    border:1px solid #666666;
    display:block;
    margin:0 0 10px;
    width:480px;
    }

    /* End Structure */

    /* Start Text Styles */

    .inside h2 {
    color:#111111;
    font-size:36px;
    font-weight:normal;
    margin:0 0 8px;
    }

    .inside p {
    color:#999999;
    font-size:12px;
    }

    p {
    margin:0 0 12px;
    }

    h1, h2, h3, h4 {
    -x-system-font:none;
    font-family:Georgia,Serif;
    font-size:20px;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:normal;
    margin:0 0 12px;
    }

    h4 {
    font-size:17px;
    }

    #header ul {
    float:right;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    padding:10px 0 0;
    text-align:right;
    width:400px;
    }
    #header ul li {
    display:inline;
    }
    #header ul li a {
    background:#7E7E7E none repeat scroll 0 0;
    color:white;
    letter-spacing:2px;
    margin:0 0 0 10px;
    padding:3px 10px;
    text-transform:uppercase;

    /* End Text Styles */

    /* Start Elements */

    .button {
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:10px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    border:1px solid #CCCCCC;
    color:#333333;
    padding:4px 10px;
    background-attachment: scroll;
    background-image: url(images/menu-rollover.jpg);
    background-repeat: repeat-x;
    background: transparent;
    }

    .button:hover {
    background-position:left bottom;
    }

    #thisone a {
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:10px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    background:transparent url(images/menu-rollover.jpg) repeat-x scroll 0 0;
    border:1px solid #CCCCCC;
    color:#FFFFFF;
    padding:4px 10px;
    }

    #rounded {
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:10px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    height: 175px;
    width: 350px;
    border: thin solid #00FF33;
    }

    /* a img {
    border:medium none;
    }

    */

    /* End Elements */

    But the area that I’ve called "Elements" was not showing up in firebug as if it hadn’t uploaded at all. I cut that piece out and placed it between the Structure and Text sections and it worked all of a sudden. So I’m guessing there was an order issue with the CSS. I must have had something after something it should have been before. (Boy does that sound confusing.)

    I’ll keep working on this. At least I’m getting rounded corner elements and the button has a background now.

    # July 13, 2009 at 7:08 pm

    Whooo hoo! Now it’s rolling over and everything. Ok, so I’m not just too dumb, but something funny happened. Why is it that when I changed the order of the CSS things started working fine again?

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

You must be logged in to reply to this topic.

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