CLICK HERE TO START PLAYING OUR GAME!

So what makes this game so different you ask? Well the game is completely browser-based. That’s right, a full 3D environment third person shooting game that is playable through your web browser!

It’s a simple game of Marines vs. Insurgents based in a mideast town (for the BETA at least, we have three total levels for full release of the video game).

We used the Unity3d game engine to develop this game, and although our game is still in a official “BETA” title, I felt it was finally time to share this awesome work with the rest of my readers and the world.

In order to play Combat Extreme (the 3d third-person shooter) on Facebook through your web browser, you must have the unity3d web player installed. The web player is designed specifically to render geometry and post process effects directly through ones browsers (Yes even IE).

Combat Extreme (the 3d third-person shooter) is indeed exclusive to facebook.com right now and may or may not be opened to further social gaming markets. We really wanted to create a seamless experience for our UX, and insisting the user create a new account with an email address conformation + allow the app on their page was asking way too much. Thus, we eliminated the biggest step and allow our users to login to Combat Extreme (the 3d third-person shooter game) through their facebook account.

CLICK HERE TO START PLAYING OUR GAME!

A while ago I was asked by a follow co-worker if I think it was possible to build an entire site using only two elements in my CSS selectors. Now I must admit, at the time I found the whole idea to be kinda crazy, however the more I got to thinking about it the more I started to love the challenge. So after better defining, then adopting the challenge, I felt it was time to share this code game with everyone.

Take a look at this very site's own style sheet that passes this two selector challenge

As most know, it’s always a good idea keep your CSS selectors slim to help the browser performance. With more and more complex sites however, there seems to be a trend of writing code that just works, and not code that works to the best of its ability.

When browsers read our style sheets, they do so by traversing our markup DOM through the selectors we feed it, then it applies our styles to that element or elements. The longer our selectors are, the more work the browser has to do to locate that element or elements.

Selector lengths may seem trivial at first. However if you multiply that long selector against the size of your style sheet, you can see this how this would impact a site’s performance. By cutting down the length of elements in our selector we help the browser parse through our style sheets faster. Not only does using shorter selectors help with performance, but also helps with organization and legibility for you the developer.

With the two element CSS selector challenge, you push your thinking in a more minimalistic frame of mind with little impact and/or no learning curve.

The Rules:

There is really only one rule at this time, and that’s to never ever exceed more than two elements in your CSS selectors. You may use pseudo, child, adjacent and element attributes in your selectors still, because this does not violate our rule of exceeding two elements.

Examples of valid two element selectors:

li a { .. }

#header #nav { .. }
#nav li { .. }
#nav .active { .. }

.active a { .. }
.active .active { .. }
.category #nav { .. }

li.active a { .. }
li.active a.active { .. }

#nav > li { .. }
li.current + li { .. }
form input[type="text"] { .. }

#nav li,
li.active a,
li.active a.active { .. }

These are all valid and only using two elements, even if we point to an element and it’s attribute as well.

What is not a valid two element selector?

ol li a { ... }
#nav li a { ... }
#nav .active a { ... }
#nav li.active a.active { ... }

#nav > li a { .. }
li.current + li a{ .. }
form li input[type="text"]

These are not valid because they simply exceed the “two elements only” rule.

When I first picked up this challenge I was really amazed at how natural it was for me to write selectors longer than two elements. During my challenge, I was faced with lots of little instances that really made me rethink my selector approach.

If you indeed try to pick up this challenge, the best advice I can give you is to not be afraid to use more classes in your markup. I found that whenever I was faced with a really tough instance, adding an additional class to my markup was always the best solution.

Over time, I fully adopted this challenge into my everyday practice and now it flows like second nature. So I can promise you, with just a little effort and almost no learning curve, you can drastically improved your style sheets performance and organization.

>> Click here to start your first two selector challenge

Your first challenge is to take this markup and make a proper CSS layout for it using only two elements in your selectors. Once you have completed the challenge, share your link with me here in the comments below and tell me a little about your challenge experience.

Special thanks to Paul Farning and Christoph Saxe for bringing this most excellent challenge to life!

Devin R. Olsen

Sprites are compiled versions of different creative parts of a website that typically has no need for repeating axises. Sprites are recommended to be used when ever possible to help cut down on HTTP requests to the server, and ultimately help speed up the performance of your website.

You should never include creative into a sprite that is page or content specific, or will need to be frequently updated. You absolutely can’t add creative that needs to be repeated on both the x and y value. You can however add creative that needs to be repeated by a single x or y axis, but only if you prepare the sprite so it indeed repeats from edge to edge of that sprites axis.

When thinking about how to organize my sprites, I tend to group everything into two parties:

• A global look and feel sprite.
• All other specific Case Scenarios sprites.

A global sprite is made up of all large site wide repeating creative parts (such as header and footer contents) that are compiled into a single image. Whereas specific case scenario sprites (such as custom buttons and their events) are on their own and should never be included into the global sprite. Again, we define this clear division based on the likely hood of the sprite ever needing to be update or changed at a later point.

Lets take a look at a global site sprite:

A global site sprite.

As you can see in the above sprite, we have most of the sites global creative components compiled into a single image. We even at the bottom of the above sprite have a perfect example of a creative part needing to be repeatable in (in this example the x axis) a single axis. Elements such as buttons that have different event states (hover,clicked or disabled) should always be a sprite no matter what, but again never added to this global sprite.

A button sprite, see how it's setup to be used on a sliding door technique and has two event states.

Now that we have a good understanding of the requirements and organization or sprites, lets to dig into the CSS concepts of using our sprites with our site elements. You have two methods to set your sprites as background on elements with CSS, and they are:

• background
• background-image

Here are examples of these two background setting methods:

#element{
    background:url("../sprite.png") x y no-repeat;
}

The above is the short hand version of setting the background image,  x y positions (typically pixel values) and if the background should be repeatable or not. Again, with sprites you will only ever be using either no-repeat, repeat-x or repeat-y.

.element-one,.element-two {
    background-image:url("../sprite.png");
    background-repeat:no-repeat;
}

.element-one { background-position:x y; }
.element-two { background-position:x y; }

The above version makes use of the long hand version to set the sprite over two elements, make it not repeatable and then give two unique axis position values over the two elements.

As stated above, you may set the position values in pixel, but you can also position words as well:

.element-one { background-position:0 0; }
.element-two { background-position:right bottom; }

In the above example “.element-one” gets a very specific pixel x and y axis value(equals top left). Our “.element-two” however, just states its x and y values by using top, right, bottom or left words. This really comes in handy when you have the need to position the sprite to element constantly to the top, right, bottom or left, under any width or height variants.

As mentioned a few times now, buttons that have different creative states should be compiled into their own sprite. You can then use such things as the CSS pseudo hover selector to change between different creative states like so:

