CSS template using intense images

**bidzey75** · 05-16-2011 08:24 PM

I didn't know if I should post this here or in tutorials. This covers a bit of both. But since I'm better at designing graphics then xhtml, I decided to post it here. If that wasn't the right choice.. that's why we got moderators.

This template uses all background images. Sometime I find it's worth the extra 1-3 seconds of loading in exchange for the impact. Not to say this is a marvelous design, it's ok I guess. Notice the unorthodox way I took to link the buttons that are also background images. (this could be a tutorial part for some maybe... maybe not...)

You can view it here
from there you can view the source code and check out the the markup, and you can also open up the "style.css" file by following the link found in the source code. (it's in the same folder)

AND AS A BONUS...

you can download the whole package here

I designed and coded everything from scratch, so there's no copyright issues. The image in the header is not copyrighted. The PSD file is also included so you can modify colors and anything you want. If your handy in graphical software and know how to use a combo of Fireworks and Photoshop you'll be able to open the "slicedTemplate.png" file and save your modified sliced images in a jippy. The fonts are not included so that will be an issue but not a big one. That would be a copyright issue if I had included them.

I coded in sequence so my logic is easy to follow in both the html file, and the css file and I did my best to name all my div IDs after the description of what they do. Again, notice everything is a background image except for where the main content goes.

Enjoy if it's any used to you.

**descalzo** · 05-16-2011 08:34 PM

You should try to preload the rollover images for the buttons. Clear your cache and then reload the page and rollover a button to see what I mean.

**bidzey75** · 05-16-2011 08:42 PM

Originally Posted by descalzo

You should try to preload the rollover images for the buttons. Clear your cache and then reload the page and rollover a button to see what I mean.

yes I noticed that, that's why I left that message in the content... oops

if this is any used to anybody and you want to preload the images do this: (I added it in the demo, but not the package)

inside the <head> html tag insert this javascript:

Code:

<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>

then make your body tag this:

Code:

<body onload="MM_preloadImages('images/slice3H.jpg','images/slice5H.jpg','images/slice7H.jpg','images/slice9H.jpg','images/slice11H.jpg')">

Thread: CSS template using intense images

LinkBack

Thread Tools

Display

CSS template using intense images

Re: CSS template using intense images

Re: CSS template using intense images

Similar Threads

Database, MySQLl, PHP, site template, blog = Oh GOD!

Posting Permissions