What is AWS?

Amazon Web Services is a set of web services provided by Amazon.com free of charge. Basically, you can query Amazon’s vast database of information to obtain product details, reviews, images, and just about any other information you can imagine related to any product sold at Amazon.com. In this example, we’re specifically looking at Amazon’s REST web services, which is data that can be retrieved via a unique URL request to the AWS servers. If your web project involves any product-related data, AWS is definitely worth a look. Enriching your existing pages with information retrieved through AWS can augment the utility of your content, making it more useful for your users, and ultimately more important to everyone. If you’re the entrepreneurial type, you can also make commission by letting your users click through to Amazon.com in an attempt to sell their products. It’s win-win for everyone.

How it Works

Getting information from AWS is easy. First of all, you’ll have to set up an AWS account and also sign up for the Amazon Associates program. After signing up for these two programs, you should have all the information you need to make a web services request from your application.

In a nutshell, you make a request that includes things like the product type, query type, and keywords that you’re searching for. All of this information is bundled into a tidy URL structure that allows you to make flexible requests from just about any development platform out there. Once you’ve made a request, what you get back is an XML document that contains the product information you’re interested in.

The Request URL

Generating a request URL is actually more complex than I thought it would be. There are a number of elements that are required in the URL, and some elements even need to be encrypted and escaped in a very specific order. After digging through some blog posts and AWS documentation, I came up with this very handy PHP function that generates an AWS request URL in a fairly easy and configurable fashion.

<?
function awsRequest($searchIndex, $keywords, $responseGroup = false, $operation = "ItemSearch", $pageNumber = 1){
	$service_url = "http://ecs.amazonaws.com/onca/xml?Service=AWSECommerceService";
	$associate_tag = "your-associate-tag";
	$secret_key = "YOUR_SECRET_KEY";
	$access_key = "YOUR_ACCESS_KEY";

	// build initial request uri
	$request = "$service_url&Operation=$operation&AssociateTag=$associate_tag&SearchIndex=$searchIndex&Keywords=".urlencode($keywords)."&ItemPage=$pageNumber";

	// parse request into params
	$uri_elements = parse_url($request);
	$request = $uri_elements['query'];
	parse_str($request, $parameters);

	// add new params
	$parameters['Timestamp'] = gmdate("Y-m-d\TH:i:s\Z");
	$parameters['Version'] = $version;
	$parameters['AWSAccessKeyId'] = $access_key;
	if($responseGroup){
		$parameters['ResponseGroup'] = $responseGroup;
	}
	ksort($parameters);

	// encode params and values
	foreach($parameters as $parameter => $value){
		$parameter = str_replace("%7E", "~", rawurlencode($parameter));
		$value = str_replace("%7E", "~", rawurlencode($value));
		$request_array[] = $parameter . '=' . $value;
	}
	$new_request = implode('&', $request_array);

	// make it happen
	$signature_string = "GET\n{$uri_elements['host']}\n{$uri_elements['path']}\n{$new_request}";
	$signature = urlencode(base64_encode(hash_hmac('sha256', $signature_string, $secret_key, true)));

	// return signed request uri
	return "http://{$uri_elements['host']}{$uri_elements['path']}?{$new_request}&Signature={$signature}";
}
?>

What Now?

Now that you’ve added this function to your PHP application, you’re probably wondering, “What now?” This PHP function merely generates a signed URL by which you can make requests to the AWS web service. Now that this function is in place, you can actually call the web services like so:

// make the request
$xml = simplexml_load_file(awsRequest("VideoGames", "call of duty", "Images", "ItemSearch", "1"));

// now retrieve some data
$totalPages = $xml->Items->TotalPages;
echo "<p>There are $totalPages pages in the XML results.</p>";

// retrieve data in a loop
echo "<ul>\n";
foreach($xml->Items->Item as $item){
	echo "<li>".$item->ASIN."</li>\n";
}
echo "</ul>\n";

The resulting output should show the total number of pages as well as an unordered list that contains the ASIN (Amazon’s unique item number) for each product that was returned in our result set. In our request function, we requested image-related data from Amazon’s VideoGame database using the keywords call of duty. We also requested results starting at page 1 of the result set.

Go Deeper