.element-two:hover { background-position:right top; }

You can also have “conditional” classes that change the sprites background-position over your elements with help of JavaScript, like so:

.element-one,.element-two {
    background-image:url("../sprite.png");
    background-repeat:no-repeat;
}

/*The Conditional Classes*/
.on { background-position:left top; }
.off { background-position:left bottom;}

//jQuery code
$('.element-one,.element-two').toggle(function(){
$(this).removeClass('off').addClass('on');
},function(){
$(this).removeClass('on').addClass('off');
});

We set our sprite to the background of our two elements (.element-one, .element-two) and then change the background-position through the on and off classes. Next we use a little jQuery to toggle the adding and removing of our on and off classes over our two elements when ever they happen to be clicked.

Here is an advanced example of using a simple sprite with CSS and JavaScript:

• Hover, then click me:

  • Header to the content 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus lacinia aliquam. Donec risus nisi, lacinia nec aliquet vitae, vehicula a quam. Phasellus ornare tempor neque, in laoreet urna eleifend a. Praesent id justo quis mi elementum adipiscing. Maecenas risus velit, fermentum at scelerisque ut, faucibus ac tortor.

• Hover, then click me:

  • Header to the content 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus lacinia aliquam. Donec risus nisi, lacinia nec aliquet vitae, vehicula a quam. Phasellus ornare tempor neque, in laoreet urna eleifend a. Praesent id justo quis mi elementum adipiscing. Maecenas risus velit, fermentum at scelerisque ut, faucibus ac tortor.

• Hover, then click me:

  • Header to the content 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus lacinia aliquam. Donec risus nisi, lacinia nec aliquet vitae, vehicula a quam. Phasellus ornare tempor neque, in laoreet urna eleifend a. Praesent id justo quis mi elementum adipiscing. Maecenas risus velit, fermentum at scelerisque ut, faucibus ac tortor.

• Hover, then click me:

  • Header to the content 4

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus lacinia aliquam. Donec risus nisi, lacinia nec aliquet vitae, vehicula a quam. Phasellus ornare tempor neque, in laoreet urna eleifend a. Praesent id justo quis mi elementum adipiscing. Maecenas risus velit, fermentum at scelerisque ut, faucibus ac tortor.

>> Click Here for Above Example’s Code
>> Click Here for Above Example’s Sprite

Final Thoughts

Lastly, because our sprites make use of some very specific x and y pixel or word based positioning, it’s very important that you update sprites with extreme caution. A slight addition or subtraction to a sprite’s creative location or overall dimensions means having to fix all your CSS position values. So I say it again, we make a clear division between global sprite and specific case scenarios based off the likely hood of the sprite ever needing to be updated.

And that’s it, I hope this little article helps a few people gather what they need in order to create great site sprites.

Thanks everyone.

Devin R. Olsen

The problem is sometimes you have a parent element whose styles such as background image or borders are important to your design, yet it gets collapsed when its immediate children elements are floated. One way to fix this was to float the parent element as well, but this was a bad idea for two reasons.

One reason why bubbling up the float to the parents is not good is the fact that it means you are using a float style in more places than is required. Another good reason why bubbling up floats is bad, is that some times you want to have a centered aligned web site, meaning the main wrapper to you site is aligned center to the page. If you continue to bubble up the float, your align centered site is not longer centered cause your main element is now floating.

So how do we fix this float problem with out bubbling up the floats to our parent elements?

Simple with the help of our overflow style!

By simply adding an overflow:hidden; to our parent element, our browser whips the parent element back into shape. The best way to explain why this is happening is to say that with the overflow rule, our browser re-thinks how this element should look and is more mindful about children elements who are floating.

So to conclude, collapsed elements due to floating children = overflow:hidden; to parent element for fix.

Example of the fix (Notice overflow:hidden; location):

#parent {
margin:auto;
width:900px;
border:2px #000 solid;
overflow:hidden; /*THE FIX*/
}
#parent #left {
width:100px;
float:left;
}
#parent #right{
width:800px;
float:right;
}

#parent #left,
#parent #right {display:inline;}

• IE7, IE8,
• FireFox,
• Safari
• Opera

This pure CSS menu with infinite sub menus technique only uses 10 CSS rules making it EXTREMELY light weight. This technique also overcomes some funky IE bugs such as Ghost Hovers and Z-Indexing issues via pure CSS.

 

Preview the example:

Lets Begin shall we? Start by creating a new html document and use the following code to make this lesson go smoother for everyone.

xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Devin R. Olsen - Pure CSS Menu Infinite Sub Menus</title>
</head>

<body>
</body>

In the body of our newly created document lets setup an unordered list with some list items like so.

<ul id="nav">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>

We start by giving our top-level un-ordered element an id of “nav” so we have some sort of unique identifier to reference to with our CSS. Next lets copy the whole thing and nest a second list into any of our first level list items and change its ID to a CLASS like so:

<ul id="nav">
    <li>Menu 1
        <ul class="nav">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
        <ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>

That’s it for the HTML portion, just note that top-level list menu gets an id called “nav” while all nested sub menus get a class called “nav”. You can continue to nest as many menus you like in the same manner from here on out to meet your css menu desires.

Lets move onto the CSS portion. In the header of our document lets create some style tags that will house all our menus CSS like so:

<style type="text/css">

</style>

We will start with our most important reset and structure styles for our menu. First lets point to our #nav, .nav and #nav .nav li elements and reset their margin’s and padding’s to zero like so:

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }

This is done to remove any default browser margin’s and padding’s automatically applied to these element types. Next lets point directly to our first level list items and give them some structure / style like so:

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;}

Our menu will be of horizontal so we set the first level list items to a float of left and a display of inline. We also give the list items a list-style of none to remove browser default bullet points next to each list item. Last we give our list items a position of relative in order to prevent any child elements who may be positioned absolute from breaking out of the flow of design. The rest of the styles are of visual preference and up to the developer to change however they desire.

Next we must have some way to identify our top-level sub menus to from all the rest. We do this to give visual guidance on how our first level sub menu is displayed against our top-level menu. To do this we must include a new class to our first level sub menus ONLY, called “first” like so:

<ul id="nav">
    <li>Menu 1
        <ul class="nav first">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
        <ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>

Again this is only for our “FIRST LEVEL SUB MENUS” that we apply this new “first” class to and not any of the rest of our further nested menus. Next lets point to these first level sub menus and set some structure rules via CSS like so:

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;}
#nav li ul.first {left:-1px; top:100%;}

We give our first level sub menu’s a top percentage of 100 to make it fall directly below our top-level menu. Because our list items have a 1px border we give our first level menu items a left style that is negative 1 to assure our first sub menu’s fall completely to the left when being displayed.

