@Paul_O_B,
Thanks for examining my code. Your admonition about the size of the images inspired me to give them another look.
First, let me say that I intentionally did not try to modify the .pngs because Mr. fox had not responded to several suggestions to do so. The transparency in the menu sprites did not lend them to becoming .jpgs and likewise the transparency in the slider background… so I left them alone… didn’t explore other options.
Now to my revisit.
A new strategy…! The menu images have been reduced from 10 individual .pngs to 2, menupad.png and menusprites.png. The byte count went down from approx 650 KB to 102 KB (and of course the image count went down by 8). The advantage here is that the images remain .pngs and keep their transparency! This design is indistinguishable from the original. The new sprites are applied by adding a pair of span tags within each menu anchor.
The other image that I revisited is the slider_bg.png. 261 KB seemed excessive, but I couldn’t turn it into a .jpg without sacrificing its transparency. Today I made a screen capture with the slider turned off and saved it as a medium quality jpg, slider_bg.jpg. Because it is a screen capture, it retains the appearance of transparency and reduces the byte size to 35 KB. Only under magnification is the .jpg artifact noticable. The size reduction is very significant and was easy enough to accomplish.
The image related byte count is now ~343 KB + the slide show at ~377 KB = ~720 KB. Still hefty, but much better than the previous 1500 KB and SO much better than the full blown Wordpress’ bloat.
images: slider_bg.jpg, menupad.png, menusprites.png
@cgacfox,
To add slide_bg.jpg and save 226 KB, drop the new image into your images directory and change the suffix from .png to .jpg in your CSS (CSS shown below). Easy.
To replace the menu sprites, drop the 2 new images into your images directory and replace the all of the menu code:
/* -------------------------------------------- *\\
Main Menu
\\* -------------------------------------------- */
.menu {
list-style-type:none;
padding:0;
margin:0;
}
.menu li {
width:161px;
height:162px;
margin-top:20px;
margin-left:15px;
}
.menu li a {
display:block;
width:161px;
height:162px;
position:relative;
background-image:url(../images/menupad.png);
font:0/0 a; /*use the next 3 lines instead of text-indent: -9999px*/
text-shadow:none;
color:transparent;
}
.menu li a span {
position:absolute;
top:71px;
left:46px;
width:106px;
height:50px;
background-image:url(../images/menusprites.png);
}
.menu li.home a span {
background-position:0 0;
}
.menu li.home a:hover span {
background-position:106px 0px;
}
.menu li.about a span {
background-position:0 50px;
}
.menu li.about a:hover span {
background-position:106px 50px;
}
.menu li.necklaces a span {
background-position:0 100px;
}
.menu li.necklaces a:hover span {
background-position:106px 100px;
}
.menu li.bracelets a span {
background-position:0 150px;
}
.menu li.bracelets a:hover span {
background-position:106px 150px;
}
.menu li.earrings a span {
background-position:0 200px;
}
.menu li.earrings a:hover span {
background-position:106px 200px;
}
.menu li.lanyards a span {
background-position:0 250px;
}
.menu li.lanyards a:hover span {
background-position:106px 250px;
}
.menu li.bookmarks a span {
background-position:0 300px;
}
.menu li.bookmarks a:hover span {
background-position:106px 300px;
}
.menu li.request a span {
background-position:0 350px;
}
.menu li.request a:hover span {
background-position:106px 350px;
}
.menu li.available a span {
background-position:0 400px;
}
.menu li.available a:hover span {
background-position:106px 400px;
}
.menu li.testimonials a span {
background-position:0 450px;
}
.menu li.testimonials a:hover span {
background-position:106px 450px;
}
/* -------------------------------------------- *\\
flexslider
\\* -------------------------------------------- */
.flexslider {
/* outline:1px solid white; /* TEST Outline (compare outline to border) */
height:420px;
background:url(../images/slider_bg.jpg) no-repeat 50% 0;
padding:0;
margin:0 auto;
}
Add [noparse]<span></span>[/noparse] tags to the menu items:
<li class="home"><a href="index.html"><span></span>Home</a></li>
<li class="about"><a href="about.html"><span></span>About Me</a></li>
<li class="necklaces"><a href="necklaces.html"><span></span>Necklaces</a></li>
<li class="bracelets"><a href="bracelets.html"><span></span>Bracelets</a></li>
<li class="earrings"><a href="earrings.html"><span></span>Earrings</a></li>
<li class="lanyards"><a href="lanyards.html"><span></span>Lanyards</a></li>
<li class="bookmarks"><a href="bookmarks.html"><span></span>Bookmarks</a></li>
<li class="request"><a href="request.html"><span></span>By Special Request</a></li>
<li class="available"><a href="available.html"><span></span>Available Now</a></li>
<li class="testimonials"><a href="testimonials.html"><span></span>Testimonials</a></li>
The complete demo can be found here:
https://www.dropbox.com/sh/2prcojgkcp8rid0/qZ7e_MzmZ3
After testing successfully, delete the unused menu images. I suggest keeping the slider_bg.png. Should you reposition the slider on the page, you may need to make another .jpg and will need the .png to do so.
Tested in FF, Chrome, Opera, IE8, IE10
Cheers!
The web needs to work with fluid mediums and avoid trying to match fixed height images to content so more subtle approaches need to be made to make a more robust layout.
I should 
I have accidently left off a page in the menu that needs to be added under lanyards. It will be eyeglass Chains. How easily can I add that menu item?![right column image and the [URL=“http://foxdencreations.com/new_site/images/nav_bg.jpg”]left column image](http://foxdencreations.com/new_site/images/content_bg.png){kind=link}