While working through a code rework on an old site last week, I remembered a few CSS tricks I hadn’t had to use for a while. I thought I’d post a little refresher to share these tips that might help you out of a coding bind.

The child selector:

Let’s say you have an unordered list with an id of ‘nav’ and you only want a certain style on the top level list items. If you try to target them by using #nav li, all of the the list items, even in nested lists in that ul will be targeted. This is the perfect place for a child selector. If you use #nav > li, only the direct children (list items one level down) will be affected. Read the rest of this entry »

If you’re not familiar with jQuery, it’s an open-source JavaScript library which simplifies adding interactive functionality to your website. In this tutorial, I’ll show you how to use ThickBox, one of my favorite jQuery plugins, to create a simple, yet elegant image gallery.

First, Create the HTML page to display your gallery. My sample is just a centered div (margin: 0 auto) with two sets of thumbnails housed in their own divs. The images are floated left with some right margin applied to each. Feel free to use the code as a starting point. The styles are included in the head tag.

In Photoshop, size the thumbnails (uniform sizes work best) and create the larger images that will open when the thumbnails are clicked. I used 450px x 350px for my large images, and 200px x 142px for the thumbnail images. I applied the following style to my img tag to give the images a white border and some space between each thumbnail:

div.gallery img {

border:1px solid #fff;

float:left;

margin: 0 30px 20px 0;

display:inline;

}

You’ll need the following files for jQuery and Thickbox:

Download the current version of jQuery from jquery.com

Download the ThickBox plugin.

Download the loading animation. (right-click and save to your computer)

Download thickbox.css – the ThickBox style sheet

Now you’re ready to put it all together.

In the head of your html document, add links to the jQuery and ThickBox scripts, and link to the thickbox.css style sheet. If you want to use the following code structure, make sure you’ve placed the jquery.js and thickbox.js files in a scripts directory and the thickbox.css in your root directory:

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/thickbox.js"></script>
<link href="thickbox.css” rel="stylesheet" type="text/css" />

Place the loadingAnimation.gif file in an images directory. If you choose to rename it or place it in a different directory, be sure to update the file path in the thickbox.js file.

On each of your thumbnail anchor tags, link to the larger images and add a class of “thickbox.” The code will look like this:

<a href="images/image1_lg.jpg" class="thickbox"><img src="images/image1.jpg" width="200" height="142" alt="image 1" /></a>

If you’d like for the user to be able to navigate through a slideshow of all the images when the thickbox image opens, just add a rel="gallery" to the anchor tag. You can use any name you’d like as long as all the images have the same name. Here’s the link with the added code:

<a href="images/image3_lg.jpg" class="thickbox" rel="gallery"><img src="images/image3.jpg" width="200" height="142" alt="image 6" /></a>

You can also use thickbox to display HTML in an iFrame. Simply append the url of the html link with “TB_iframe=true&height=400&width=600″ and adjust the size as needed. The code should look like this:

<a href="text.htmlTB_iframe=true&height=400&width=600" class="thickbox">Click here</a>

See the demo for an example of ThickBox with an iframe.

That’s all there is to it! You can play with the thickbox.css styles to customize your gallery – be creative!

When I found out about Eric Meyer’s CSS Sculptor, I had to download it and test it. I was skeptical that it could really produce clean, well-formed CSS. I was happily surprised. It’s an excellent tool. The interface is very intuitive. I think anyone with a basic understanding of CSS could easily produce a full site layout with this extension. You can choose from 30 presets and several color schemes, and then customize from there. You have the ability to change id names to match your naming convention, or change width and height or padding and margin attributes. Background, text and link colors can be defined–you can even add background images and a print style sheet from within the CSS Sculptor interface. Your layouts can be saved as presets and edited as needed. Once CSS Sculptor generates the layout, you can work with it in Dreamweaver as you would any other site.

This extension can be invaluable to individual designers who need to work at a production pace; it significantly lessens initial setup time. I recreated my site design in less than 15 minutes. Larger firms could use it to standardize their layouts, saving presets that designers can share and increasing productivity. I think it really shines as a learning tool. If the comments feature is checked, the style sheet is saved with comments that explain the code. This is an excellent way for a newbie to learn to write CSS. And it validates!

My only criticism is that shorthand isn’t used as much as it should be. Other than than, I think it’s well worth the price.

While we’re on the topic of CSS, check out Sitepoint’s new online CSS Reference – http://reference.sitepoint.com/css. Finally, everything you need to know in one place. Way to go, Sitepoint!