Next lets start giving our elements some style rules. First we will point to all our list items and anchor links that any list item may carry like so:

li, li a {color:#000;}

Here we have set our list items and anchor tags any list item may carry to have a text color of black or rather #000. Next we will point to all our sub menu list items ONLY and give some structure and styles like so:

li, li a {color:#000;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}

Note how we first pass through the #nav element before calling .nav li vs. just stating .nav li? This is important as its a fix to helps us over come some spacing issues due to our list item borders. The first style we give here is a width of 100% to insure our list items will completely span across its parents set width. The rest of the styles are up to the developer to change to however they like.

Next lets give some structure to our list item’s anchor elements like so:

li, li a {color:#000;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}

We first point to all our list items and then search for all anchor tags, then we give each anchor tag a display of block and an inherited width and height from its own parent element.

Next lets begin adding our menus behavior styles such has hover and when to display a sub menu and when not to display a sub menu. This part is really where the magic happens and our ability to have a pure CSS menu with infinite sub menus come into play.

First we need to give our sub menus a rule to hide them self’s from view until told otherwise like so:

ul.nav { display:none; }

We add an extra measure of security here when dealing with the display none style by stating “ONLY un-ordered list elements who have a class of “nav” must by default be a display of none”.

Next we will set our behavior color styles for list items and list item anchor tags like so:

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }

We first point to all our list items that are under a hover state, as well as all list item’s anchor tags while the list item is under a hover state. Then we set a text color of white or rather #fff and a background of black or rather #000. These styles are for the developer to change to their desired look and feel.

Next we must create a rule to display our sub menus when its parent list item is under a hovered state like so:

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; }

Here we are stating that all list items that are under a state of hovered who have a child element with the class of .nav (our sub menu) must be displayed. By using the CSS child selector (>) we are also stating that only the first proceeding child sub menu must be displayed while all the rest remain hidden.

Next lets talk about how we fix yet another IE bug. This one is called the “IE:Hover Ghost Bug” and in its basics it leaves deeply nested sub menus in a state of constant display after being hovered. To fix this bug we simply look at our last style as a igniting point. By giving style and structure to our sub menus when told to be displayed, vs. having a constant rule that is always giving style and structure to our element at all times, we squash the IE bug. So we add the following styles to our last rule like so:

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid;}

The position absolute is crucial to allowing our sub menus to be positioned relatively to its parents location on the page. We also set a pre-defined width to our sub menus of 200px as well as offset the menu by top -2px (due to borders width) and by left 50% of its parent element. Last and most important style we give to our sub menus is a z-index of 1000 to make sure everything layers or rather sorts correctly.

Last thing we need to do is squash yet another IE bug that deals width z-index and properly sorting elements or rather layers. To do this we simple state that all sub menu’s parent elements (list items) must have a higher z-index value than the sub menu elements like so:

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid;}
li:hover { position:relative; z-index:2000; }

Pssst.. That’s it folks, that’s all the CSS you need to have a fully compleated Pure CSS Menu with infinite amounts of sub menus, enjoy!

Completed CSS Code:

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;}
#nav li ul.first {left:-1px; top:100%;}

li, li a {color:#000; text-decoration:none;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid;
border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid; }
li:hover { position:relative; z-index:2000; }

Preview the example.

Thanks Everyone.
Devin R. Olsen

Example:

How to Build jQuery Lava Lamp Menu Tabs from Devin R. Olsen on Vimeo.

This effect is called “animated rounded menu tabs”. It’s a neat little effect that will work in all browsers including IE6+. somethings to note is that this technique uses a single image for its four corners and is stretchy in both width and height!

We are also using the jQuery JS lib to ensure our JS works across all browsers but also to cut down on the amount of JS we uses to make this great effect. Here is the link I use in the video tutorial to use the jQuery lib from Google’s online repository.

http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

The Video Tutorial:

Here is the full source if you want to just get down to studying the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Devin R. Olsen - Lava Lamp Menu Tabs</title>
<style type="text/css">
#nav {width:500px;  background:#333; margin:0px; padding:0px 0px 0px 20px; color:#fff; position:relative;}
#nav li {float:left; display:inline; list-style:none; line-height:35px; position:relative; z-index:3;}
#nav li a { padding:0px 10px 0px; cursor:pointer; font-size:12px; display:inline; color:#fff;}

#nav li.rounder { position:absolute; left:0px; top:0px; margin:0px; padding:0px; display:none; z-index:2;}
#nav li.rounder img {position:absolute;}
.cornersWrap {position:relative; height:25px; width:auto; margin-top:5px; background:#fff;}

#nav, #nav li, #nav li a, #nav li.rounder {height:35px;}

#tl,#tr,#bl,#br {position:absolute; width:8px; height:8px; overflow:hidden;}

#tr,#tl {top:0px;}
#br,#bl {bottom:0px;}

#tr,#br {right:0px;}
#tl,#bl {left:0px;}

#tr img,#br img {left:-8px;}
#bl img,#br img {top:-8px;}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#nav li a").mouseover(function(){

		$("#nav li a").each(function(count){
			$(this).css({color:"#fff"});
		});

		$(this).css({color:"#000"});

		var offL =  $(this).offset().left - $("#nav").offset().left;
		var offW = $(this).width() + parseInt($(this).css("paddingLeft")) * 2;

		$("li.rounder").stop().animate({left:offL+"px", width:offW+"px"},295,function(){

			//IE6 1px Fix
			var trOff = $("#tr").offset().left + parseInt($("#tr").css("width"));
			var wrapWOff = $(".rounder").offset().left + parseInt($(".rounder").css("width"));

			var brOff = $("#br").offset().top + parseInt($("#br").css("height"));
			var wrapHOff = $(".cornersWrap").offset().top + parseInt($(".cornersWrap").css("height"));					

			if(wrapWOff > trOff){
				$("#tr,#br").attr("class","rFix");
			}	

			$(".rFix").css({right:"-1px"});

			if(wrapHOff > brOff){
				$("#br,#bl").attr("class","bFix");
			}
			$(".bFix").css({bottom:"-1px"});
		});
	});
});
</script>
</head>

<body>
	<div>
    	<ul id="nav">
        	<li><a href="#">Short</a></li>
            <li><a href="#">Longer</a></li>
            <li><a href="#">Kinda Long</a></li>
            <li><a href="#">Kinda Longer</a></li>
            <li><a href="#">Really Longer</a></li>
            <li><a href="#">A Really Lot Longer</a></li>
            <li class="rounder">
            	<div class="cornersWrap">
                    <div id="tl"><img src="http://www.devinrolsen.com/wp-content/themes/dolsen/images/rounder.gif" /></div>
                    <div id="tr"><img src="http://www.devinrolsen.com/wp-content/themes/dolsen/images/rounder.gif" /></div>
                    <div id="bl"><img src="http://www.devinrolsen.com/wp-content/themes/dolsen/images/rounder.gif" /></div>
                    <div id="br"><img src="http://www.devinrolsen.com/wp-content/themes/dolsen/images/rounder.gif" /></div>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

