Web Design Blog – CSS Tutorials, jQuery Tutorials, SEO Tips, Learning Advice, Personal News, and More

Another year has blown by and I have so much appreciation for this great community. I have made many accomplishments both personal and in my career, the launch of my first blog being one of my major highlights. I must first and foremost say how much I appreciate all of my readers and the comments I have received from all of you.

I was browsing through some gallery style sites and saw some inspirational techniques that I wanted to replicate with my own version and style. This is an add-on to my previous articles “5 Ways to Spice up Your Images with CSS ” and “CSS Vertical Navigation with Teaser“, a little combination of both techniques.

We all know achieving vertical alignment with CSS is a big headache. I don’t think I’ve run across any flawless way of doing this, but I would like to go over the one’s that I typically use.

Method 1 – Using Absolute Positioning

One flaw that I must point out right away with this technique is that you must specify the height of the centered element.

My friend and I were working on his site last week and we were in need of a popup very similar to how the lightview works. Since my friend is not very fond of using pre-built js scripts, he asked me to create the same feel from scratch.

I recently worked on a project where I wanted to use sIFR but also wanted to have a background image behind of my headings. I played around with it and found a simple way to get it going. I’m sure this is nothing new to some of you, but for those would like to know, here it is…

This technique is a simple way to display some teaser information for your vertical navigation. I won’t waste any of your time with an intro, let’s get right into the code.

In history, a CSS ninja is a warrior specially trained in a variety of xhtml and css techniques typically equipped with various web design/development tools.