PNG’s in IE6 with NO extra code

April 23rd, 2009

Yet another little web design tid bit for you all.

I can’t remember where I found this, but this helped on one site so far. Ever want to use the png format because of the awesome transparency ability, but hate IE6 because it won’t render it? This will allow you to use a PNG in IE6 without the use of the iepngfix javascript files or any other code for that matter. Be aware that you need Fireworks for this to work, because you cannot change the png to Alpha Transparency in Photoshop. Sucks, I know, but for those that have both, ya.

I’ve used it successfully on photos and things with a clear and defined shape to them. If you are doing this with a text image because of a cool font, then be careful with dropshadows and glows. It won’t be perfect, but the quality will crush the gif format that you would be usually stuck with. It also gets you away from using flash for silly things.

1) Save the file as a PNG-24 in Photoshop
2) Open it in Fireworks
3) Change the PNG-32 to PNG-8
4) Change No Transparency to Alpha Transparency
5) Click Rebuild
6) Export

You would of course still have the original png to use in the CSS for the modern browsers that work fine with them. So your CSS would look like this:

#divName {
background-image: url(images/imageName.png); /*png-24 version*/
_background-image: url(images/imageNameIE6.png); /*png-8 version for IE6 only */
}

God I can’t wait for IE6 to go away.

First web design post – Pop up image using pure CSS

April 16th, 2009

First, while this works, I would prefer to use the lightbox javascript instead, but this does the same kind of thing, just not as much eye candy.

When you hover over the image it pops up a larger version of it using styles assigned to the <a></a>tag.

Here is the CSS

a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#50BFDB;
text-decoration:none
}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
display:block;
font-size:16px;
font-weight:bold;
background-image:url(/images/imagename.jpg);
background-repeat:repeat-x;
background-position:bottom;
position:absolute;
top:-40px; right:180px; width:230px; height:200px;
border:1px solid #B2CB55;
background-color:#fff; color:#50BFDB;
text-align: center;
padding-left:10px;
padding-right:10px;
}

And here is the html:

<div id=”divName”><a class=”info” href=”#”><img alt=”imgAltHere” height=”xxx” src=”images/imageName.jpg” width=”xxx” /><span> </span></a></div>

New freelance site done in WordPress

April 16th, 2009

I’m currently working on a freelance project for a builder in Palatine called APSE builders. Started with nothing except what links would be on the page…that’s it. Sometimes that is all a client has to give you, along with a few sites they like or don’t like. In this case, I had the freedom to do what I wanted for the most part, except for the logo. He had specific ideas on what he wanted, I just refined them.

This is my first COMPLETE site done in WordPress. Obviously this blog is, but this project is done completely using it. Thank God for my supervisor giving me a short lesson, because all the tutorials I’ve seen are completely over complicated. It is actually quite easy, which surprised me. I’m going to be writing some of my tutorials of my own on how to do it later on.

Anyway, check out the site so far at:

www.apsebuilders.com

I just need to add content and some video to this site and I am done.

So, WordPress is cool…

March 23rd, 2009

As you can see, I have learned how to customize my WordPress blog. I can now also use that knowledge to use it as a content editor. It is actually pretty easy to use. Oh, and for those reading this, if any…if you know how to use the Pods plugin, can you please tell me? Cause their documentation/support is complete CRAP!

Luckily I have figured out how to use the widgets in multiple sidebars. This will allow me to do multiple editable areas.

All in all, WordPress ROCKS!

Set up my Google Adwords…

March 4th, 2009

I set up my adwords campaign last night. I’m sorry, but if you don’t know what you are doing, it is not an easy thing. It must be very confusing to someone who is not that competent using the internet. I got it running though, so let the freelance work come!