IE6 has an issue with the z-index and being able to properly sort these layers correctly. As stated from www.quirksmode.org:

“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly”

So whats a person to do when they run into this z-index issue and IE6? Simple really its about identifying root elements to your document, here let me explain with some HTML and CSS.

#boxWrap {width:200px; height:200px; border:1px #000 dashed; position:relative;}
#layer1,#layer2{ width:150px; height:150px; }

#layer1 {
left:375px;
top:80px;
background:#000;
z-index:2;
position:absolute;
}

#layer2 {
left:285px;
top:-50px;
border:1px #fff solid;
background:#666;
z-index:1;
position:relative;
}

And the HTML:

<body>
<div id="boxWrap">
<div id="layer1"></div>
</div>

<div id="layer2"></div>
</body>

In the above HTML you will see that we have two elements at root level of the documents body. We have the “boxWrap1″ and the “layer2″ div elements. Both elements are positioned relative, however “boxWrap1″ has a nested elements called “layer1″.

The div elements “layer1″ is positioned absolute and has a z-index of 2. Both “layer1″ and “layer2″ make use of their left and top style rules to position themselves over each other. The “layer2″ elements also has a z-index rule that is of 1. If “layer1″ has a z-index of 2 and “layer2″ has a z-index of 1, then in all browsers this is what you should see.

However in IE6 this is what you get!

This is the classic IE6 Z-Index bug right here for you at its most basic. So how do we fix this little issue? Simple really first look to the element who is positioned absolute and has the highest z-index, in our case its “layer1″.

Next you must locate the absolute ROOT parent of the element that is positioned absolute and has the highest z-index in our case its “boxWrap”.

Last but not least give your root parent element or rather “boxWrap” a z-index that is higher than your positioned absolute element “layer1″.

The objective was to make our z-index:2; element be sorted over our z-index:1; element so by going to our root element of the highest z-index element and giving it an even higher z-index:3; fixes this issue.

Note: You don’t have to give your root element and position styles just a simply higher z-index will fix the issue. Also note that the lower z-index element does not have to be root with documents body for this bug killer to work.

Enjoy,

Devin R. Olsen

To start lets create our menus container block and give it an id of “navigation”:

<div id="navigation">
</div>

Next we will add our first level menu items:

<div id="navigation">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

After that, we are going to give our list items some names:

<div id="navigation">
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
        <li>FAQ</li>
        <li>News</li>
    </ul>
</div>

Great let’s see what we have so far:

Obviously it’s not going to work for us, but I think it’s important to point out the vertical fashion that is given to us by default in the ordered lists. The un-ordered list for vertical menus almost seems to be a match made in CSS heaven, vs. its sister menu the horizontal navigation menu.

So let begin to add some style to our first level un-ordered list, and its parent container “navigation”. In our header let’s create style tags that will contain all our CSS.

Our first CSS rule we want to add would be for our container:

<style type="text/css">
    #navigation {font-size:0.75em; width:150px;}
</style>

Here we are going to give our main container some structure by setting its width to 150 pixels. We also set our menu’s font size to that of 0.75em that will cascade down our entire menu.

Great, next we are going to create two new rules for our first level un-ordered list:

<style type="text/css">
    #navigation {font-size:0.75em; width:150px;}
    #navigation ul {margin:0; padding:0;}
    #navigation li {list-style: none;}
</style>

Here we are pointing to our “navigation” container first, then our first un-ordered list and assigning styles accordingly. We have removed the default margin and padding that comes default with a un-ordered list by setting both to 0 pixels. We also remove any default list style by setting list-style to none, over all our list items.

Ok, let’s see what we have so far.

Again not looking to hot right now, but we will get there. Our next step is to assign some styles to only our top level list items, by going back to our HTML markup and add a new class to our un-ordered element. While we are adding this new class, let’s also add some links to our HTML markup as well like so:

<div id="navigation">
    <ul class="top-level">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">News</a></li>
    </ul>
</div>

Now we can better target just our top level menu and its list items. With our new top-level class in place, let’s now add the following new styles:

#navigation {font-size:0.75em; width:150px;}
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;}

ul.top-level {background:#666;}
ul.top-level li {
 border-bottom: #fff solid;
 border-top: #fff solid;
 border-width: 1px;
}

Here we are pointing to our new top-level (ul element) and setting it background color to be #666 (dark gray). Next we point to our top-level ul, then its list item children and apply a border to top and bottom with a color of #fff (white) and is 1px wide.

Great, now lets target our menu’s anchor tags as well by adding the following styles:

#navigation {font-size:0.75em; width:150px;}
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;}

ul.top-level {background:#666;}
ul.top-level li {
 border-bottom: #fff solid;
 border-top: #fff solid;
 border-width: 1px;
}

#navigation a {
 color: #fff;
 cursor: pointer;
 display:block;
 height:25px;
 line-height: 25px;
 text-indent: 10px;                   
 text-decoration:none;
 width:100%;
}
#navigation a:hover{
 text-decoration:underline;
}

To begin, we set a height of 25 pixels to space out our list item’s anchors out vertically, then we make up for text placement by using the line-height that is equal to our height. We also set a text-indent to inset the text a little, text-decoration to remove underlines, color to #fff (White), cursor to pointer and set a full width of 100%.

The most important part of our new styles, is that we set a display block on our anchor tags. Without setting them to be rendered as block, our width and height are meaningless.

Our last bit of styles is for the hover state of our anchor tags. Basically once they are being hovered, we set the text-decoration back to being underline for presentational purposes.

Let’s take a look shall we.

Not too bad.

Before we move onto creating our second level sub menu, lets add some behavior to our menu shall we. Let’s give a color difference to our list items background color if we are hovering over them.

To do this we again reference to our “navigation” container first, and then all the list items in our entire menu. Once we are pointing to our menu’s list items, we append a pseudo hover selector to begin the statement for our color behavior:

#navigation {font-size:0.75em; width:150px;}
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;} 

ul.top-level {background:#666;}
ul.top-level li {
 border-bottom: #fff solid;
 border-top: #fff solid;
 border-width: 1px;
}

#navigation a {
 color: #fff;
 cursor: pointer;
 display:block;
 height:25px;
 line-height: 25px;
 text-indent: 10px;
 text-decoration:none;
 width:100%;
}
#navigation a:hover{
 text-decoration:underline;
}

#navigation li:hover {
 background: #f90;
 position: relative;
}

