Bulletproof - Localhost

Hello all,

I have looked at a few of your templates here at Bulletproof and have seen a very attractive drop shadow on your container. I am trying to accomplish this same task, can you guys tell me how to do it or point me in the direction of a good tutorial?

Also I was using the Faux column method to to make my sidebars background expand all the way to the bottom but I was finding it to have cross browser issues which your templates don't appear to have. Am I using an out dated method?

[waseem]

Hi Puma,

To create equal height columns we use a couple of different methods (It all depends on the template and the desired end result). The methods we use are "clearfix", faux columns (with background images attached to the parent element [usually #BodyContent in our templates]) and the equal-height javascript method.

If you need an explaination on any of these just let me know

With regards the drop shadow, it's added as a "glow" to the graphic files (using Adobe Fireworks, our web graphic design program of choice), then sliced accordingly. Basically all you need to do is select the page element in your graphic and apply the fireworks glow filter - adjusting as necessary.

Fig1: Shows how to select the glow filter


Fig1: Shows a typical edit to the glow filter


Hope this helps!

Waseem

Thanks again for your help Waseem and your timely response.

I have used Faux columns in the past only to notice that safari and some versions of Firefox do not support the the transparent .gif background. I have never heard of the javascript or clear fix methods. Which is best suited for a 3 column layout? What are the advantages of each.

I understand the method for creating the graphical drop shadow but not how to apply it to the container. I believe that if I try to create a fluid layout I will run into the same problem as I did with the faux columns above since this is the technique that I would use to apply a shadow to vertical space while retaining fluidity.

Side note: I know that the purpose of fluid layouts is to accommodate different screen resolutions but I don't really understand why they are that important when IE, which is used by almost half the world, doesn't respect the min-width, max-width attribute. I see in your skeleton template that you have a style sheet specific to IE but that doesn't resolve our resolution problem. Is there some sort of script that can detect the resolution of the client and apply an appropriate style sheet?

With all that said, you can totally ignore that last question because the first two are the most important, but what resolution would you suggest as standard today if I made a fixed width layout.

Thanks for your help Waseem and let me know if there is any way I can give back to you and bulletproof for all your help.

nice....

keep it up....

Thank you, that was Helpful!