Grow your CSS skills. Land your dream job.

Chris, can you offer any suggestions, sprites

  • # August 19, 2008 at 2:58 am

    ive been stuck on these sprites for the last week, im using wordpress and basicly trying to use the css sprites for my buttons. i followed everthing you did in screen cast #13 for creating the sprites, yet i customize the settings for my buttons width and height. i think im almost there, but for some reasons these images are not showing up.
    my site is at http://www.davemcclane.com and i posted the code in the following post.

    thanks in advance.

    # August 19, 2008 at 11:01 am

    maybe this might help, this is what i have posted in my index.php file. i basicly followed the instruction in chris’s screencast #13. i just customized it with my own sprite images, with there corresponding heighth and width.

    <?php get_header(); global $blog_postcount, $blogcat; $first_comic = get_first_comic(); ?>

    <?php $wp_query->in_the_loop = true; $comicFrontpage = new WP_Query(); $comicFrontpage->query(‘showposts=1&cat=’.$comiccat);
    while ($comicFrontpage->have_posts()) : $comicFrontpage->the_post(); ?>
    <div id="comic">
    <img src="<?php comic_display(); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />
    </div>
    <?php endwhile; ?>

    <div id="page">

    <ul id="nav">
    <li class="first"><a href="#">first</a></li>
    <li class="back"><a href="#">back</a></li>
    <li class="next"><a href="#">next</a></li>
    <li class="last"><a href="#">last</a></li>
    </ul>

    </div>

    <?php get_footer(); ?>


    this is what i included in my style file.

    /* THE PAGE WRAPPER */

    #page {
    width: 760px;
    margin: 0px auto;
    text-align: left;
    background: #fff ;
    }

    ul#nav {

    }
    ul#nav li {
    display: inline;
    }
    ul#nav li a {
    display: block;
    height: 56px;
    text-indent: -9999px;
    float: left;

    }
    ul#nav li.first a {
    width: 183px;
    background: url (images/nav-first.jpg) bottom center no-repeat;

    }
    ul#nav li.back a {
    width: 157px;
    background: url (images/nav-back.jpg) bottom center no-repeat;

    }
    ul#nav li.next a {
    width: 144px;
    background: url (images/nav-next.jpg) bottom center no-repeat;

    }
    ul#nav li.last a {
    width: 142px;
    background: url (images/nav-last.jpg) bottom center no-repeat;
    }

    ok this is basicly what i have yet im still having problems getting the images to show

    # August 20, 2008 at 11:14 am

    I think the problem you are having is the background declaration in your CSS. There should be no space between the "url" and the opening "(" like you have. I think this whole attribute is getting ignored because of this.

    # August 21, 2008 at 1:16 am

    thanks for replying chris, im going to take a look at it now.

    # August 21, 2008 at 1:20 am

    thanks alot chris, that appeared to be what it was.

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

You must be logged in to reply to this topic.

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