Here we are  giving our list items both a background-color of #F90, and setting its position to be that of “relative”. We use relative because it turns our list items into stopping points for any immediate children that have a position of absolute. We also get the position of relative to our list items here at the hover state, in order to fix IE related ghost bug issues.

Here is what our menu behavior should look like now:

Let’s now move into our second level un-ordered lists. We always nest our sub menus deeper within the list item we want them to be displayed under, like the following now:

<div id="navigation">
    <ul class="top-level">
        <li><a href="#">Home</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li>
            <a href="#">FAQ</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">News</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
    </ul>
</div>

Take notice at how we have nested our new un-ordered lists to our first level list items. Also notice that these new level of un-orderd lists carry a new class of “sub-level”. From here on out, all sub level menus will need to have this “sub-level” class.

Great let’s move back up to our CSS and begin to set some visual rules to these second level un-ordered lists.
To give styles to these second level un-ordered lists, simple reference them now by our new class of “sub-level” like so:

ul.sub-level {
    display: none;
}

Here we are giving our sub-level un-ordered lists a display of none. We do this so that by default, our second level un-ordered lists are hidden until told otherwise.

So now lets write the styles to expose our sub-level menus when its parent is being hoverd:

ul.sub-level {
    display: none;
}
li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
}

Starting from the parent element (li), we set a pseudo hover selector and then point to our .sub-level menus. Once any parent list item is hovered, its child sub-level menu will be set to a display of block (exposed). We also set a position absolute and finally top and left styles to positioned around our sub-level menus in their parent’s relatively.

The next thing we want to setup, is our sub-level list items styles:

ul.sub-level {
    display: none;
}
li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
}
ul.sub-level li {
    border: none;
    float:left;
    width:150px;
}

Here we are simply floating our sub-level list items to the left, and setting their width to be fixed at a 150px. We also are removing the default borders that we setup on our global list item rule near the top.

Let’s look at what we have so far:

Looking good! Now let’s create our last level un-ordered list. Like before we are going to insert a new un-ordered lists with in the list item we want to expose these third level un-ordered lists. We again are also giving this new level a class of sub-level.

Here is what our final HTML markup would look like:

<div id="navigation">
    <ul class="top-level">
        <li><a href="#">Home</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a>
                </li>
                <li><a href="#">Sub Menu Item 2</a>
                    <ul class="sub-level">
                        <li><a href="#">Sub Sub Menu Item 1</a></li>
                        <li><a href="#">Sub Sub Menu Item 2</a></li>
                        <li><a href="#">Sub Sub Menu Item 3</a></li>
                        <li><a href="#">Sub Sub Menu Item 4</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub Menu Item 3</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li>
            <a href="#">FAQ</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 3</a>
                    <ul class="sub-level">
                        <li><a href="#">Sub Sub Menu Item 1</a></li>
                        <li><a href="#">Sub Sub Menu Item 2</a></li>
                        <li><a href="#">Sub Sub Menu Item 3</a></li>
                        <li><a href="#">Sub Sub Menu Item 4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">News</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a>
                    <ul class="sub-level">
                        <li><a href="#">Sub Sub Menu Item 1</a></li>
                        <li><a href="#">Sub Sub Menu Item 2</a></li>
                        <li><a href="#">Sub Sub Menu Item 3</a></li>
                        <li><a href="#">Sub Sub Menu Item 4</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub Menu Item 2</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
    </ul>
</div>

Last few styles are for creative preference and bug squashing really:

/*Seconda Level*/
#navigation .sub-level {
    background: #999;
}

/*Third Level*/
#navigation .sub-level .sub-level {
    background: #09C;
}

Our first style is pointing to our first sub-level menus from #navigation (#navigaiton ul ul) and setting its background to #999 (light gray). The second style is pointing to our second sub-level menus also from #navigation and setting its background to #09c(light blue). This shows you how to specifically target different levels of nested menus and style them accordingly if you desire.

The last two styles are to help out some confused browsers (IE6+) about what to do with third level menus, while hovering a top level menu item.

You can more or less consider this to be a nice reset to kick them browsers back into shape:

/*RESET STYLES*/
li:hover .sub-level .sub-level {
	display:none;
}
.sub-level li:hover .sub-level {
	display:block;
}

Let’s break down these reset selectors. The first states, “When a list item is being hovered, find the closest nested .sub-level menu. If that closest nested sub-level menu also has a nested .sub-level menu, hide it’s nested sub-level menu from view.” We do this so that only one sub-level menu is exposed at a time while its parent list item is being hovered.

Nest we reverse the role to make up for our first reset condition. This second selector is saying “If you are with in a sub-level menu item, and you hover over a list item that indeed has a nested sub-level menu, expose it’s sub-level menu.”

Lets see what we have now! You can click the figure (image) below to preview the tutorial example:

Click Here for Tutorial's Working Example:

If you need this to work in IE6, please refer to this tutorial here. http://www.devinrolsen.com/fix-css-pseudo-hover/

That’s it everyone, you have just created a pure CSS vertical menu with sub level pop outs that is completely cross browser friendly.

Thanks everyone.

Devin R. Olsen

Tables were never meant to be a websites layout backbone as IE and Microsoft FrontPage have been advocating for years. Today however most developers know to stay away from tables unless to display data in an actual table format and now stick to XHTML and block elements such as division boxes (<div></div>).

The problem that arises is that even though the use of CSS and block elements actually gives us the developers a more dynamic and cleaner way for working with complex layout structures it lacks some of the essentials in creating what we consider to be a standard layout in the ideals of web design. One of these paradoxes is the three column layout and our understanding of how this layout should act according to how we all have grown with the web. If you think about what you would consider a three column layout to be and how it should function you might come up with the following:

• Any column height determines the overall height of the layout.
• Fluid layout and wont break under browser font size changes.
• Column colors and center cell color can differ.
• Column colors and center cell color can extend to the full height of the layout.

Seems simple enough, but in fact many great minds have been trying to accomplish the best approach to meet these four simple requirements or more with use of XHTML and CSS for years were a table three column layout can already achieve this. I myself have been spending a great amount of time trying to come up with the most compliant and cross browser friendly method that achieves the above requirements for a three column layout. My first attempts were to try to study what is already out there and see what ground has been broken in this three column layout battle and I found lots of creative yet very similar method out there that even got me distracted from what might be accomplished is you simply would think outside of the box.

Everything I had found tackled the three column layout and above requirements by doing what we have been taught for years now about proper block element design and that is something call the box model method that says we must nest elements to properly apply padding, margin and height styles. So it was no wonder that I too got sucked into this approach to accomplish the perfect three column layout. What I found that if you simple stop and rethink maybe even give and take a little you can accomplish this three column layout but do so while making it completely cross browser friendly and less than 10 lines of CSS.

