Grow your CSS skills. Land your dream job.

[Solved] I can not figure this out

  • # August 16, 2009 at 6:10 pm

    I am working with the twitter script that chris put up on this site.

    http://css-tricks.com/video-screencasts … r-updates/

    I have integrated it into a site that I have been working on

    http://www.wilsonwrites.com/

    using this script to make it toggle

    http://www.sohtanaka.com/web-design/eas … -tutorial/

    Demo can be found here
    http://www.sohtanaka.com/web-design/examples/toggle/

    Here is the css for the twitter and the css for the toggle that I have in my page

    Code:
    /*******/twitter scroll box *****/

    h2.trigger {
    padding: 0 0 0 50px;
    margin: 0 0 5px 0;
    background-image: url(h2_trigger_a.gif);
    height: 46px;
    line-height: 46px;
    width: 450px;
    font-size: 2em;
    font-weight: normal;
    float: left;

    }
    h2.trigger a {
    color: #fff;
    text-decoration: none;
    display: block;
    }
    h2.trigger a:hover { color: #ccc; }
    h2.active {background-position: left bottom;} /*–When toggle is triggered, it will shift the image to the bottom to show its “opened” state–*/

    .toggle_container {
    margin: 0 auto;
    padding: 0 0 50px 0;
    border-top: 1px solid #d6d6d6;
    /* background: #f0f0f0 url(twitter/images/toggle_block_stretch.gif) repeat-y left top; */
    background: url(images/page-bg.jpg) top left no-repeat #2f2e2c;
    overflow: hidden;
    font-size: 1.2em;
    width: 700px;
    clear: both;
    }
    .toggle_container .block {
    padding: 20px; /*–Padding of Container–*/

    /*background: url(twitter/images/toggle_block_btm.gif) no-repeat left bottom; /*–Bottom rounded corners–*/

    }

    /*
    Twitter Page
    Chris Coyier

    http://css-tricks.com

    */

    #twitter_div {

    height:360px;
    overflow:auto;
    width:376px;
    margin:50px 0 0 150px;
    }

    ul#twitter_update_list {
    list-style: none;
    font-size: 14px;
    margin-top: 25px;
    }
    ul#twitter_update_list li {
    margin-bottom: 10px;
    padding: 10px;
    color: #7a8a99;
    background: url(images/transpBlue.png);
    }
    a { color: #96997a; }

    You can download the entire package already assembled here
    http://www.creativeeventsdesign.com/jquery.rar

    My problem is that I can not get the image that is suppose to be displayed to show up in wordpress. It shows up on the test page in html. Not in the correct spot, but it’s there. The grey one with the plus sign on it. the only thing that shows are the words.(+View My Twitter Tweets) I can not figure out why the image won’t show. Please help.

    # August 16, 2009 at 6:24 pm

    I’m not 100% sure, but I think the problem is in how you are doing your section comments in your CSS. That slash in the middle is ending the comment:

    Code:
    /*******/twitter scroll box *****/

    Try this instead

    Code:
    /*
    Twitter Scroll Box
    */
    # August 16, 2009 at 6:26 pm

    yep, thanks chris. Now I just got to figure out the positioning.

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

You must be logged in to reply to this topic.

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