Not sure where to go from here? I highly recommend utilizing the fantastic (and free) Firefox add-on, HttpFox. If you’re making AJAX requests through AWS, you can use HttpFox to monitor the entire XML structure sent back. In my experience, the hardest part working with AWS is figuring out what type of information you want and sorting out their very complex XML structure. Be sure to utilize the AWS developer API as well, as it gives you pivotal information regarding query parameters and data set information to help you fine-tune your requests. I’m currently using the web services to import box art and screenshot images for about 12,000 video games in my database. This process has been made much easier through the use of AWS, and I’m happy to share my revelations with anyone who’s interested.

Good luck, and please let me know if this helps you in any way.

The CSS Style

There are two elements you’ll have to implement into your design in order to create a lightbox — CSS and Javascript. We’ll take care of the CSS style first, as it’s the most simple to implement. On your page or in an attached style sheet, add the following CSS styles:

#lightbox {
	position: absolute;
	top: 0;
	left: 50%;
	width: 500px;
	margin-left: -250px;
	background: #fff;
	z-index: 1001;
	display: none;
}
#lightbox-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
	z-index: 1000;
	display: none;
}

What we just did: we established two styles. One style is for the lightbox that actually appears on the page (#lightbox). The second style is for lightbox background (#lightbox-shadow). We have made this background dark and semi-transparent in order to dim the site’s content as it appears behind the lightbox.

The jQuery Script

The real work is done via our simple jQuery script. We have two JavaScript functions that will handle displaying and hiding our lightbox. First, make sure you have attached the jQuery library to your page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Now, in an attached .js file, add the following script code.

/****************************************
	Barebones Lightbox Template
	by Kyle Schaeffer
	kyleschaeffer.com
	* requires jQuery
****************************************/

// display the lightbox
function lightbox(insertContent, ajaxContentUrl){

	// add lightbox/shadow <div/>'s if not previously added
	if($('#lightbox').size() == 0){
		var theLightbox = $('<div id="lightbox"/>');
		var theShadow = $('<div id="lightbox-shadow"/>');
		$(theShadow).click(function(e){
			closeLightbox();
		});
		$('body').append(theShadow);
		$('body').append(theLightbox);
	}

	// remove any previously added content
	$('#lightbox').empty();

	// insert HTML content
	if(insertContent != null){
		$('#lightbox').append(insertContent);
	}

	// insert AJAX content
	if(ajaxContentUrl != null){
		// temporarily add a "Loading..." message in the lightbox
		$('#lightbox').append('<p class="loading">Loading...</p>');

		// request AJAX content
		$.ajax({
			type: 'GET',
			url: ajaxContentUrl,
			success:function(data){
				// remove "Loading..." message and append AJAX content
				$('#lightbox').empty();
				$('#lightbox').append(data);
			},
			error:function(){
				alert('AJAX Failure!');
			}
		});
	}

	// move the lightbox to the current window top + 100px
	$('#lightbox').css('top', $(window).scrollTop() + 100 + 'px');

	// display the lightbox
	$('#lightbox').show();
	$('#lightbox-shadow').show();

}

// close the lightbox
function closeLightbox(){

	// hide lightbox and shadow <div/>'s
	$('#lightbox').hide();
	$('#lightbox-shadow').hide();

	// remove contents of lightbox in case a video or other content is actively playing
	$('#lightbox').empty();
}

Ready for Lightboxing

Once you have the CSS and script into place, you can call your new lightbox(); function from anywhere within your design. It’s as easy as calling the lightbox from an anchor tag:

<a href="javascript:lightbox('Hello!');">Show me the lightbox</a>

Remember, clicking anywhere on the “shadow” <div/> will hide the lightbox — you could easily add a “close” button to your lightbox by connecting it to the closeLightbox(); JavaScript function.

Similarly, you can insert HTML (or even a jQuery DOM object) into the lightbox. Like so:

<a href="javascript:lightbox('<p><strong>Rich</strong> content works too!</p>');">Show me the lightbox</a>

Finally, you can even use this simple lightbox function to insert AJAX content. Please keep in mind that my JavaScript function simply inserts the entire result into the #lightbox element — if you’re trying to request a website or HTML page, you’ll probably have to remove the <html/> and <body/> tags before inserting content into your lightbox window, else the lightbox would simply disappear. An AJAX lightbox request looks a little like this:

<a href="javascript:lightbox(null, 'http://foo.com/readme.txt');">Show me the lightbox</a>

The Demo

• Try it out: Show me the lightbox
• Let’s load some AJAX content: Load the CSS file for this tutorial into a lightbox

If you’re on a fast connection, you may not notice, but the AJAX link actually reads “Loading…” in the lightbox a split-second before the content actually appears. This can be useful to give users feedback while the AJAX request is processing. Please note that I’ve added a bit of styling to my demo (namely padding on the lightbox to make it appear less cluttered).

Make it Shine

You’ll probably want to modify the CSS and other elements of this lightbox in order to suit your site’s design and style. If you’re working with a lot of AJAX content, you may want to even replace the temporary loading element with an animated spinner image, or something of the like.

To help you get started, you can download the CSS and JavaScript referenced in this tutorial here:

• lightbox.css
• lightbox.js

Good luck, and happy styling!

For the (better) browsers…

It’s easy to add corners to your design in most browsers. In a previous post, I talked about the different ways to apply CSS corners within your design. Here’s what I used for this particular client.

.corners {
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}
.noTL {
	-moz-border-radius-topleft: 0;
	-webkit-border-top-left-radius: 0;
}
.noTR {
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
}
.noBL {
	-moz-border-radius-bottomleft: 0;
	-webkit-border-bottom-left-radius: 0;
}
.noBR {
	-moz-border-radius-bottomright: 0;
	-webkit-border-bottom-right-radius: 0;
}

This made it extremely easy to add corners to the elements in my design. In most cases, I could simply add <div class="myDivClass corners"/>, and the CSS does the rest. If I don’t want a rounded edge on a particular corner, I can just add noTR, noBL, etc. to my class list. Easy.

For the other (not-so-better) browser…

Disclaimer: this really doesn’t do anything entirely too amazing. It’s not auto-magically generating corner images, and it’s not inserting a ton of HTML to simulate corner images (I just hate when scripts do that). This is a script I have been using for a while to add corners for IE users; basically, it builds a custom image path for each style of widget in your design marked with the corners CSS class. For each corners widget that my script finds, it will trace up through your HTML until it finds a parent element with a background-color. It then creates four <div/> tags inside your widget and positions them at the outer corners of the widget. The background-image for these <div/> tags is set to something like corners-12-ffffff.png or corners-12-ffaa10-border (if your widget has a border-width associated with it). The 12 is the radius of your corner, and ffffff is the background color that appears behind your widget. You’ll have to create the images yourself (and put them in the right place), but my script will handle inserting the HTML and CSS in the right place. If you create the images a little like this, then you’ll find that your IE corners will be in place in no time at all.

It’s certainly not ground-breaking stuff, but it makes it very easy to reduce the overhead in your design for most users. In addition, the script is fairly small, and you’ll find it’s really not much overhead for IE users as well. Here’s how to add it to your site:

1. You’ll need jQuery 1.3.2 or later linked to your page
2. Add the CSS (above) to your style sheet. This takes care of everyone except for IE.
3. Create a new JavaScript file with the following contents:

   /*******************************************
   
   	IE Corner Inserts v1.0
   
   	by Kyle Schaeffer
   
   http://www.kyleschaeffer.com
   
   	* requires jQuery 1.3.2 or later
   
   *******************************************/
   
   // change this path to match the path to your corner image files
   var cornerImagePathPrefix = '/designImages/';
   
   // default file extension for corner images is PNG
   var cornerImageFileExtension = '.png';
   
   // default corner radius
   var cornerRadius = '12';
   
   $(document).ready(function(){
   	$('.corners').each(function(i){
   		var parentDiv = $(this).parent();
   		var cornerColor = null;
   
   		// find parent background color (trace up through DOM)
   		while(cornerColor == null && parentDiv != null){
   			if($(parentDiv).css('background-color') != 'transparent'){
   				cornerColor = $(parentDiv).css('background-color');
   				cornerColor = cornerColor.substr(1);
   			}
   			else if($(parentDiv).hasClass('bodyWrapper')){
   				cornerColor = '6f98ae';
   			}
   			else{
   				parentDiv = $(parentDiv).parent().get(0);
   			}
   		}
   
   		// apply corner <div/> tags to elements
   		if(cornerColor != null){
   			// find border offsets
   			var offsetTop = parseInt($(this).css('border-top-width')) || 0;
   			var offsetRight = parseInt($(this).css('border-right-width')) || 0;
   			var offsetBottom = parseInt($(this).css('border-bottom-width')) || 0;
   			var offsetLeft = parseInt($(this).css('border-left-width')) || 0;
   
   			// add "-border" to any image path (for border-only corners)
   			var borderImageText = '';
   			if(offsetTop > 0 && offsetRight > 0 && offsetBottom > 0 && offsetLeft > 0){
   				borderImageText = '-border';
   			}
   
   			// change color values like "#fff" to "#ffffff"
   			if(cornerColor.length == 3){
   				cornerColor += cornerColor;
   			}
   
   			// set position to relative (if not already set)
   			if($(this).css('position') != 'absolute' && $(this).css('position') != 'relative'){
   				$(this).css('position','relative');
   			}
   
   			// corner image filename
   			var cornerImage = 'corners-' + cornerRadius + '-' + cornerColor + borderImageText + cornerImageFileExtension;
   
   			// add corners
   			if(!$(this).hasClass('noTL')){
   				var cornerDiv = $('<div style="position: absolute; height: ' + cornerRadius + 'px; width: ' + cornerRadius + 'px; background: url(' + cornerImagePathPrefix + cornerImage + ') top left no-repeat;"/>');
   				$(cornerDiv).css('top',(offsetTop * -1) + 'px');
   				$(cornerDiv).css('left',(offsetLeft * -1) + 'px');
   				$(this).append(cornerDiv);
   			}
   			if(!$(this).hasClass('noTR')){
   				var cornerDiv = $('<div style="position: absolute; height: ' + cornerRadius + 'px; width: ' + cornerRadius + 'px; background: url(' + cornerImagePathPrefix + cornerImage + ') top right no-repeat;"/>');
   				$(cornerDiv).css('top',(offsetTop * -1) + 'px');
   				$(cornerDiv).css('right',(offsetRight * -1) + 'px');
   				$(this).append(cornerDiv);
   			}
   			if(!$(this).hasClass('noBL')){
   				var cornerDiv = $('<div style="position: absolute; height: ' + cornerRadius + 'px; width: ' + cornerRadius + 'px; background: url(' + cornerImagePathPrefix + cornerImage + ') bottom left no-repeat;"/>');
   				$(cornerDiv).css('bottom',(offsetBottom * -1) + 'px');
   				$(cornerDiv).css('left',(offsetLeft * -1) + 'px');
   				$(this).append(cornerDiv);
   			}
   			if(!$(this).hasClass('noBR')){
   				var cornerDiv = $('<div style="position: absolute; height: ' + cornerRadius + 'px; width: ' + cornerRadius + 'px; background: url(' + cornerImagePathPrefix + cornerImage + ') bottom right no-repeat;"/>');
   				$(cornerDiv).css('bottom',(offsetBottom * -1) + 'px');
   				$(cornerDiv).css('right',(offsetRight * -1) + 'px');
   				$(this).append(cornerDiv);
   			}
   		}
   	});
   });
   
   String.prototype.endsWith = function(str){
   	return(this.match(str+"$")==str);
   }

4. Take a look at the configuration variables near the top of the script and update if needed
5. Link to your new JS file, but make sure only IE users are loading the file:

   <!--[if lte IE 8]>
   	<script type="text/javascript" src="/path/to/IE-Corner-Inserts.js"></script>
   <![endif]-->

6. Create your corner images and place them in the correct path on your web server. I recently made available a corner images Photoshop template if you need help getting started.

That’s it! If all goes well, you should hopefully see image-based rounded corners in Internet Explorer, as well as the more simplistic CSS-powered corners in all other browsers.

The Idea

First of all, I will say that this approach only really works if you know the maximum size of your comment data. On ThumbSticks.com, for instance, users can’t enter comments that are over 300 characters in length, so I have a good idea of how large each comment box could possibly get. Rather than splicing my comment box into multiple images (which is more flexible, but decreases page performance and increases download times), I decided to create a single image that is used to wrap each comment chat bubble:

The Image

Basically, my chat bubble boxes can shrink to any size, but they can’t grow beyond the height of this image. If you know exactly how large your data can get, this is a really simple solution to implement. All that I need to show my chat bubbles is a bit of HTML and CSS.

The Nitty-Gritty

HTML:

<div class="bubble">
	<div class="bubbleHeader"></div>
	<div class="bubbleInner">
		<p>Lorem ipsum dolor sit amet.</p>
	</div>
</div>

CSS:

.bubble {
	width: 477px;
	background: url('/path/to/commentBg.png') no-repeat;
	background-position: 100% 100%;
}
.bubbleHeader {
	height: 20px;
	background: url('/path/to/commentBg.png') no-repeat;
	background-position: 100% 0;
}
.bubbleInner {
	padding: 0 20px 10px 37px;
}

Make sure you change “/path/to/comment.Bg.png” to reflect the actual path to the background image you’re using. Once you’ve dropped this into your design, you should see something that looks a little like this.

Good luck, and happy styling!

What is absolute positioning?

Absolute positioning can be frustrating if you don’t have a sound grasp on what it is and how it works. Let’s start at the very beginning.

Every block element on a page (<div/>, <table/>, <p/>, etc.) has a CSS property called position. By default, the position for these block elements is set to static. Static block elements appear in a stack on the page, from top to bottom. Here’s an example:

<div>Div One</div>
<div>Div Two</div>
<div>Div Three</div>

If you change an element’s position to absolute, however, its placement on the page is very different. The placement for an absolutely positioned element is relative to the parent of that element. What does that mean? Let’s see what happens if we take the same code from our last example and make our block elements position: absolute.

<div style="position: absolute;">Div One</div>
<div style="position: absolute;">Div Two</div>
<div style="position: absolute;">Div Three</div>

The outcome is very different! You can’t tell, but the first and second <div/> tags are actually hiding behind the third <div/> tag. Whenever you set an element’s position to absolute, it is automatically shown at the top-left corner of the parent element (* see notes about relativity below). This isn’t very useful now, but we can apply this technique to create a variety of simple and effective layout styles.

Positioning

Our last example wasn’t very practical simply because all of our <div/> tags were stacked on top of each other. Using the top, bottom, left, and right properties, we can position absolute elements anywhere we’d like. Let’s try it out.

<div style="position: absolute; top: 10px; left: 10px;">Div One</div>
<div style="position: absolute; top: 10px; right: 10px;">Div Two</div>
<div style="position: absolute; bottom: 1em; left: 50%;">Div Three</div>

Now that’s a little more practical. The first and second <div/> tags are positioned using pixels from the top, left, and right sides of their parent element (the gray box). I positioned the third <div/> tag a little differently just to demonstrate how you can use all the different measurement units that CSS has to offer in order to position absolute elements (px, pt, em, and %).

Relativity

The most difficult and confusing aspect of absolutely positioned elements is figuring out relative positioning. Unless you specify otherwise, your absolute <div/> tags will be positioned relative to your entire HTML document (i.e. the very top left corner of your browser window). Basically, when your browser is trying to render an absolutely positioned element, it traces upward through your HTML hierarchy until it finds a parent element that uses relative positioning (position: relative). If you haven’t set any elements to position: relative, then the <body> tag is used by default. Always set the outer element to position: relative:

<div style="position: relative;">
	<div style="position: absolute; top: 1em; right: 1em;">Contact Us / Register / Log Out</div>
</div>

Relative Parent Height

If you place an absolutely positioned element on a page, it does not have a layout height associated with it. That means that even though your absolute DIV is 150 pixels tall, it will not bump the rest of your page down by 150 pixels. Here’s an example:

<div style="position: relative;">
	<div style="position: absolute; height: 2em;">Div One</div>
</div>

The easiest way to avoid this is to set the parent element’s height to a fixed value. This should clear up any layout height issues because you’ll always have space for your absolute elements. For instance:

<div style="position: relative; height: 3em;">
	<div style="position: absolute; height: 2em;">Div One</div>
</div>

Absolute vs. Floating

Absolute positioning shouldn’t be used in every case. Often times, I will use it to build out a header on a page where there is a logo, search, some utility links, etc. These types of controls are pretty consistent and don’t change in size, and absolute positioning comes in quite handy. There are, however, some disadvantages to using absolute positioning. Most importantly, absolutely positioned elements don’t appears as part of the normal layout flow in your document. They have a fixed position, which often confines them to a fixed width or height. If you can’t predict the size or consistency of the content in a particular page element (for instance, a page content area where article text appears), then absolute positioning is probably not the best option.

As an alternative, you can use CSS floating to create very fluid and flexible layouts without absolute positioning. See my previous article about tableless column design to learn more about floating elements in your design.

The Image

The biggest difference between a traditional JavaScript image hover and a pure CSS image hover is the image, itself. When using CSS to achieve this effect, the static image and the hover image are actually contained within the same image file. Basically, we’re displaying the image and cropping it so that only one image state is displayed at one time. In order to do this, we’ll omit the <img> tag and display the image as a the background-image of an <a/> (anchor) tag instead.

Let’s look at an image that could be used as a CSS hover image.

Simplistic Markup

As you can see, both static and hover images are contained within the same file. In order to display only half of the image at one time, we’ll apply it as a background color to an HTML block element. Here is the HTML for this example:

<a class="myButtonLink" href="#LinkURL">Leaf</a>

The CSS

As you can see, the HTML is extremely simple. We’re doing everything in CSS, so this is where the real magic happens:

.myButtonLink {
	display: block;
	width: 100px;
	height: 100px;
	background: url('/path/to/myImage.png') bottom;
	text-indent: -99999px;
}
.myButtonLink:hover {
	background-position: 0 0;
}

We’re using the CSS psuedo-element hover to apply the mouseover image effect. When your mouse pointer moves over the “myButtonLink” element, our CSS slides the background image (using the background-position property) appropriately, giving us our mouseover image. This is simple, fast, and efficient! You’ll use less files and space on your server, clients will have to download less data, and older computers will render your content much faster.

The Result

Move your mouse over the image to see the hover in action.

Leaf

And there you have it, a pure CSS approach to image hovers. You can apply this method to links, <div/> tags, and just about anything else you can imagine in your site’s design. Happy styling!

When I use the term “DHTML,” I am referring to “Dynamic HTML.” This is an endearing term that many web designers use to describe the fusion of HTML with other web technologies, such as JavaScript and CSS. By using various technologies in tandem, we can create dynamic controls that allow website visitors to interact with content directly on the page without the need to refresh the site with every subsequent click.

The HTML

As you will soon see, the tab strip is a prime example of a DHTML control. Before we delve into every aspect of the tab strip, let’s first start with the HTML:

<div class="tabStrip">
	<ul>
		<li><a href="javascript:openTab(1);" class="tabLinkActive" id="tabLink1">TabOne</a></li>
		<li><a href="javascript:openTab(2);" class="tabLink" id="tabLink2">TabTwo</a></li>
		<li><a href="javascript:openTab(3);" class="tabLink" id="tabLink3">TabThree</a></li>
	</ul>
</div>
<div class="tabContentActive" id="tabContent1">
	This is sample tab content (1).
</div>
<div class="tabContent" id="tabContent2">
	This is sample tab content (2).
</div>
<div class="tabContent" id="tabContent3">
	This is sample tab content (3).
</div>

The HTML is relatively simple. We are using an unordered list (<ul/>) for our tabs, and we are using <div/> tags for our tab content. As you can see, I am giving a unique id attribute to each tab link and to each tab content <div/>. This is important, as we’ll need unique id‘s in order to access these elements with JavaScript.

The JavaScript

We are using only one small JavaScript function for the tab control. Here is the code:

<script type="text/javascript" language="javascript">
	var activeTab = 1;
	function openTab(tabId) {
		// reset old tab and content
		document.getElementById("tabLink"+activeTab).className = "tabLink";
		document.getElementById("tabContent"+activeTab).className = "tabContent";
		// set new tab and content
		document.getElementById("tabLink"+tabId).className = "tabLinkActive";
		document.getElementById("tabContent"+tabId).className = "tabContentActive";
		activeTab = tabId;
	}
</script>

The CSS:

This CSS is a very basic example of what you can do to style your tabs. You can add colors, gradients, and background images to give the control even more design flare.

.tabStrip ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.tabStrip li {
	margin: 0 2px 0 0;
	list-style-type: none;
	float: left;
}
.tabLink {
	display: block;
	text-decoration: none;
	padding: 5px;
	background: #e8e8e8;
	border: #dadada solid;
	border-width: 1px 1px 0 1px;
	color: #8a8a8a;
}
.tabLinkActive {
	display: block;
	text-decoration: none;
	padding: 5px;
	background: #e0e0e0;
	border: #c0c0c0 solid;
	border-width: 1px 1px 0 1px;
	color: #0066ff;
}
.tabContent {
	display: none;
}
.tabContentActive {
	display: block;
	clear: both;
	background: #f0f0f0;
	border: 1px #dedede solid;
	padding: 10px;
}

The Result:

In true DHTML fashion, we have combined HTML, JavaScript, and CSS to create a fully dynamic user control that can appear anywhere on the web. I have taken the fundamentals learned in this tutorial and have created a more visually appealing example of this code. Click on the image below to see the demo.

Note that the demo also utilizes Karate Corners to create rounded edges on the tabs. Learn more about Karate corners here.

Vertical Menus

Vertical menus are the easiest list-based menus to create; basically all you have to do is hide the bullets and padding for your list using CSS. In the example below, we have a very simple two-level vertical navigation menu.

The HTML:

<ul class="navigation">
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://www.yahoo.com">Yahoo!</a>
        <ul>
            <li><a href="http://www.yahoo.com/shopping">Yahoo! Shopping</a></li>
            <li><a href="http://www.yahoo.com/sports">Yahoo! Sports</a></li>
            <li><a href="http://www.yahoo.com/weather">Yahoo! Weather</a></li>
        </ul>
    </li>
    <li><a href="http://www.amazon.com">Amazon</a></li>
    <li><a href="http://www.ebay.com">eBay</a></li>
</ul>

The CSS:

ul.navigation,
ul.navigation ul {
	margin: 0;
}
ul.navigation li {
	list-style-type: none;
	padding: 0 0 0 20px;
}

The Result:

Horizontal Menus

Horizontal menus are slightly more complex than the vertical variety, but they aren’t so far removed. As you can see in the example below, the HTML remains largely the same; we’ll modify the CSS to allow the navigation list items to appear in left-to-right orientation.

The HTML:

<ul class="navigation">
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://www.yahoo.com">Yahoo!</a></li>
    <li><a href="http://www.amazon.com">Amazon</a></li>
    <li><a href="http://www.ebay.com">eBay</a></li>
</ul>

The CSS:

ul.navigation,
ul.navigation ul {
	margin: 0;
}
ul.navigation li {
	list-style-type: none;
	float: left;
}

The Result:

The basic structure (as shown in the examples above) can be used for your site menus, but you’ll undoubtedly want to add some style and color to match the design of your site. Here are a few examples to get you started and to perhaps give you some ideas of your own.

Vertical Navigation

Click on the image below to see the demo. On the demo page, right-click and view source to see the code.

Horizontal Navigation

Click on the image below to see the demo. On the demo page, right-click and view source to see the code.

As you can see, we’re using CSS to add rollover effects and sub-menu background colors. You can add images and other navigation elements to take your design even further.

But…why?

Why do we go through all the trouble of creating table-less designs? In short, the answer is performance. At times, it may feel easier to simply drop in a table tag and quickly split your design into columns, but that’s not always the best option. Tables create a large amount of extraneous HTML that can make your pages slower for visitors to download. While it may not seem like a huge difference at first, when designing a template for a very large site, the difference can be astounding.

CSS that is defined in externally linked files is cached on client computers, meaning that anything you put in your external CSS files is downloaded only once. Once that CSS file is downloaded, it is quickly loaded on subsequent page visits, which is faster for your visitor and easier on your web server.

Why is this important? Stay with me, we’re getting there!

Generally, the content in your site changes as visitors browse from page to page, but the overall design remains the same. It is much easier (and faster) to store this persistent design information in cached files, such as images and CSS.

In a table-less column design, almost all design information is stored in cached CSS files. A design that uses tables, on the other hand, often includes some of this information directly in the HTML, forcing users to download the HTML on every page in the site. Whenever possible, site design should be done in CSS rather than in HTML; for this reason, table-less designs are the modern preferred standard in web design.

Floating Columns

The float attribute in CSS is very powerful. So powerful, in fact, that many people seem to shy away from using it. Don’t be afraid! A bad float can ruin any good design, but using them when appropriate will alleviate your HTML-table woes.

The HTML:

<div class="columns">
    <div class="left">
        <p><strong>This is left-hand content.</strong></p>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="right">
        <p><strong>This is right-hand content.</strong></p>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="bottom"></div>
</div>

The CSS:

.left {
	width: 60%;
	float: left;
	padding: 0 2% 0 0;
}
.right {
	width: 35%;
	float: left;
	padding: 0 0 0 2%;
}
.bottom {
	clear: both;
}

The Result:

Advantages:

Fluid width – allows for dynamic width (resizing)
Fluid height – matches the height of the tallest column, allowing for fully dynamic height of all columns

Disadvantages:

Floating – if you are using fixed-width columns, and if the content in a column is too wide, your columns will word-wrap within your design and stack on top of each other
Variable column height – background colors or images applied to columns will not match in height

Absolute Columns

In many cases, the floating column design does the trick quite amiably. If, however, for some reason you find yourself in a situation where you are using a fixed-width design, and you really can’t control the width of content in your site, floating columns can become a nightmare. There’s nothing worse than seeing your left-hand column disappear from your layout, only to be re-positioned at the bottom of your page! If that’s the case, you may consider using the absolutely-positioned column design.

The HTML:

<div class="columns">
    <div class="left">
        <p><strong>This is left-hand content.</strong></p>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="right">
        <p><strong>This is right-hand content.</strong></p>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

The CSS:

.columns {
	position: relative;
}
.left {
	width: 60%;
	margin: 0 35% 0 0;
	padding: 0 2% 0 0;
}
.right {
	position: absolute;
	top: 0;
	right: 0;
	width: 35%;
	padding: 0 0 0 2%;
}

The Result:

Advantages:

Fluid width – allows for dynamic width (resizing)
No floating – consistent even when content is too wide to display

Disadvantages:

Minimum height – the absolutely-positioned column must always be shorter in height than the fluid column(s), else it will display on top of design elements below
Variable column height – background colors or images applied to columns will not match in height

Concerning “variable column height.”

I would like to point out that “variable column height” is listed as a disadvantage of each method. The main disadvantage in using table-less CSS column designs is that when you have two elements side-by-side, they won’t necessarily match in height. If your design requires two shaded columns to match in height, this table-less approach may not be your best option. In general, it’s best to create designs that don’t require this type of approach from the get-go. Many people try to compensate for this lack of height-matching by using repeating background images that make it appear as if the columns match in height, but I have never been a fan of adding images to do something that HTML and CSS could handle otherwise.

When all else fails…

The only time I use a table in HTML is to (1) display tabular data or (2) when I absolutely need to have two height-matching elements display side-by-side in a design. Some fanatical CSS enthusiasts would argue that this is a lame approach, but in some cases designers need to act on simple pragmatism.

If you’re in a situation where you need to use a table, please do not use extraneous HTML. The cellpadding and cellspacing attributes are not needed! You can do everything with CSS. It goes something like this:

The HTML:

<table class="columns">
    <tr>
        <td class="left">
            <p><strong>This is left-hand content.</strong></p>
            <p>Lorem ipsum dolor sit amet.</p>
        </td>
        <td class="right">
            <p><strong>This is right-hand content.</strong></p>
            <p>Lorem ipsum dolor sit amet.</p>
        </td>
    </tr>
</table>

The CSS:

.columns {
	width: 100%;
	border-collapse: collapse;
}
.left {
	width: 60%;
	padding: 0;
	vertical-align: top;
}
.right {
	width: 40%;
	padding: 0;
	vertical-align: top;
}

The Result:

It may still be a table, but it’s a minimal table if I ever saw one.

Good luck, and happy styling.

Update: Read my subsequent post for a more advanced example of this technique!
Update: Read a even more advanced version of this technique in an even newer tutorial!
Update: Find out how to automatically generate the HTML and CSS for this technique using jQuery.

I took the best of the best and came up with a very simple way to create totally scalable boxes with round corners. I’ve tested this on Internet Explorer 6, IE 7, Mozilla FireFox 2, Firefox 3, Opera 9, and Safari 3.

The Code

The HTML code is relatively simple. You have an outer <div> tag with four “corner” <div>s inside of it. Each of these corner <div>s are positioned with CSS so that they always appear at each corner of the outer <div> box.

HTML:

<div class="cornerBox">
    <div class="corner TL"></div>
    <div class="corner TR"></div>
    <div class="corner BL"></div>
    <div class="corner BR"></div>
    <div class="cornerBoxInner">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

CSS:

.cornerBox {
	position: relative;
	background: #cfcfcf;
	width: 100%;
}
.corner {
	position: absolute;
	width: 10px;
	height: 10px;
	background: url('corners.gif') no-repeat;
	font-size: 0%;
}
.cornerBoxInner {
	padding: 10px;
}
.TL {
	top: 0;
	left: 0;
	background-position: 0 0;
}
.TR {
	top: 0;
	right: 0;
	background-position: -10px 0;
}
.BL {
	bottom: 0;
	left: 0;
	background-position: 0 -10px;
}
.BR {
	bottom: 0;
	right: 0;
	background-position: -10px -10px;
}

The Image

Only one image is used for this box (shown above). In my example, I created a 20×20 circle, which is comprised of four 10×10 corners. By shifting the background image around, you can eliminate the need to download four separate GIF files on each of your boxes.

The Result

Karate Corners! Click on the image above to see the HTML demo. Happy styling!