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.
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(); ?>
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.
my site is at http://www.davemcclane.com and i posted the code in the following post.
thanks in advance.
<?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