Please help me with this css code

Hello guys,

Can someone please help me? I am trying to fix this in gtmetrix:
http://i.imgur.com/BgloCjn.png

This is the code that I have in my site:

<div id="cssmenu">
<ul>
<li class="cssbutton">
<img width="46" height="53" src="<?php bloginfo("template_url"); ?>/images/menu-left.png">
</li>
<li class="cssbutton1">
<a href="#"><img width="131" height="53" alt="Home" src="<?php bloginfo("template_url"); ?>/images/menu-home-active.png"></a>
</li>
<li class="cssbutton">
<img width="100" height="53" src="<?php bloginfo("template_url"); ?>/images/menu-middle.png">
</li>
<li class="cssbutton2">
<a href="#"><img alt="Premium Sites" width="131" height="53" src="<?php bloginfo("template_url"); ?>/images/menu-premium.png"></a>
</li>
<li class="cssbutton">
<img width="100" height="53" src="<?php bloginfo("template_url"); ?>/images/menu-middle.png">
</li>
<li class="cssbutton3">
<a href="#"><img alt="Best Adult Sponsors for Webmasters" width="170" height="53" src="<?php bloginfo("template_url"); ?>/images/menu-sponsors.png"></a>
</li>
<li class="cssbutton">
<img width="100" height="53" src="<?php bloginfo("template_url"); ?>/images/menu-middle.png">
</li>
<li class="cssbutton4">
<a href="#"><img alt="Best Blog" width="131" height="53" src="<?php bloginfo("template_url"); ?>/images/menu-blog.png"></a>
</li>
</ul>
</div>

PHP:

.cssbutton1 img, .cssbutton2 img, .cssbutton4 img {
    border: 0;
}

.cssbutton1, .cssbutton1 a, .cssbutton1 img, .cssbutton2, .cssbutton2 a, .cssbutton2 img {
    height: 53px;
    width: 131px;
}
#cssmenu li {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
}
.cssbutton1, .cssbutton2, .cssbutton3, .cssbutton4 {
    position: relative;
    display: block;
    margin: 0 0 2px;
    padding: 0;
    white-space: nowrap;
}
.cssbutton1 a {
    display: block;
    float: left;
}
#cssmenu li a {
    float: left;
    height: 53px;
}
.cssbutton2 a {
    display: block;
    float: left;
}
.cssbutton3 {
    height: 53px;
    width: 170px;
}
.cssbutton3 a {
    display: block;
    float: left;
    height: 53px;
    width: 170px;
}
.cssbutton3 img {
    border: 0;
    height: 53px;
    width: 170px;
}
.cssbutton4, .cssbutton4 a, .cssbutton4 img {
    height: 53px;
    width: 131px;
}
.cssbutton4 a {
    display: block;
    float: left;
}
.cssbutton1 .active, .cssbutton1 a:hover {
    background: url(/wp-content/themes/xxxxxxxxxx/images/menu-home-active-hover.png) no-repeat;
    text-decoration: none;
}
.cssbutton2 .active, .cssbutton2 a:hover {
    background: url(/wp-content/themes/xxxxxxxxxx/images/menu-premium-hover.png) no-repeat;
    text-decoration: none;
}
.cssbutton3 .active, .cssbutton3 a:hover {
    background: url(/wp-content/themes/xxxxxxxxxx/images/menu-sponsors-hover.png) no-repeat;
    text-decoration: none;
}
.cssbutton4 .active, .cssbutton4 a:hover {
    background: url(/wp-content/themes/xxxxxxxxxx/images/menu-blog-hover.png) no-repeat;
    text-decoration: none;
}

Code (markup):

That results in this menu:


Can someone help me fix the code to appear the images in css?
Will be great if you can help me do the sprite css too

Thank you guys!!

***** images files attached *****

 

Here goes the rest of attached images...

Thanks

 

I forgot this lines in css code:

#cssmenu li,#cssmenu ul{
display:block;
padding:0;
margin:0
}

#cssmenu ul{
background:url(/wp-content/themes/xxxxxxxxxx/images/menu.png) no-repeat;
height:53px;
position:relative;
width:auto;
background-size:100% 100%
}

Code (markup):

 

css - sprites are easy to do, you can use ones the many generators online , i recommend you to use http://spriteme.org/

They have an interesting javascript button that generates sprites depending of your page.

for each image that you add in sprite, you will get a background-position, so after you just need to edit your css file to replace the images url by your sprite url, and add the background-position for each images in your sprite.

 

Fixed, thank you mate

 

That code is just... gah... images as text, div for nothing (UL is a perfectly good block level container), presentational images in the markup...

If I were writing that same code, it would look like this for markup:

<ul id="cssMenu">
	<li class="home">
		<a href="#">
			Best list of porn
			<span>Home</span>
		</a>
	</li>
	<li class="premium">
		<a href="#">
			Best list of porn
			<span>Premium</span>
		</a>
	</li>
	<li class="webmasters">
		<a href="#">
			Best adult sponsors for
			<span>Webmasters</span>
		</a>
	</li>
	<li class="blog">
		<a href="#">
			Best blog of porn
			<span>Blog</span>
		</a>
	</li>
</ul>

Code (markup):

EVERYTHING else being done there belongs in the CSS. I don't have time right now, but I'll try to remember this if I have time later to show you what I mean.

Good rule of thumb though? Massive amount of text as an image? You're doing something wrong. Presentational images in the markup? You're doing something wrong. Extra DIV (or other tag) around JUST a UL? probably doing something wrong.

STUNNING example of what I suspect is some pixel-minded artist being under the delusion they are a designer.

 

can't you just wrap it with forum bbcode ?