I recently created a site (in beta testing now) with Smooth Gallery and the client loved it.

The Problem:
The only issue was that upon the initial page load - all items in the gallery would flicker for a second or two while the first image loaded - causing this to not look professional at all.

The Solution:

1. HTML: I took the example code:
   PLAIN TEXT
   PHP:

   1. <div id="myGallery">
   2. <?php $featured_posts = get_posts('numberposts=5&order=DES&orderby=date&category=1');
   3. $i = 0;foreach( $featured_posts as $post ):
   4. setup_postdata($post);  $i++;?>
   5.    <div class="imageElement" id="element<?php echo $i;?>">
   6.       <h3>Item 1 Title</h3>
   7.       <p>Item 1 Description</p>
   8.       <a href="#" title="open image" class="open"></a>
   9.       <img src="images/brugges2006/1.jpg" class="full" />
   10.       <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
   11.    </div>
   12.  <?php endforeach; ?>
   13.  </div>

   I then added an ID to each div (id="element1") so that each div had a class of "imageElement" and a unique ID (element1, element2, etc).

2. CSS: Now that I had IDs to style, I added the following to my style sheet:
   PLAIN TEXT
   CSS:

   1. #element2 {display: none;}

By adding the 2 bits of code mentioned below, I was able to initially hide the content in the second div so that only the content in the first div appeared on page load. Once the script started running, it then changed the display from none to block automatically. Problem solved.

I have seen a lot of sites using the ShareThis button (including a few of mine) where the button in Safari was getting cut off (clipped) at the bottom. If this is happening to you - there is a quickfix. Add this line of CSS to your stylesheet and your button will no longer be cut off.

If you have ever wondered how to clean up WordPress URLs by removing the /category/ from your URLs, check out the plugin: Top Level Categories. After you activate it, you can access your web pages that were once only reachable by: /category/web-design/ by now using just /web-design/.

Ever wonder how to automatically highlight your tabs or navigation depending on the category, page, or post you are on? Wonder no more! To make this work, there are three bits of code you will need:

• The header code to control the body ID (and to tell us what page we are on)
• The navigation code
• The CSS to control the highlight

For this example, I will use this web site as an example.

The header code

The XHTML code (navigation)

The CSS code

General information
When you view the code for a page, you will notice that the header code will find out if the page viewed is infact a page. If it is a page, it gets the page parent (I use parent and child pages in my web site organization). The tabs are created with unique li IDs. So that a combination of #home (the body ID) and the #nav-home (li ID) will show as a highlighted tab. With this example, this case will only occur when we are on the home page because #home is a page (the home page) so the home tab will be highlighted. When we click on "SDAC Blog", the body ID will then be #blog, so now the #blog #nav-blog combination will force the "SDAC Blog" tab to be highlighted. Take a look at the CSS to see where to define the "cases".

Hopefully this took some of the mystery out of working with WordPress, navigation, and how to put everything together.

I was recently asked to recommend and comment on some good CSS practices for a client and I thought I would pass some of them.

• Use a table of contents. I always start my stylesheet(s) with a table of contents so I can easily locate particular styles in the future. I would recommend breaking your stylesheet into a few main areas like: header, main content, navigation, footer. The more sections you put in, the easier it is to read and edit at a later date.
• Use a table of contents. If you notice your stylesheet is getting out of control (over 1,000 lines) consider using multiple style sheets. You could have one master style sheet, another for forms, another for specific pages, etc. You would then either link to a stylesheet that would have links to all the styleheets using @import or you could call in the stylesheets on a page by page basis statically or dynamically.
• Start with a known, debugged code if possible. I have a library of layouts that I use when beginning a new project that I know work in multiple platforms on multiple browsers. I will be publishing these as soon as I have some free time.
• Do not rely on CSS hacks, unless it is a last resort. Believe it or not, most things can be done with CSS code that will validate. As soon as you rely on hacks, your code becomes unpredictable with new browser releases. Stick to valid code that you know will work with past and future builds of browsers. There are a lot of hacks out there which seem like a quick and easy fix, but you will pay for it down the road.

I hope this helps! CSS is a little tricky and sometimes very frustrating, but in the end...clean code is very rewarding.