Yes you read right I did say that I have accomplished this most sought after layout with less than 10 lines of CSS code. So with the little history lesson out-of-the-way and our full understanding as to why were are even sitting here talking about this layout we can begin to get started with this tutorial.

In this tutorial I am going to show you how to create the perfect three column layout. This three column layout is designed under the common screen resolution of (1024×768) and meets all of our above requirements while again under 10 lines of CSS code! Let’s get started by first creating our html structure for our three column layout.

<div id="main">
    <div id="wrapper">
        <div id="header" class="caps">
        </div>

        <div class="column">
            <div>
            </div>
        </div>

        <div class="center">
            <div>
            </div>
        </div>

        <div class="column">
            <div>
            </div>
        </div>

        <div id="footer" class="caps">
        </div>
    </div>
</div>

Ok so far this is a great structure to create a three column layout. We have our header and our footer boxes not always a must but give our layout that desired look we are after. Next we have our two left and right columns and in the center of the two we have our center column. Each column has a nested div box in order for us to add padding to our columns and the content they will hold.

Ok now let’s move on to our CSS portion of this tutorial.

body{}
#main{}
#wrapper{}
#header{}
#footer{}

.column{}
.center{}

.caps{}
.column div, .center div {}

Let us break down the first five CSS rules.

body {text-align:center; background-color:#ccc;}
#main{margin-left:auto; margin-right:auto; width:980px;}
#wrapper{float:left;}
#header{height:90px; border-bottom:#ccc solid; border-width:1px;}
#footer{height:30px; border-top:#ccc solid; border-width:1px;}

Our first rule is pointing directly to our documents body tag and has a text align of center and a background color of light gray. I set our body’s tag to have a text align of center for IE5 browser to center our proceeding child elements to the pages over all width and I gave our body a background color to contrast our three column layout once it’s finished.

Our next rule is named #main that has two margin rules (margin-left and margin-right) both of which are set to auto. We also give a set width of 980px to our #main rule. We set its margins to auto in order to align it to the center of our pages over all width and give it a width of 980px for a safe real state under a 1024×768 standard screen resolutions.

Next is our rule named #wrapper and it has a float rule of left to properly float any child elements nested within it that also carry a float rule.

Our last two rules (#header & #footer) are for our header and footer elements that are self-explanatory and of user preference.

Moving on lets look at our next two CSS class rules.

.column{width:165px; float:left;}
.center{width:650px; float:left;}

Our first class rule is .column and is a rule for both our left and right columns and has a width of 165px and another float set to a left in order to properly float all our columns next to each other rather than over each other.

Our next class rule is .center and is for our center column. This class rule also has a width and float rule but this time I use the remaining width of our 980px to fill up with our center column. (980 -165 -165 = 650)

And last but not least our last two CSS class rules.

.caps{width:980px; float:left; background-color:#FFF;}
.column div, .center div {padding:15px}

Ok so our first class rule here is .caps and is used in our header and footer elements. I call it caps but because visually it’s like a soda can, our header and footer elements cap both the top and bottom of our three column layout. This rule “.caps” has a width of 980px to span our fully allowed width and again a float left rule to properly stack header and footer over and under their sibling elements.

Now our last CSS class rule points to our left and right columns child div element .column div as well as our center columns child div element .center div. This rule gives all column children div elements a padding style of 15px around all sides to space out content within each column.

Great now we have a complete understanding of our HTML structure and our CSS rules it’s time to point out what makes this approach so different from the others. Remember our requirements?

• Any column height determines the overall height of the layout.
• Fluid layout and wont break under browser font size changes.
• Column colors and center cell color can differ.
• Column colors and center cell color can extend to the full height of the layout.

Ok right now as this tutorial stands we have successfully completed 3 out of the 4 requirements for our three column layout. The only one that is not yet fulfilled is the last requirement.

“Column colors and center cell color can extend to the full height of the layout.”

If I was to go in to our column classes and play around with our columns background colors we indeed are in control of each of our columns color. The problem is however once you begin to add content to anyone of the columns you soon realize that the colors of each column do not extend to the full height of the layout when extending the layouts height manually with content in any one of the columns.

The solution to our last requirement is not one of pure CSS, CSS hacks, box model padding and margin tricks. What I suggest is a background image to define all three columns and colors that can span the full height of our #wrapper CSS rule. In Photoshop I have created an image that has a width of 980px (our respected real state for a standard screen resolution) and a height of 500px. I then divide up the image in to our three column sizes (left=165px center=650px right=165px) and added a drop shadow to my left and right sides that points in over my center column like so.

Next change the canvas size of this image to be that of only 1px so our browser only has to load a tiny strip of our background image and with the use of CSS we will tell our browsers to repeat the image vertically for us. By making our image only 1px tall it makes our background load nearly at 1 second down all the way to a 14.4 dial up modem so no poor loading times should result from this method.

Now in Photoshop save the image for web and make it a gif image and name it whatever you like. My background image has drop shadows that consume up to 9 shades of gray so I tell my save for web dialog to only utilize up to 9 colors for my background gif. The color utilization for you and your own background color will vary so please take note of this.

Our last step is to go back to our #wrapper CSS rule and add our new background image and repeat it vertically.

#wrapper{float:left; background:url(images/standard.gif) top left repeat-y;}

See how we have added a background rule (not a background-image rule) this rule supports images, alignment and repeat styles. URL is the location of the image relative to our document and top left is how I want to position the image in my elements background while repeat-y repeats the image in a y-axis (vertically).

That’s it folks, we have successfully created a fully cross browser friendly three column layout in under 10 lines of CSS code.

CONCLUSION
Some may say that this is not the best way to accomplish this three column layout with our above requirements while at the same time will point to far more complex and long-winded CSS rules to accomplish the same three column layout. Some of these complex methods to the three column layout consist of hacks to make them cross browser friendly or simply do not support all browsers. This is simply a method I like to use for the convenience of it and light weight / simplicity of the structure and CSS.

VIEW WORKING EXAMPLE NOW

Thanks I hope this helps a few other there.
Devin R. Olsen

!important is basically giving importance to a style over all other browsers except IE6 and below. IE6 and below can’t recognize it, therefore skips over our style and hunts for another of its kind. Again because we are giving our style importance, all other browser will do the opposite and only read our important style and skip over any others.

So let’s say we want all browsers except IE6 and below to give an element a width of 500 pixels, but in IE6 and below we want this same element to have a width of say 502 pixels. We would simply use the !important helper as follows:

#element {width:500px !important; width:502px;}

Simple as that folks, now everyone in browsers who are IE6 and above equivalence will see this element at a width of 500 pixels while IE6 and below will receive our 502 pixels.

That was painless right?

Devin R. Olsen

Why rounded corners ?

Well like most web design fads it’s a more dynamic and appealing way to server your site’s content up to the user.

Are rounded corners necessary?

Absolutely not, but hey back in the beginning of web development neither was a lot of things such as background colors HAHA.

Is this the only way to make rounded corners?

No and I doubt its even the best way, it’s just my technique I like to use. You can find hundreds of other rounded corner tutorials out on the net.

(Note: In time this technique will be obsolete due to CSS3 and the ability to create rounded corners with purely CSS. You can use CSS3 techniques today, but unfortunately a few well used (but not so much liked) browsers do not support CSS3 yet.)

Let’s start off with our blank document.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rounded Corners Tutorial</title>
</head>

<body>
</body>
</html>

Now let’s create our html structure of our content box and its four corners. I’m going to use a combination of a div box and an un-ordered list because its easier to maintain in an actual html document..

Place the following inside your body tags.

<div class="cell">
    <ul>
        <li class="tl corner"></li>
        <li class="tr corner"></li>

         <li class="bl corner"></li>
         <li class="br corner"></li>
      </ul>
</div>

Now let’s create a few CSS classes for our content cell and its four corners. We use classes because the potential of us having multiple boxes with rounded corners is high.

In our documents header tags add the following.

<style type="text/css">
.cell{}

.cell ul{}

.cell li{}
</style>

We now have three classes in our styles (.cell, .cell ul and .cell li). Let’s break down each rule so we can get a good idea of whats going to happen with these classes down the line.

.cell {} is the class for our main div box container that will hold not only our content, but also our four corners.

.cell ul {} is using our first class, to then point to any un-ordered lists we have nested inside “.cell“.

.cell li {} is like the “.cell ul” in the manor that it too uses “.cell” to point to any un-ordered lists we have nested. However, “.cell li” is specifically pointing to all list items within an un-ordered list that resides in our “.cell” div box.

Let’s now start adding styles to our classes by making your CSS look like the following:

.cell{
position:relative;
padding:21px;
background-color:#f8c771;
float:left;
display:inline;
}

.cell ul{
margin:0px;
padding:0px;
}

.cell li{
list-style:none;
}

In our “.cell” class you can see that we have created a background-color, and a padding of 21px. I use a padding of 21px because in this tutorial we are going to create some fat rounded corners that are 20px in radius so we use 21px to give us extra 5px padding from our boxes edges and corners. We also use the odd number 21 instead of 20 because some versions of IE mess up upon to great of a font size change resulting in a 1px border on some corners.

We have a background-color property here that is set to my desired color. You may change this background color to whatever you like.

I have also placed a position:relative; property in our “.cell” class cause we are going to be using a position of absolute for our four corners.

Finlay we have a float:left; and display: inline;. (For IE users that don’t set a desired width this is important because with our floating our “.cell” get messed up in versions of IE5 and IE6. As a good practice always include display of inline when floating an element.)

“.cell ul” has set it’s margin / padding set to 0px in order to remove any default browser behavior of spacing. The “.cell li“ has list-style:none;, and it also remove any default browser behavior (list item bullet points).

Next we are going to create classes for our four corners by adding the following to our CSS.

.tl{}

.tr{}

.bl{}

.br{}

These classes stand for top left(.tl), top right(.tr), bottom left(.bl) and bottom right(.br). Because we are going to be positioning each of these as relatively absolute to our “.cell” div box, we need to specify their positions.

Add the following property’s to each of these classes.

.tl
{top:0px; left:0px; background:url(images/corners.jpg) top left no-repeat;}

.tr
{top:0px; right:0px; background:url(images/corners.jpg) top right no-repeat;}

.bl
{bottom:0px; left:0px; background:url(images/corners.jpg) bottom left no-repeat;}

.br
{bottom:0px; right:0px; background:url(images/corners.jpg) bottom right no-repeat;}

Ok here you can see we have a top and either left or right property for the top corners. For the bottom corners we use a bottom and either a left or right property and again, all these are doing is positioning our corners inside our content box.

Now you might have noticed, we are also using a background property for each of these corners. The background property is calling an image I created in Photoshop that we are positioning to the inside of our four corners.

Because this is not a Photoshop tutorial, I will just show you the image we are using so you may get a clear idea as to why I have positioned the image.

Here is the image that makes our rounded corners.

HEY THAT’S NOT A CORNER!

Indeed, it’s not, but to save time and memory it’s wise to make a single image that is a circle and is twice, let me repeat that, “TWICE” the size of our desired corners.

In this tutorial our corner radius is 20px, we therefore make our circle image 40px wide and 40px tall.

Ok remember how I told you we are going to position our corners to be absolute within our container div box? We need to make one more CSS class that will make each of our corners position absolute.

Add the following rule and property’s to your CSS.

.corner
{width:20px; height:20px; position:absolute; z-index:1;}

With this class we are setting each of our corners to have both a width and height of 20px, position to be absolute and have a z-index of 1. Z-index is a way to tell the browser to make our corners priority number one when it comes to a rendering hierarchy. So with z-index:1; our rendering hierarchy will go corners->content->container box.

Let’s take a look at our results.

Hmm looks like a long tube of some sorts. Let’s add some dummy content to it in order to see if our box is stretchy and won’t break if we increase our browsers font size.

Make your HTML look like the following.

<div class="cell">
    <ul>
        <li class="tl corner"></li>
        <li class="tr corner"></li>
        <li>
Nihil eligendi intellegebat et sit, et sit assum aperiam utroque. Augue debitis in sit,
duo an eros saepe saepe ">timeam. Reque erant efficiendi ad vix, nobis saepe mucius no mel. Cu pro diam
probo ne ">convenire, duo ad senserit scripserit philosophia. Admodum commune convenire vix ne, sed
eu tota omnis inani. Odio impetus laoreet usu an, cu tamquam lucilius urbanitas duo, an postea
platonem dissentiet mel.

Qui porro aliquip placerat ei, te eum dicam habemus senserit. Usu an esse saepe efficiantur,
sea at debitis platonem adversarium, in salutatus consequat vix. Altera blandit suscipiantur
ius eu, autem iriure scripserit vix ut, eam ex apeirian postulant. Vis atqui aperiri fuisset ad,
eam te adolescens interesset. Erat iusto propriae pri id, ea sed veri scripta imperdiet.

In quo dicit invidunt intellegam, his vidisse moderatius instructior at, mel dolores consetetur
complectitur eu. Enim utinam voluptatum ad est, no eam iusto integre suscipiantur. Sea cu noster
expetendis suscipiantur, ea mea kasd vidisse patrioque. Tantas feugait suscipit per ad, an quas
soluta latine mei. Iudico discere comprehensam an vix, magna scripserit cu usu, quo eu lucilius
patrioque. Offendit lobortis mea cu, no has essent dolorum molestiae.

His autem verear dolores ex, dolor veniam temporibus eu eos, in amet kasd magna qui.
Mazim equidem adipisci mel an, ea quidam omnium deseruisse est, usu debet facilis abhorreant ex.
Est ea ubique qualisque definitionem, ex ignota commune molestie his, ei est civibus accusam.
An usu dicta praesent partiendo, usu autem persius no, adolescens efficiendi appellantur qui ex.
com cu unum putent ornatus, vel dico nusquam et.
		</li>
        <li class="bl corner"></li>
        <li class="br corner"></li>
    </ul>
</div>

All content needs to go in between our top corners and our bottom corners and be wrapped in its own list item tag (<li> </li>) in order for it to work correctly with Microsoft IE.

Here is our final results (Click image to see demo).

Awesome couldn’t ask for more!!

A light box is web slang for a way to divide and present such things to your viewers as pictures in a gallery or special site notices. Today I wanted to quickly show you how to create a pure CSS light box. Lets start with our light box structure.
Create a new document and add the following:

<div class="onLight">
    On
        <div class="offLight">Off</div>
        <div class="lightBox"></div>
        <div class="content">

        </div>
</div>

Here we have a few nested div boxes that make up the structure of our light box. Each division box (div) has a specific class.

We have four elements with the following classes.

onLight
offLight
lightBox
content

[onLight] Any text directly within the onLight class is displayed as the element that turns on the actual light box so this could be anything from pictures to text or whatever.

[offLight]Anything in the offLight class is what displays as our button to turn off our light box so even this could be images or content.

[lightBox]Light Box class is purely for structure and style, so always add your light box content within the class “content”.

Ok I hope I didn’t lose any of you out there I just really wanted to break down the structure so we may get a clear understanding of our CSS that performs all the function behind our pure CSS light box.
With that done let’s move onto our light box’s CSS.

First add the following to the head of your document.

.onLight {}
.offLight {}
.lightBox {}
.content {}

Ok let’s break down each rule and their functions before we move onto the style properties that they encompass. We have the following important css rules:

.onLight {}
This is the rule that makes up our light box trigger structure.

.offLight{}
This is the rule that makes up our light box kill structure.

.lightBox{}
This is the rule that makes up our light box background and canvas area.

.content{}

This is the rule that makes up our light box’s content area.
Ok now that we have our basic CSS rules let start to populate them with the important style properties and make this light box work.

Make these onLight and offLight classes look like the following:

.onLight {padding:2px; width:20px; background:#999; border:#333 solid; border-width:1px;}

.offLight {
    padding:2px;
    z-index:200;
    width:20px;
    background:#999;
    border:#333 solid;
    border-width:1px;
    position:absolute;
    top:535px;
    right:310px;
    display:none;
}

Our onLight class has styles that help for the purposes of this tutorial make our onLight look like a button. So every style property in this class can be completely customizable to your needs.

Next we have our offLight and it too has a majority of styles that meant to make it look like a button. The only very important styles here that we must focus on are the z-index, display and position styles. we use a position of absolute to position our offLite element anywhere we would like around the actual light box its self.
We also use a z-index of 200 to make sure its order of rendering hierarchy is high enough to be visible when our light box is active. our last is the display style and its set to none in order to make sure our offLight is not visible until told so.

Ok lets move onto the last two class and their css styles.

.lightBox {
    width:100%;
    height:100%;
    float:left;
    position:absolute;
    z-index:100;
    background-color:#999999;
    top:0px; left:0px; right:0px; display:none;
    opacity: .80; /*FOR ALL OTHER BROWSERS AND DEVICES*/
    filter: alpha(opacity=80); /*FOR IE7*/
}

.content {
    width: 600px;
    height: 440px;
    border: solid 2px #fff;
    background: #ccc;
    margin-top: 20px auto;
    position:absolute;
    z-index:200;
    top: 30px;
    display:none;
    padding:20px;
}

Ok there is a lot to break down here so I am only going to cover the important styles and leave the rest up to you the developer to decide.

.lightBox is set to a width of a 100% and a height of a 100% to take up the whole pages dimensions to create our light box’s background or rather canvas. we in conjunction of width and height also use a position of absolute to break our light box out of our structured flow to help not destroy our overall structure when the light box is active. We also have a z-index of 100 to again give set the order of our rendering hierarchy to be high enough that its layered over our document.

Ok the lightBox rule also has two important rules that are for an opacity CSS feature that makes our light box canvas or rather background transparent. We have to declare our opacity twice, one for IE and another for all other browser. I have my settings set to 80% opaque. There are also additional top and left styles that position our lightBox to start in the upper left hand corner of our document and then proceed onto height and width of a 100%;

.content again most of these are set to my preference here for this tutorial so I will only cover the most vital styles. We set a position of absolute and z-index to our content rule to again position and layered the content box above all other layers. Display is set to none to hide the content element from viewers until told otherwise.

Ok we have just a few more rules that involve some in dept talking in order to give our light box proper functionality. So add these rules to our CSS now.

.onLight:hover div, .offLight {display:block;}
.offLight:hover + .lightBox {display:none;}

Our first new rule uses a CSS2 hover pseudo class to control the visibility of our light box upon user interaction with our .onLight and .offLight elements.
Basically we point to our .onLight element and state if its being hovered to locate our .offLight element and turn it’s display none to display block.

Next we are not only using a pseudo hover class but an adjacent sibling selector. We are first pointing to our
.onLight element and state that if we hover over it to locate its previous or next sibling element “.offLight” and turn its display to none.

So think of these last two rules as the on and off functions for our pure CSS light box.

We have one final css rule we must add to help with some browser issues and our height of a 100% in our .lightBox.

Add this last rule to our style.

html,body{height:100%;}

With this last rule we set both our html document and its body tag to be a height of a 100%. Once you do this any immediately nested element will to be able to use a height of 100%.

NOTE: THIS PURE CSS LIGHT BOX IS ONLY CSS2 COMPATIBLE THEREFOR WORKS ONLY ON IE7+ FF1.0 – 3.0 AND SAFARI. THIS MEANS THIS METHOD OF LIGHT BOX WILL NOT WORK WITH IE5.5 OR EVEN IE6 WITHOUT THE USE OF JAVASCRIPT.

BECAUSE WE RELY ON THE CSS2 SELECTOR, NOT EVEN A PSEUDO HOVER FIX FOR IE5 AND IE6 WILL FIX THIS METHOD.

VIEW WORKING EXAMPLE OF OUR PURE CSS LIGHT BOX NOW

Thanks I hope this helps a few other there.
Devin R. Olsen