The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Chris, can you offer any suggestions, sprites

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #23108

    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 and i posted the code in the following post.

    thanks in advance.


    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(); ?>" />
    <?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>


    <?php get_footer(); ?>

    this is what i included in my style file.


    #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 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


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


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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.