UK london based Web Design development company

clipped by bullmarketing Sep 10, 2008

Copywriting graphics Logo design web design web hosting

Notes by bullmarketing: web design, web hosting, Copywriting, graphics, Logo design, Stationery design, SEO, Hosting support, Website recovery, web development, domain names, low cost hosting

No selection was clipped for this page. Watch how to make a clip

Take the Wheel - Drive Customers to your Website

http://www.teamcreatives.com/article01.html

clipped by maracruz Feb 12, 2008

design resources seo web world

Notes by maracruz: So you own a small business and you have made the decision to build a simple website to gain internet exposure. Or maybe you already have a website that no one visits?

Show Clip

Web Site Design company, Offers Professional Web Design and Development Services at affordable prices

http://www.wickedinnovations.com/

clipped by maracruz Jan 22, 2008

design development internet web

Notes by maracruz: Review web design

No selection was clipped for this page. Watch how to make a clip

How to Get Rounded Corners, Gradients, Drop Shadows and More Using CSS

http://www.designvitality.com/blog/2007/09/css-...

clipped by raddevon Oct 07, 2007

css webdesign webdev

Show Clip

7 Clutch Free Tools For Budding Web 2.0 Developers and Designers

http://www.aclevercookie.com/7-clutch-free-tool...

clipped by raddevon Sep 13, 2007

webdesign

Show Clip

7 Clutch Free Tools For Budding Web 2.0 Developers and Designers

TOPICS Style, Programming, Technology

This is the follow-up to my post entitled 10 Tips for Budding Web Programmers and Designers.

As a developer, you must consider yourself a man/woman of his/her trade. The best blacksmith, tailor, hairdresser, woodworker, they all prize the tools of their trade. In your trade, you will become very fond of your tools and take great care of them. The beauty of this industry is that many of the tools are free and open source. I don’t need to give up my tool for you to be able to benefit from it — all I need to do is share it with you.

What is Web 2.0?

A very overused and misconstrued phrase. In this article, I use the phrase in the sense that you probably understood it as: a website with good looks and slick interface.

The real definition is “…a perceived second generation of web-based communities and hosted services — such as social-networking sites, wikis and folksonomies — which aim to facilitate collaboration and sharing between users.”

While this definition remains true, shiny logos, AJAX, and animations are still given the Web 2.0 stigma.

1. jQuery - Change the way you write Javascript

If you want a fancy interface, this is the tool for you. jQuery is releasing something called jQuery UI on Sunday, September 16th. It will consist of lots of prebuilt animations and functions, similar to Scriptaculous (which you should never use on a real production site).

Not only does jQuery make Javascript fun to write, it makes Javascript easy. What used to be tedious, is now one line of code. I personally have created effects that normally would take me 10-20 lines of code in one line.

With jQuery, you can have minimal Javascript experience and still handle the DOM like a pro. I use jQuery for everything now, and rarely to I find the need to use raw javascript.

Example:

Click here if you want to see something cool

I’m glad that you clicked.

Code:

$(’#jq_example’).fadeIn({complete:function() { $(this).animate({left:100})}});

The code basically says: Fade in the element with id jq_example, then when that is complete, move it left 100 pixels.

Yes, it’s that easy. Yes, other things are just as easy.

Useful jQuery Resources

Visual jQuery - A good way to quickly look up a function and it’s syntax. Though it’s starting to get seriously out of date and I hope they update soon.
jQuery API Browser - More detailed look at the jQuery API’s functions. Also becoming outdated.
jQuery.com Documentation - More up to date, made by the developers.

Go to jQuery’s Homepage »

2. Dean Edward’s Packer - Compress your Javascript

Another must have in terms of Javascript. With Dean Edward’s Packer, you can compress your Javascript and reduce the size of your file by up to 70%. Add some server-side gzipping and your files will be tiny. The advantage that this brings you is a faster loading site. Even though most of your visitors will be on high speed connections, saving kilobytes here and there makes a difference.

All you need to do is copy and paste your Javascript code, click “Pack”, and copy the ‘packed’ code back into your file. It would be wise to keep your uncompressed code in a seperate file, use that to develop, then use the compressed version for live use.

For example, I keep two files:

somefile_uc.js (uncompressed)

somefile.js (compressed)

Go to Dean Edward’s Packer »

3. sIFR Text - Dynamic headers using any font you want

One of the major things holes in web design today is the lack of font types. You are limited to a handful of fonts, yet if you want to show someone your vision, you have to load your site with graphics, which can lead to increased bandwidth usage. You also spend more time in photoshop than you do actually producing content.

The solution: sIFR Text

All that is involved is one small flash file per font, a little Javascript, and a little CSS. The result, text that is still picked up by search engines, but looks how you want it to look. It also allows a user to copy and paste the text to and from their clipboard. It’s just as dynamic as regular text minus the restriction of type face.

Go to sIFR Text’s Website »

4. Wellstyled.com’s Color Scheme Generator

With this tool you can pick a base color and find the contrast, complement, triad, tetrad, and analogic colors of it. You can then cycle through different variations: Pastel, Dark Pastel, Light Pastel, Contrast, or Pale. You can also share schemes with your friends or colleagues via a URL. This tool clearly shows us and reminds us that the spectrum of color is mathematical. A great tool for people who are just starting to get an eye for color.

See your color scheme as those with vision disorders do

You can see how each color scheme will appear to people with different vision disorders:

Go to Wellstyled.com’s Color Scheme Generator »

5. Lightbox - Next generation unobtrusive pop-ups

To see it in action, visit their homepage.

Setting it up is as simple as this:

Include lightbox.js in your header.

<script type=”text/javascript” src=”lightbox.js”></script>
Add rel="lightbox" attribute to any link tag to activate the lightbox. For example:

<a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1</a>

Optional: Use the title attribute if you want to show a caption.

6. Firefox Extensions - Change the way you tweak and debug

This will be redundant for those who read my previous article, but these are in fact very important tools, so I will reiterate.

Web Developer Extension by Chris Pederick

This extension has many useful tools, though most of them have been trumped by FireBug (which I will talk about next), some are still useful. Features include:

Resize the browser window

Quickly and easily resize the browser to 800×600, 1024×768, or any other size you want. This tool helps you see how your site looks from your visitors’ point of view. Check Google Analytics and see which resolution is the most popular. Design for that one. Firebug does not have this tool.
Edit CSS/HTML without refreshing

This tool is useful for writing free-form CSS without having to refresh the page, something that is not as easy in Firebug. As you edit your CSS and HTML you will see the changes instantly. This is a major time saver.
View all Javascript loaded on the page

For those of you that have Javascript code or are trying to see someone else’s Javascript, you can view all the JS code that your browser has loaded on a single page. (Firebug shows you all the JS files, but you can’t search through all of them at once like in this extension)
View generated source

This is an excellent trool if you have portions of your pages loaded by AJAX or via Javascript. Regular view source won’t show you the HTML that is dynamically generated. (Firebug will also show you dynamically generated code. You can actually see it on the fly.)

Firebug Extension by Joe Hewitt

Often at the office we ask the question, “Remember life before Firebug?”. This extension has changed my life. Here are some of the major pros of this extension:

Inspect the DOM (Document Object Model)

Click ‘Inspect’ and hover over elements of the DOM to see where that element is in the HTML code and what CSS styles it has.
Live CSS editing showing style inheritence

This is money. This will save you literally hours in layout design. For example, you can select a DIV and then tweak it’s margin by selecting the margin property in Firebug and pressing up and down to tweak it pixel by pixel. Page up and down to change by 10 pixels. You can also add new properties to current styles. Once you have made your changes, highlight the CSS and copy and paste it back into your actual file.
Detailed Javascript debugging

The Javascript console is slightly better here than in plain Firefox. It gives you more details and is a fine replacement for the default console.
See all files being loaded and total size of your webpage

This is so key for optimizing your website’s load time. You can see how long each individual file associated to your webpage took to load. Images, Javascript files, AJAX calls. At the bottom of the “Net” section of Firebug, you will see the total size of the page you just loaded.

7. Sajax - So simple, there’s no excuse not to use it

Sajax is a tool to make programming websites using the Ajax framework — also known as XMLHTTPRequest or remote scripting — as easy as possible. Sajax makes it easy to call ASP, Cold Fusion, Io, Lua, Perl, PHP, Python or Ruby functions from your webpages via JavaScript without performing a browser refresh. The toolkit does 99% of the work for you so you have no excuse to not use it.

The reason that I like Sajax the most out of all of the options is that once it’s plugged in, there is no maintenance or tedious coding to do. It’s all very transparent.

Here is an example in PHP:

<?php
function addFriend($id)
{
     if (friendAdd($id) == true)
     {
          return 1;
     }
     else
     {
          return 0;
     }
}

sajax_export('addFriend');

?>

Now, your Javascript:

function addFriend(id)
{
     x_addFriend(id, addFriend_cb);
}

function addFriend_cb(result)
{
    if( result == 1)
    {
       alert('Friend added successfully.');
    }
    else
    {
       alert('There was an error adding your friend.');
    }
}

Then, in your HTML, it’s as easy as calling the function:



<a href="javascript:;" onclick="addFriend(100);">Add to Friends</a>

Go to Sajax’s Homepage »

Web Design 101: Floats

http://www.digital-web.com/articles/web_design_...

clipped by raddevon Sep 13, 2007

webdesign

Show Clip

Web Design 101: Floats

Got something to say?

Share your comments on this topic with other web professionals

In: Columns > Web Design 101

By Virginia DeBolt

Published on September 10, 2007

As browsers get better and better, creating layouts with CSS becomes easier and easier. A reliable workhorse in CSS layout options is the float property. Floats are not the only choice when it comes to creating layouts, but they are popular because they survive the unpredictability of designing for various screen sizes, resolutions, and browsers as well—or better—than some of the other choices.

float is not a positioning property in CSS —the only position properties in CSS are absolute, relative, fixed, and static—however, when you combine widths, margins, and floats, you have CSS properties at your command that are often more reliable in terms of layouts than any of the available position properties. You can create all sorts of layout arrangements with float, whether or not float is technically a positioning property.

This article will introduce you to the basics of float, explain how to contain a float when the floated element is larger than the size of its container, and give you example layouts created with floats.

In all of the example pages, the CSS rules are in the document head—take a look at the source to see the full set of style rules used in each example. (You may notice that the examples are percentage-width layouts, but you can do the same float exercises with other relative measures such as ems, or with fixed width layouts using px units.)

What is `float`?

Floats remove elements from the normal document flow and allow text or other elements to wrap around them. A float is the CSS equivalent of what we used to do back in the days when we put HTML attributes such as align="left" or align="right" into elements. As do print designers, web designers need a way to make text flow around an element in a page layout. Floated elements are the solution.

Elements can float to the left or the right of their containers, but not to the top or bottom.

All elements can be floated: images, lists, paragraphs, divs, spans, tables, Flash movies, blockquotes, or anything else in your HTML arsenal. Example 1 shows images with and without the rule img {float: left;} applied—in a nutshell, this is basically what float makes possible. However, when you use other properties with float—we’ll get to them later in this article—you can create columns using float—and when you have columns, you can create a layout.

View Example 1

I mentioned that floats are removed from the document flow. Document flow is simply the order of the content in the document source. An HTML document is read by a browser from top to bottom in the order in which the elements are entered in the HTML source. CSS can be used to change where elements appear in the browser, but that does not change the underlying order of the elements.

To get slightly technical for a minute, a floated element is removed from the normal document flow and shifted to the left or right until its left or right edge touches the left or right edge of its containing block. Other elements that follow the floated element within that containing block then make space for it, behavior commonly described as, “wrapping around it.” The placement of the floated element within the document flow still matters, however, because the wrapping begins with whatever element follows the floated element in the source code. See example 2.

View Example 2

What if the floated element is larger than its container?

The wrapping effect created by a float may present a problem if the containing element, perhaps a div, isn’t large enough to contain the floated element. When this happens the floated element can extend beyond the bounds of its containing element and play havoc with other parts of your page.

I’ll enclose the floated elements in divs, so you can see the containers they are in with borders outlined in the next examples. In example 3, you see a floated image in a div with with the id noncleared. The example uses these two rules:

img {
  float: left;
}
#noncleared {
  border: thin solid #F00;
}

The div containing the image is outlined in red to emphasize the actual size of the floated element’s container.

View Example 3

To prevent content that follows the div containing the overflowing image from continuing to wrap around the floated image, we can use the CSS property clear. The possible declarations for the clear property are clear: left, clear: right, clear: both, or clear: none. Using clear: left or clear: right forces your content past anything floating on the left or on the right, respectively. Using clear: both forces material past anything floating on either side.

I’ll add some new content in a second div (cleverly named cleared) to my page using this rule:

#cleared {
  clear: left;
  border: thin solid #00C;
}

In example 4, you can see the effect of the clear: left rule. The new div does not begin until it has found a spot on the left side of the containing block that is free of other floated content. (The containing block in this case is the body element.)

View Example 4

There are several other methods for clearing contained floats later in the article. For now, let’s look at using float to create a layout.

Can you float a whole layout?

Floats are popular layout tools. float has earned a spot as a beloved CSS property precisely because it is useful for creating layouts.

float is not a positioning property in CSS —the only position properties in CSS are absolute, relative, fixed, and static—however, when you combine widths, margins, and floats, you have CSS properties at your command that are often more reliable in terms of layouts than any of the available position properties. You can create all sorts of layout arrangements with float, whether or not float is technically a positioning property.

You can see a simple example of two columns created with float in example 5. Two columns are created by floating a div that is constrained to a width of 70% to the left of the page:

#content {
  float: left;
  width: 70%;
}

The remaining 30% of the page is filled with a second column (actually, another div) that has a margin-left: 75% rule to prevent it from wrapping under the floated column on the left.

When floating any element, you may want to assign a width to it, unless you want the contents to shrink-wrap. In example 5, if the element that is floated to the left did not have a width assigned, the float would shrink down to the width of its content—in this case long lines of text that would overlap the sidebar on the right, but if for example there was just a small image there, the width of the containing floated #content block would be correspondingly narrow.

View Example 5

Notice that the 70% content div and the 25% sidebar div (100% minus the 75% left margin) do not add up to 100% of the width of the page. In the absence of any padding in these example divs, the extra 5% acts as a gutter between the two columns. This would be especially important if the colored borders were removed in the examples. In actual practice, you might opt to use divs that filled 100% of the width, and then give the text some whitespace with margins or padding.

Most page layouts need a header and footer area. Take a look at example 6. It has new 100% divs for a masthead and a footer. Notice that the new #footer div falls immediately under the sidebar div. It’s colored purple so you can see the problem it presents.

View Example 6

You’re probably way ahead of me in realizing that the clear property is what is needed to get this footer to behave. The clear property can be added to the CSS controlling the footer:

#footer {
  background: #EAD5FF;
  border: 1px solid #90F;
  clear: left;
}

The effect of the clear rule is shown in example 7. The footer moves down the page until it finds a spot where there are no floated elements on the left edge of its containing block. (Again, the containing element in this example is the body.)

View Example 7

Want a colored sidebar?

Two-column layouts often have one color background for the content and another color for the sidebar. This can create a problem. Before I explain how to solve the problem, I’ll give you an example of it.

The div borders will be removed to emphasize this example. The sidebar div gets assigned a background color. Take a look at example 8.

View Example 8

The sidebar is merely as large as the content in its div, and the background color does not extend fully down the page. There are many creative and very workable solutions to this problem, including the famous faux columns solution that uses a background image.

I’ll describe one alternate method of solving this problem. It requires wrapping everything on the page in a container div.

The rules in effect for example 9 are:

#container {
  background-color: #DBFFC2;
  width: 90%;
  margin-right: 5%;
  margin-left: 5%;
}
#content {
  float: left;
  width: 70%;
}
#sidebar {
  margin-left: 75%;
}
#masthead {
  background: #FFC;
  border: 1px solid #090;
}
#footer {
  background: #EAD5FF;
  clear: both;
  border-top: 2px solid #90F;
}

View Example 9

In example 9, both the content and the sidebar divs are now light green—both allow the background-color declared in the container to shine through. The masthead and the footer, although they are enclosed in the container div, have declared values for background-color that obscure the background-color of the container.

The appearance we want is for only the sidebar to be light green. One more rule will create that effect. Simply make the background-color for the content div white:

#content {
  background: #fff;
  float: left;
  width: 70%;
}

We now have the appearance of two individually colored columns, both of which seem to extend completely down the page. See example 10.

View Example 10

The footer is nested inside the container, so when the footer is set to clear: both, the container stretches down to enclose it.

There is one caveat to using this method. If the sidebar happened to be longer than the content, then the background color of the content div would stop before it reached the footer.

How about three columns?

There are many ways to make a three column layout with floats. The one I’ll show you involves adding another container to the page. The new container, which I’ll give the id innercontainer, will enclose the existing content div and a new div for the third column. The new div will have the id innersidebar.

The #innercontainer will use float: left and a width of 75%. Remember, we have to leave room for the existing sidebar we want to keep on the right:

#innercontainer {
  float: left;
  width: 75%;
}

Next, make some changes to the rule for the content. It will float: right, so the new div will appear to its left. Again, the dimensions need some adjusting to make room for the new #innersidebar. The content rule is changed to:

#content {
  background: #fff;
  float: right;
  width: 65%;
}

Finally, add the new #innersidebar. It goes in the document source after the content, but before the existing sidebar:


  </div> <!-- end content -->
  
  <div id="innersidebar">
    stuff and things go here
  </div>
</div> <!-- end innercontainer -->
<div id="sidebar">
...

The CSS rule for the inner sidebar is:

#innersidebar {
  float: left;
  width: 35%;
}

I’ve added a black border to the #innercontainer in example 11, so you can see where the new container is.

View Example 11

I’m fond of this solution to the three column layout—it keeps the content first in the source code, which is an aid to both screen-reader users and search-engine spiders. But, it does require two container divs, which adds non-semantic markup to the document. Other three-column layouts often require a trade-off as well.

If you search the Internet for three-column layouts using floats, you’ll find many other ways to use floats. With many of these, you must choose between a slight addition of non-semantic markup, or use hacks. This is because float is not really a positioning property. It’s been adapted into a layout tool out of necessity and frustration with other means of making a reliable columnar layout. If the CSS property display: table ever becomes supported by the majority of browsers, many columnar layout issues will be easier to solve. (The CSS property and value display: table is not the same as the HTML <table> element, which is used to format rows and columns of data.)

Float your thumbs

You can line up a number of floated items side by side to create page displays as diverse as navigation bars and image galleries. I’ll show you how to create a thumbnail image gallery.

I’ll display a bunch of small images in an unordered list. Each list item (li) contains the thumbnail image and a text caption. The normal behavior of list items (being block-level elements) is to move down to begin on a new line for each new item. I ‘ll use float to make these list items display like a resizable thumbnail gallery.

The first step is to assign the whole unordered list an id of “thumb”. This rule removes the bullets and eliminates any default margins:

#thumb {
  list-style: none;
  margin: 0;
}

Next, style the list items. The float rule makes these list items all pile one after another in a horizontal line (like words in a sentence), taking up whatever space the width of the container allows:

#thumb li {
  float: left; 
  display: inline;
  width: 75px;
}

The width: 75px rule forces the caption text to appear under the thumbnail image, because that is the exact width of my thumbnail images. As you can see in example 12, there are several other declarations in the #thumb li rule—the other CSS is simply to make it look a bit nicer.

The two most important rule declarations for the gallery effect are those for float and display. display: inline is included because it eliminates the IE floated double-margin bug. (There’s more about this bug in the Resources section at the end of the article.)

I can put as many thumbnail images and captions as I want in my list, and the layout of rows and columns created will change with the user’s available browser space. To see how it works, look at example 12 and resize your browser window.

View Example 12

(Don’t forget for your real-world thumbnail gallery to include links to the larger versions of your images.)

It’s important to note that these images are all the same height and the captions all contain the same number of words. In a situation where the images were of different heights, or the captions varied in length, some of the floated elements might be different heights. Instead of a neatly aligned set of images, you might have a row of various-height divs that would not neatly align.

One way to resolve this problem is to give the #thumb li rule enough height to accommodate the tallest of the elements. In example 13, I’ve added a few words to one of the captions and changed the height rule to height: 11em.

View Example 13

More about Containing Floats

Example 3 showed you a floated image not completely enclosed within its container. There are several ways to make sure that a container completely encloses any floated elements. Examples 7-10 used the clear: both property on the footer to force the container to stretch far enough to contain the floated element. This works in examples 7-10 because the footer is within the same container element as the floated content div, but sometimes you need to fully contain a floated element that doesn’t meet that criteria.

Three additional methods for containing floats are summarized in example 14.

View Example 14

The first method is to add a non-semantic element such as <div class="clear"></div> after the floated element and inside the container. This class uses the rule:

.clear {
  clear: both;
}

The drawback to this is, of course, the small bit of non-semantic HTML that gets tossed into your document.

A second method of containing floats uses the overflow property. The containing div is assigned an overflow: auto rule, forcing it to expand to contain its floated child elements. Here’s an example:

#container {
  overflow: auto;
}

This works in most modern browsers. Older Mac IE browsers may show a horizontal scroll bar, which is the only drawback to this method. For versions of IE older than IE7 which have a problem with expanding boxes (see below), simply adding a hasLayout trigger to the #container rule achieves the same effect. I used #container {zoom: 1;} in these examples. It does no harm in browsers such as Firefox that don’t understand zoom, and makes IE6 and below behave.

The third method shown in Example 14 uses overflow: hidden. It works almost identically to the overflow: auto method; you won’t get any scroll bars, but some content, such as images, might be clipped.

There’s another method you may run into if you research floats: the easy clearing method, which uses the :after pseudo-class. This method requires a number of hacks to make it work in various browsers. Since the overflow method works well without hacks, I see no reason to resort to a method that requires hacks.

Using `float`: Caveats and bugs

Older versions of Internet Explorer (6 and below) may hit you with the double-floated margin bug. If an element has a margin on the same side as the direction in which it is floated, IE will double the margin on that side. This one is easily solved with a display: inline rule, as illustrated above.

Another IE-specific problem is the way it treats floats (or indeed any content) that are too large for their containers. If an element becomes too wide (or too tall) for the width and/or height assigned to its container, IE will expand the box to display it all. This may cause adjacent floated elements to drop because there is no longer room for them to wrap as intended. There are several ways to handle this, the easiest of which is overflow: hidden, although that may mean that some content is hidden from view in certain situations. See Resources for a lengthy description of this IE bug and the other choices for workarounds.

Understanding the basic presentation behavior of float discussed here will help you apply the float property in many situations. In addition, the resources below will take you into greater depth on the topic. Go forth and float.

Resources

CSS Sprites: Image Slicing’s Kiss of Death

http://www.alistapart.com/articles/sprites

clipped by raddevon Aug 23, 2007

css images webdesign

Show Clip

CSS Sprites: Image Slicing’s Kiss of Death

by Dave Shea

Published in: Browsers, CSS, HTML and XHTML |
Discuss this article »

Back when video games were still fun (we’re talking about the 8-bit glory days here), graphics were a much simpler matter by necessity. Bitmapped 2-dimensional character data and background scenery was individually drawn, much like today’s resurgent pixel art. Hundreds and later thousands of small graphics called sprites were the building blocks for all things visual in a game.

As game complexity increased, techniques developed to manage the multitude of sprites while keeping game play flowing. One variation saw sprites being plugged into a master grid, then later pulled out as needed by code that mapped positions of each individual graphic, and selectively painted them on the screen.

And what does this have to do with the web?

Everything old is new again, and though the rise of 3D games has made sprite maps obsolete, the concurrent rise of mobile devices with 2D gaming capabilities have brought them back into vogue. And now, with a bit of math and a lot of CSS, we’re going to take the basic concept and apply it to the world of web design.

Specifically, we’re going to replace old-school image slicing and dicing (and the necessary JavaScript) with a CSS solution. And because of the way CSS works, we’re going to take it further: by building a grid of images and devising a way to get each individual cell out of the grid, we can store all buttons/navigation items/whatever we wish in a single master image file, along with the associated “before” and “after” link states.

How do CSS Sprites work?

As it turns out, the basic tools to do this are built into CSS, given a bit of creative thinking.

Let’s start with the master image itself. Dividing a rectangle into four items, you’ll observe in this master image that our intended “before" link images are on the top row, with “after" :hover states immediately below. There’s no clear division between the four links at the moment, so imagine that each piece of text is a link for now. (For the sake of simplicity, we’ll continue to refer to link images as “before” images and the :hover state as “after” for the rest of this article. It’s possible to extend this method to :active, :focus, and :visited links states as well, but we won’t go into that here.)

Those familiar with Petr Stanicek’s (Pixy) Fast Rollovers may already see where we’re going with this. This article owes a debt of gratitude to Pixy’s example for the basic function we’ll be relying on. But let’s not get ahead of ourselves.

On to the HTML. Every good CSS trick strives to add a layer of visuals on top of a clean block of code, and this technique is no exception:

  <ul id="skyline">
    <li id="panel1b"><a href="#1"></a></li>
    <li id="panel2b"><a href="#2"></a></li>
    <li id="panel3b"><a href="#3"></a></li>
    <li id="panel4b"><a href="#4"></a></li>
  </ul>

This code will serve as a base for our example. Light-weight, simple markup that degrades well in older and CSS-disabled browsers is all the rage, and it’s a trend that’s good for the industry. It’s a great ideal to shoot for. (We’ll ignore any text inside the links for the time being. Apply your favorite image replacement technique later to hide the text you’ll end up adding.)

Applying the CSS

With those basic building blocks, it’s time to build the CSS. A quick note before we start — because of an IE glitch, we’ll be tiling the after image on top of the before image when we need it, instead of replacing one with the other. The result makes no real visual difference if we line them up precisely, but this method avoids what otherwise would be an obvious “flicker” effect that we don’t want.

  #skyline {
    width: 400px; height: 200px;
    background: url(test-3.jpg);
    margin: 10px auto; padding: 0;
    position: relative;}
  #skyline li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;}
  #skyline li, #skyline a {
    height: 200px; display: block;}

Counter-intuitively, we’re not assigning the before image to the links at all, it’s applied to the <ul> instead. You’ll see why in a moment.

The rest of the CSS in the above example sets things like the dimensions of the #skyline block and the list items, starting positions for the list items, and it turns off the unwanted list bullets.

We’ll be leaving the links themselves as empty, transparent blocks (though with specific dimensions) to trigger the link activity, and position them using the containing <li>s. If we were to position the links themselves and effectively ignore the <li>s, we’d start seeing errors in older browsers, so let’s avoid this.

Positioning the links

The <li>s are absolutely positioned, so why aren’t they at the top of the browser window? A quirky but useful property of positioned elements is that all descendent elements contained within them base their absolute position not off the corners of the browser window, but off the corners of the nearest positioned ancestor element.The upshot of this is that since we applied position: relative; to #skyline, we’re able to absolutely position the <li>s from the top left corner of #skyline itself.

  #panel1b {left: 0; width: 95px;}
  #panel2b {left: 96px; width: 75px;}
  #panel3b {left: 172px; width: 110px;}
  #panel4b {left: 283px; width: 117px;}

So #panel1 isn’t horizontally positioned at all, #panel2b is positioned 96px to the left of #skyline’s left edge, and so on. We assigned the links a display: block; value and the same height as the <li>s in the past listing, so they’ll end up filling their containing <li>s, which is exactly what we want.

At this point we have a basic image map with links, but no :hover states. See the example. It’s probably easier to see what’s happening with borders turned on.

Hovers

In the past we would have applied some JavaScript to swap in a new image for the after state. Instead our after states are in one image, so all we need is a way to selectively pull each state out for the appropriate link.

If we apply the master image to the :hover state without additional values, we make only the top left corner visible — not what we want, though clipped by the link area, which is what we want. We need to move the position of the image somehow.

We’re dealing with known pixel values; a little bit of math should enable us to offset that background image enough both vertically and horizontally so that only the piece containing the after state shows.

That’s exactly what we’ll do:

  #panel1b a:hover {
    background: transparent url(test-3.jpg)
    0 -200px no-repeat;}
  #panel2b a:hover {
    background: transparent url(test-3.jpg)
    -96px -200px no-repeat;}
  #panel3b a:hover {
    background: transparent url(test-3.jpg)
    -172px -200px no-repeat;}
  #panel4b a:hover {
    background: transparent url(test-3.jpg)
    -283px -200px no-repeat;}

Where did we get those pixel values? Let’s break it down: the first value is of course the horizontal offset (from the left edge), and the second is the vertical.

Each vertical value is equal; since the master image is 400 pixels high and the after states sit in the bottom half, we’ve simply divided the height. Shifting the whole background image up by 200px requires us to apply the value as a negative number. Think of the top edge of the link as the starting point, or 0. To position the background image 200 pixels above this point, it makes sense to move the starting point -200px.

Likewise, if the left edge of each link is effectively 0, we’ll need to offset the background image horizontally by the width of all <li>s prior to the one we’re working with. So the first link doesn’t require an offset, since there are no pixels before its horizontal starting point. The second link requires an offset the width of the first, the third link requires an offset of the combined width of the first two links, and the last requires an offset of the combined width of all three previous links.

It’s a bit cumbersome to explain the process, but playing around with the values will quickly show you how the offsets work, and once you’re familiar it’s not all that hard to do.

So there you have it. Single-image CSS rollovers, degradable to a simple unordered list.

Buttons

There’s no reason why we have to leave the links touching each other, side-by-side as they were in the previous example. Image maps may be convenient in some spots, but what about separating each link into its own stand-alone button? That way we can add borders and margins, let the underlying background show through, and generally treat them as separately as we need to.

In fact, the building blocks are already in place. We really don’t need to modify our code too radically; the main change is in creating a new background image that doesn’t continue from link to link like the last example did. Since we can’t rely on the <ul> for placing the original background image, we’ll end up applying it to all <li>s instead and offsetting each the same way we offset the after states in the prior example.

With an appropriate image and a bit of spacing between each <li>, we’ve got buttons.

Note that in this example we’ve added 1px borders which, of course, count toward the final width of the links. This affects our offset values; we’ve compensated by adding 2px to the offsets where appropriate.

Irregular shapes

Up till now we’ve focused only on rectangular, non-overlapping shapes. What about the more complex image maps that image slicers like Fireworks and ImageReady export so easily? Relax, we’ve got you covered there too.

We’ll start the same way as the first example, by applying the background image to the <ul> and turning off list item bullets and setting widths and so forth. The big difference is where we position the <li>s; the goal is to surround each graphical element with a box that tightly hugs the edges.

Again, because of the ability to use absolute positioning relative to the top left corner of the <ul>, we’re able to precisely place our links exactly where we want them. Now all that’s left is to set up the hover states.

Worth noting is that in this case, a single set of before and after images wasn’t enough. Because of the overlapping objects, relying on only one after state would show pieces of surrounding objects’ after states. In fact, it would show precisely the pieces that fall within the link’s borders. (Easiest to just see it in action.)

How to avoid this? By adding a second after state, and carefully selecting which objects go where. The master image in this case has split the purple and blue objects into the first after state, and the green, orange and yellow objects into the second. This order allows boxes to be drawn around each object’s after state without including pieces of the surrounding objects. And the illusion is complete.

Benefits and pitfalls

A couple of final thoughts. Our new CSS Sprite method tests well in most modern browsers. The notable exception is Opera 6, which doesn’t apply a background image on link hover states. Why, we’re not sure, but it means that our hovers don’t work. The links still do, and if they’ve been labeled properly, the net result will be a static, but usable image map in Opera 6. We’re willing to live with that, especially now that Opera 7 has been around for a while.

The other concern is familiar to anyone who has spent time with FIR. In the rare cases in which users have turned off images in their browsers but retained CSS, a big empty hole will appear in the page where we expect our images to be placed. The links are still there and clickable, but nothing visually appears. At press time, there was no known way around this.

Then there’s file size. The natural tendency is to assume that a full double-sized image must be heavier than a similar set of sliced images, since the overall image area will usually be larger. All image formats have a certain amount of overhead though (which is why a 1px by 1px white GIF saves to around 50 bytes), and the more slices you have, the more quickly that overhead adds up. Plus, one master image requires only a single color table when using a GIF, but each slice would need its own. Preliminary tests suggest that all this indicates smaller total file sizes for CSS Sprites, or at the very least not appreciably larger sizes.

And lastly, let’s not forget that our markup is nice and clean, with all the advantages that go along with that. HTML lists degrade wonderfully, and a proper image replacement technique will leave the text links accessible to screenreaders. Replacing the sprite imagery is dead simple, since all of our dimensions and offsets are controlled in a single CSS file, and all of our imagery sits in a single image.

Top 25 Niche Social Media Sites (That Actually Send Traffic)

http://tropicalseo.com/2007/top-17-niche-social...

clipped by raddevon Aug 22, 2007

social webdesign

Show Clip

Top 25 Niche Social Media Sites (That Actually Send Traffic)

April 23rd, 2007 | Link Baiting & SMM

Update, May 27, 2007: I’ve added 8 new sites to the list.

With Digg getting more and more hostile–and with my baiting habit getting a bit out-of-control–I’ve lately been forced to look elsewhere to get my beloved jolts of social media traffic.

No matter. Evolve or die! They won’t send you 5,000 uniques in an hour, but the traffic they do send is more likely to subscribe to your RSS feed, because their members have already identified themselves as part of your niche’s tribe. (And it’s a more targeted tribe than the “gamer wanker” at Digg, or “Politico smartass” at Reddit.)

Without further adieu, here are 17 25 niche social media sites that actually seem to be gaining critical mass:

AgentB (Deals)
Advert Lover (Advertisements)
AutoSpies (Autos)
Babblz (Parenting)
Ballhype (Sports)
blogs4God (Christian)
Care2 (Social Action)
Dealigg (Deals)
Dissect Medicine (Health & Medicine)
DZone (Developers)
Game Diggity (Game Videos)
Hugg (Environment)
JudysBook (Deals)
Meme or Lame (Gadgets)
News Heat (Politics)
PickStation (Music)
Pixel Groovy (Web Design)
Plant Change (Environment)
qoolsqool (Education Resources)
ScoreGuru (Sports)
Stylehive (Fashion)
TTiqq (Tips & Tutorials)
Tweako (Computers & Technology)
Video Bomb (Videos)
VideoSift (Videos)

It’s a good bet that nearly every linkbait you publish would fit in at at least one of the above sites, so I recommend making ‘niche social media submission’ part of your regular launch to-do list. Just like ol’ fashioned link begging, it’s a great tactic to hedge against the power of the Bury Brigade at Digg. (Save yourself time: Go sign up and get an identical username and password for each site, and then bookmark this page )

I expect that in a year from now there will be a few hundred niche social media sites with a critical mass of users. Let’s hope so, baiting Digg ain’t good for the old ticker

p.s. a message to all you muppets rolling your eyes and saying “great now the SEOs can spam the niche sites, too!”: an SEO submitting to (even spamming!) your social media site is a good sign. Just figure out how to make the community self policing and work through the growing pains.

300+ Tools for Running Your WordPress Blog

http://mashable.com/2007/08/16/wordpress-god300...

clipped by raddevon Aug 21, 2007

blogging internet wordpress

Show Clip

WORDPRESS GOD: 300+ Tools for Running Your WordPress Blog

August 16, 2007 — 08:07 PM PDT — by Mashable Team — Share This

As one of the leading open source blogging platforms, WordPress has inspired hundreds (if not thousands) of plugins and tools to customize your blog. In this article, we’ve compiled a list of more than 300 of our favorites.

This information is compiled from previous Mashable articles. If you enjoy this post, also see ONLINE MEDIA GOD and ONLINE PRODUCTIVITY GOD.

For the blogger

AjaxWP - Adds AJAX to all aspects of your WordPress site, which speeds up the load times.

Alexa Rank - Display your Alexa rank with pride.

Ajax Comment Preview - Allows readers to preview their comment before submitting.

asTunes - Retrieves data from your Audioscrobbler/last.fm profile and posts it as a list on your blog.

Codebox - Creates a side scrolling box for displaying code snippets.

Crossroads - Adds thumbnails and comments from your Flickr account.

FireStats - Full featured statistics including referrers and popular pages.

Google PageRank - Allows you to display your Google Page Rank on your blog.

Hardened-Trackback - Generates a single-use trackback to help fight trackback spam.

imgViewJX - Refreshes an image on your main page from a selected directory.

Live Spell Checker - Adds a spell checker to your posts in the admin area.

Plug ‘n’ Play Google Map - If you include longitude and latitude in your post, this will automatically add it to a Google Map on a separate page. Very useful for blogs writing restaurant reviews or about events.

Wordpress Mailing List - Have a mailing list? Let readers subscribe and unsubscribe from the front page of your site.

WP e-Commerce - Adds a shopping cart to your WordPress powered site.

WP-Polls - Adds fully customizable polls to your blog.

WP-Post Ratings - Allows readers to rate your posts.

Zorpia That’s Hot Box - Allows visitors to send posts they like to Zorpia.com and vote on their favorites.

For your readers

AJAX Comments 2.0 - Auto updates the comments page with no full reload, enabling much smoother commenting than the older full reload system.

AJAX Google Video Search - Search Google Video without leaving your favorite blog.

AJAX Shoutbox - Real time conversation with sound to alert you to new messages.

Cool Weather - Allows visitors to see the weather forecast for any location they choose.

Currency Converter - Adds a real time currency converter to the page with data from Yahoo Finance.

Google AJAX Search - Allows you to setup search for your site, the web, and another site such as your Flickr account.

Google MapSearch Widget - Allows readers to search Google Maps without ever leaving the page.

Gregarious - Social bookmarking plugin that adds Digg, Reddit, Feedburner FeedFlare buttons and more.

Hottaimoijiruna - Adds a self-updating clock to the site for a timezone defined by the blogger.

Inline Ajax Comments - Hides comments until the user clicks on them.

Inline Ajax Page - Displays a snippet of a post and then allows the reader to click a button to load the full entry without going to another page.

Tagboard Widget - Adds an auto-updating tagboard to your site that displays new messages as they are posted.

Units Converter - Converts hundreds of different units of length, area, volume, weight / mass, and speed without reloading the page.

WP Movie Ratings - Combines data from IMDB with the blogger’s movie review and allows the readers to add their own ratings.

XDTalk - Allows real-time conversation between registered users.

Fight Spam

Akismet - Anti-spam plugin from the creators of WordPress that uses a central database of spam comments to identify spam. Requires a free API key from Wordpress.com

Spam Karma - Analyzes comments for spam based on a karma system.

Bad Behavior - Prevents spam bots from accessing your site by analyzing their HTTP requests.

Did You Pass Math? - Asks users a simple math question before their comments are posted.

Comment Timeout - Closes comments on old posts.

Encourage Commenting

BlogFollow - Shows a snippet of the user’s blog beneath their comment.

DoFollow - Removes “nofollow” attributes from links in comments so search engines can follow them.

DoFollow Trackbacks - Removes “nofollow” attributes from trackbacks.

Show Top Commentators - Lists your most frequent commenters along with links to their blogs.

Improve Appearance

Nicer Trackbacks - Improves the appearance of trackbacks from other blogs.

WP-NoSh*t - Filters bad words from comments.

Numbered Comments Adds numbers to comments.

AuthorHighlight - Highlights comments by the blog’s author.

Comment Highlighter - Styles comments based on the author’s name, email, or URL.

wp-chunk - Truncates long URLs in comments to prevent them from stretching the page.

Enable Rich Comments

Custom Smileys - Adds clickable smiley emoticons to comments.

TinyMCEComments - Turns the comment box into a full-featured rich text editor.

Live Comment Preview - Allows readers to preview their comment before posting.

Edit Comments XT - Allows users to edit their own comments.

Enable Avatars

Gravatar - Displays user-selected avatars next to comments.

Favatars - Pulls the favicon from a commenter’s blog or website and uses it for their avatar.

MBLA - Adds user images from MyBlogLog to comments.

OpenID Comments - Lets readers comment with their OpenID identity.

Show Off Comments

WP-Most Commented Posts - Displays the posts with the most comments in the sidebar.

Latest Comments with Avatars Reloaded - Shows the latest comments along with the MyBlogLog avatars of the commenters.

Allow Better Conversation

Simple CoComments - Tracks the conversation across blogs.

Comment Karma - Digg-style voting on comments.

Quoter - Allows users to quote a previous comment in their comment.

Whisper - Lets users “whisper” comments that are only visible to one person.

Moderate Comments Effectively

Comment Twitter SMS Notification - Notifies you of new comments via SMS through Twitter.

Bannage - Adds the ability to ban users from commenting by name, email, or IP.

CommentCentral - Allows batch opening and closing of comments on multiple posts.

404 Notifier - Provides a log of your 404 errors.

Admin Dropdown Menus - Streamline your crowded admin panel menus by turning them into dropdown menus.

Admin Panel Comment Reply - Adds a “reply to comment” option in the comments section of the admin area.

Ajax Spell Checker - Uses a variety of dictionaries to spell check your posts.

Auto-hyperlink URLs - Provides you with several options for automatically turning URLs in to hyperlinks.

AWSOM Pixgallery - Designed to allow artists and webcomic creators to create a portfolio of their artwork.

Batch Categories - Makes it easier to add posts to another category, or to organize posts when importing from another blog.

Custom Admin Menu - Gives you the power to rename, hide, or move just about anything you want in the admin area.

Custom Write Panel - Allows you to customize the “Write” panel of WordPress by hiding things you don’t need such as “Post Password” and adding things you would like easier access to.

Dashbar - Allow your admins to have admin access while working in the frontend of the blog without having multiple windows open.

Dashboard Editor - Completely customize your admin dashboard using PHP, HTML, and widgets.

DashNote - Adds a post-it note feature to the dashboard to jot down notes to yourself.

Digital Fingerprint - Adds a digital fingerprint to your posts so you can search the web to see if your content has been scraped.

Domain Mirror - Allows one WordPress install to be accessed from multiple domains.

Download Counter - Counts and tracks the downloads of all your files.

Email Users - This plugin allows you to mail registered users on your blog based on their role.

Enforce WWW Preference - Provides 301 redirects to queries with /index.php and enforces your use or non-use of www to make sure your search engine indexing is uniform.

Excerpt Editor - Provides you with more control over the excerpts such as length and auto creation.

FeedBurner FeedSmith - Ensures all your RSS feed subscribers get counted in your FeedBurner subscriber count.

Fix Database - Checks your WordPress database for errors and attempts to fix them.

Genki Announcement - Allows you to add an announcement before your first post without editing your themes.

Genki Pre-Publish Reminder - Allows you to write reminders for things like setting categories before you post.

Google Analyticator - Inserts Google Analytics code on every WordPress page.

Google Sitemaps Generator - Will create a Google compliant site map of your blog.

GT Post Approval - Adds “Approve” and “Reject” buttons to the administrators view on all posts, which is ideal for blogs with multiple authors.

Instant Update - Handles the tedious chore of upgrading your WP install with just one-click.

Just Unzip - Allows you to upload a zip folder from the Write page. Just Unzip will then unzip the contents and associate them with the current post.

Khanh’s Instant Notepad (KIN) - Allows you to jot notes to yourself on a notepad.

Leprakhauns Word Count - Adds a Java powered word counter to your editing page.

Mass Post Manager - Allows you to move or delete all the posts in a category at once.

Mutliply - Allows one administrator to control multiple blogs.

NextGEN Gallery - Adds an image gallery to your control panel.

OneClick Install - Adds an extremely powerful uploader and installer for plugins and themes to WordPress, eliminating the need to unzip or FTP.

Page Link Manager - Allows you to easily rearrange, hide, and move pages.

Permacop - Allows you to redirect any URL to another.

Post2Page - Allows you to take existing posts that you have and convert them into pages.

PlugInstaller - Helps you install new plugins by obtaining it, uploading it and unpacking it.

podPress - Includes numerous features for bloggers wishing to add podcasts to their WordPress install, such as previews, RSS feeds, and adding cast to posts.

Search and Replace - Search all your posts at once for specified text, quickly replace it.

Share This - Adds multiple social bookmarking links and an e-mail-this function in one handy button.

Simple Pop-up Images - Add a thumbnail image to your post; when the user clicks on it, they get a larger pop-up of the picture.

Simple Tagging - Simplifies the tagging process to drop down menus and includes the ability import from your current tagging plugins.

Site Unavailable - Publishes a message that your site is down while still allowing admins to login.

Throttle - Monitors your bandwidth and limits non-essential items during heavy load times to help performance.

Wikipedia-NoFollow - Written in response to Wikipedia’s implementing a “nofollow” rule to their outgoing links, this plugin allows you to add nofollow to links you give to Wikipedia pages.

WordPress Mobile Edition - Strips your blog down for easy reading on phones and PDAs.

WordTube - Why use YouTube when you can host and stream your videos as you please? Includes a flash player.

WP Grins - Adds clickable smilies to both the administration area and comments section.

WPAds - Add rotating banner and text ads to any location you define on your blog.

WP-Custom Login - Allows you to modify the user login page logo to an image of your choice.

WP- DBManager - Provides you with the ability to optimize the database, back it up, restore, delete the backup database, drop emptied tables, and run selected queries.

WP-phpMyAdmin - Provides you with quick access to your PHP databases directly from the WP admin area without having to login to phpMyAdmin.

WP Plugins Tracker - Verifies all of your plugins are the latest version by checking them against the wp-plugins-db.org database.

WP Super Edit - Provides you with more control over the Visual editor including emoticons, layers, style attributes, and more.

WP-Table - Allows you to add a table directly in the Visual mode or import from a spreadsheet.

Image Management Tools

Aniga Gallery – Allows you to create picture galleries that use the WordPress comment system.

Batch Image Uploader – Upload and resize multiple images to your blog at once.

Duh Gallery – Creates a photo gallery from your uploads folder in WordPress.

ImageManager – Includes interface for browsing and uploading images and basic tools such as cropping and rotating.

WP Image Gallery – Create photo galleries from within WordPress and display them in posts.

fMoblog – Post pictures with descriptions from a mobile phone.

Pop-up Image Gallery – Photo gallery plugin with various options for transitions.

PhotoZip – Allows you to upload a .zip file to create an image gallery.

PictPress – Automatically generates a picture post from a directory on your server and resizes pictures on the fly.

Importing Images from Other Services

Another Flickr – Allows your readers to browse thumbnails from your Flickr albums and go directly to full size images.

BubbleShare – Display photo galleries from your BubbleShare account.

Facebook Photos – Shows thumbnails of photos from your linked Facebook account.

Flickr Photo Album – Pulls in your Flickr photo sets and displays them as albums in WordPress.

FlickrRSS – Displays most recent images from any RSS feed from Flickr such as a user, group, or tags page.

Fotobook – Import your Facebook photo albums into a WordPress page.

ImageShack Uploader – Upload an image to ImageShack’s free storage service and insert a thumbnail into your posts.

Slickr Gallery – AJAX photo gallery that pulls in images and photosets from Flickr.

Smugmug Gallery Bar – Insert photos from your Smugmug account into blog posts.

Image Display Effects & Hacks

Enlarger – Displays a thumbnail but loads the bigger image in the background so when clicked the full size version loads instantly.

IImage Panorama – Helps you create a 360 degree panorama picture to add to your blog.

Image Headlines – Create cool text images for the titles of your posts.

Lightbox 2 – Generates thumbnails that when clicked load in a lightbox.

Multi-Topic Icon: Shows images that represent each of the categories assigned to a blog post.

Random Image – Pulls a random image from your blog and links back to the post it came from.

Transparent PNG Fix – Make sure your PNG files don’t look nasty.

WP Wetfloor – Create the ever-popular reflection effect for the images on your blog.

Playing Music

Del.icio.us MP3 Player – Makes links to MP3s in your posts playable and easily postable to del.icio.us.

Audio Player – Inserts a simple MP3 player into your posts that plays uploaded audio files.

XSFP Player – Flash player that allows you to embed music on your blog via http.

What Am I Listening To?

DG PlayingNow Updater – Displays the song you are currently listening to on iTunes, MSN Messenger, or J. River Media Center.

EZ-Scrobbler – Displays your most recently listened to tracks on last.fm.

iTunes Spy – Displays your most recently listened to tracks on iTunes.

Pandora Feeds – Displays data from Pandora feeds, for example, a list of your stations, bookmarked songs, and bookmarked artists.

onAirNow – Now playing plugin that displays most recent song from iTunes or WinAmp.

Podcasting Tools

Odeo – Embed a podcast that you recorded on Odeo.

Podcast Release – A “release” form for guests of your podcast, accepting your terms.

PodPress – Full featured plugin for podcasters including feed generation, iTunes preview, and download stats.

iPodCatter – Helps podcasters create a valid feed for the podcast directory on iTunes.

Miscellaneous Audio Tools

Evoca Browser Mic – Allow your blog readers to send you voice comments which you can later post to your blog.

Odiogo – Converts your text to speech and provides a link for your readers to listen to your posts.

Video Tools

Anarchy Media Player – Plays a wide variety of audio/video file formats in the appropriate player on your blog.

Easy Inline SWF - Allows you to insert Flash files in .swf format into your posts without any weird tags.

SeeTheFace – Complete tool for recording video and posting it to your blog.

Extreme Video – Plays any .flv file on your blog with support for YouTube, Google Video, Quicktime, and more.

Noembedder – Automatically adds a noembed section to any embedded content that does not already have one.

YouTube Brackets – Allows you to simply enter a URL for a YouTube video versus copying and pasting embed code.

wordTube – Video player that includes the ability to program a menu of videos.

TubePress – Display YouTube galleries as blog posts or a sidebar item.

YouTube Video Gallery – Displays thumbnails for any gallery from YouTube.

vPIP – vPIP stands for “Videos Playing In Place,” meaning it will only embed after a specified image or link is clicked by the user.

Stats for the Blog Owner

AWStats Xtended Info - Requires AWStats and adds things such as screen size, Flash, PDF, and Java support.

Backlinks inbound links counter - Uses MSN to track all incoming links to your site.

Bluetrait Event Viewer (BTEV) - Tracks your logins, deleted users, last passwords, invalid user names and more.

Bsuite - Tracks page loads, search terms used on incoming links, top performing posts, and lists related posts at the bottom of each entry.

CountPosts - Shows you how many times each post gets visited while ignoring visits from the admin.

DownloadCounter - Counts downloads of files you attach to your posts.

Dschini Bot Checker - Lets you know which pages are being checked by which search bots and how often.

Feed Statistics - Monitors your feeds and tells you which readers are being used, the links that readers click on, and which stories they are reading.

FeedBurner SiteStats Enabler - Helps you install the FeedBurner script in your site with instructions in both Italian and English.

FeedBurner StandardStats - Simplifies the process of installing the FeedBurner script so you can monitor your RSS feed statistics.

FeedStats - Statistical tool for counting your feeds, measuring length of stay on your site and more. Stats appear in the dashboard.

FirStats - Full-featured, Ajax powered stats for your admin area.

GoStats web counter - Lets you install the GoStats counter in your blog as a text widget.

Lightstats - Plugin generates bar and pie graphs for statistics about posts, comments, and categories.

Live - Lets you watch the activity on your blog in real time. See things like posts visited, new comments, and feeds grabbed.

Open Web Analytics - Tracks page views, visits, unique visitors, clicks, referring websites, and plots visitor geography on Google Earth.

Posts/Comments Time - Shows you the number of posts and comments for the hours of each day so you can better plan your posting times.

Search Phrases - Straightforward plugin that just displays what search terms brought the visitors to your site.

Social Traffic Monitor - Monitors the social sites Digg, Netscape, Reddit, Newsvine, Fark, Slashdot, Del.icio.us, and StumbleUpon.

Ultimate Google Analytics - Adds the Google Analytics script to your site while also counting downloads and outbound links.

Word Count - Tracks the word count of your posts.

WordPress.com Stats - Uses your WordPress API key to pull stats and places them in a page in your admin area.

WP OnlineCounter - This plugin counts the number of readers currently online, highest number of visitors at the same time, and the total count of visitors.

WP-SlimStat - Tracks all of the standard stats you’ve come to expect from a stats package, but in a very compressed database for less load on your server.

WP-Stats - Very general statistics package focusing on your number of posts, comments and so on.

Stats to Share with Visitors

Akismet Spam Count - Show off your Akismet spam power and let spammers know you’re protected from their attempts.

Alexa Rank - Allows you to display your Alexa rank for the world to see.

GeneralStats - Displays your choice of number of users, categories, posts, comments, pages, links, words in posts, words in comments and words in pages.

Google PageRank - Display your Google Page Rank on your front page.

Impress - Display number of users, posts, pages, comments, categories, words, and more on your blog.

Jon’s Showoff Rankings Widget - Displays your Google Page Rank, Alexa Traffic Ranking, and Technorati Rank all in one plugin. (Ed note: this plugin is no longer supported, and the developer recommends using the widget version instead.)

Post Administration & Layout

Add Graphic Signature - Adds a graphic of your signature to your posts either automatically or via the insertion of a simple tag.

Adman - Allows you to post ads such as Google AdSense at the beginning or middle of a post.

Another WordPress Meta Plugin - Allows you to add Meta tags and keywords to your post to try to further optimize your blog for search engines.

Category Remindr - Category Remindr puts a button next to the “Publish” button to remind you to select the categories for your post.

Corrector - Adds Google Spell Check to your admin area and can spellcheck in 27 languages.

DropCap First Character - Enlarges the first character of a post to give it more of a magazine appearance.

Front Page Excluded Categories - Allows you to exclude posts from certain categories on your front page.

Limit the size of main page posts - Set the number of words you want each of your main page posts to contain so that if they exceed that limit, a link is provided to a page with the complete post.

Notify On Draft Post - Notifies the editor when the authors of a multi-author blog post a new draft for review.

Post Notification - Sends an email to a list of registered users when you make a new post. Includes the option to include the post in the email.

Post Repeater - Re-posts an entry with significance every week, month, or year.

Post Templates - Allows you to set up repeating templates such as a “Picture Of The Day” without all of the tedious copy and pasting.

PostPost - Allows you to add content such as advertisements before or after every post.

Posts Expire - Set an expiration date on your post.

Subscribers Only - Lets you mark a post as “subscriber only” so they are visible only to members of your site.

Subscribe-Remind - Adds a reminder to the bottom of each post to subscribe to your RSS feed.

WordPress PDA - Helps your readers view your blog on a PDA browser.

WP-orderposts - This plugin allows you to custom order your posts (as opposed to the default reverse-chronological order).

WP-Sticky - Make a post the default first entry on your blog.

Post Tools

Auto Link - Use the Google API to set delimiters like [movie]Move Title[/movie] to make it auto link to the page on IMDB.

Author Complete Post List - Gives you the ability to display all the posts by an author, including the ones where they are co-author.

Blog by Mail with Categories - Changes the “Blog by Mail” feature in WordPress so you can also set the category.

Code Markup - Allows you to include snippets of code, including HTML, in your post without it affecting the page.

Easy Post-To-Post Links - Allows you to use a shortcut when writing a post linking to another post on your blog.

On This Day - Displays posts posted on the same day in previous years.

Plain Text Paste - Helps to ease the pain of pasting something you wrote in Microsoft Word into WordPress.

TD Word Count - Displays a word count for each post on a blog, and gives you a total count.

Ubernyms - Allows you to make shortcuts for terms and links you use often. Just enter the abbreviation and this plugin fills it in for you.

WP-Footnotes - Allows you to add footnotes to a more detailed post.

wpSpoiler - Allows you to hide text behind [spoiler] tags. Ideal for sites with tv or movie reviews.

Crossposting

DJ-Email-Publish - Once you publish on your WordPress blog, this sends the post as an email to your other blogs such as MSN Spaces.

Live Space Sync - Allows you to import all your posts to your Microsoft Live Spaces so you can advertise your blog to your contacts.

LiveJournal Crossposter - Automatically posts your latest entries to your LiveJournal account, or any other LJ software based site.

Vox Crossposter - Cross-posts your posts to your Vox account.

Xanga Crosspost - Allows you to have your posts appear on your Xanga account.

RSS Feed Tools

©Feed - Adds copyright info to your feed and places a digital fingerprint on it so you can search the web for content theft.

Add to Any Subscribe Button - Allows your readers to subscribe via most popular RSS readers.

AddThis Sidebar Widget - Adds RSS info and social bookmarking links to the sidebar.

Better Feed - Adds a “read more” button, a copyright notice, and a “Add to del.icio.us” link.

DeCat - Allows you to select certain categories to not be included in your feeds.

Feed Control - Gives you the ability to exclude posts from your feed, add pages, and more.

Feed Footer - Adds copyright and advertising to your RSS posts.

Feed Master - Assigns a number to your feed readers to give you a better idea of stats specific to them.

Feed Styler - Allows you to style your feed.

FeedBurner FeedSmith - Make sure all your RSS feed subscribers get counted along with the ones signed up via FeedBurner.

FeedStats - Gives you statistical data on your feeds.

Feedvertizer - Add text links to the end of your feed posts.

RSS Flashfeeder to Myspace - Feeds your last two posts to your MySpace page.

Slash Comments - Adds info to your feed about how many comments are on the post.

Subscribe-Remind - Adds a little reminder to subscribe to your feed at the end of each post.

Social Bookmarking

Digg Button - Allows you to add the Digg button anywhere in a post with a simple code snippet.

Digg IT - A plugin that allows the inclusion of the Digg button.

JPF Add to Reddit - Allows readers to submit your posts to Reddit.

Share This - Adds multiple social bookmarking links and an email-this functionality in one button.

Sociable - Adds the linking information for 61 social bookmarking sites.

Social Bookmark Buttons - Adds social bookmark buttons for Digg.com, Netscape.com, Reddit.com, Del.icio.us, Stumbleupon.com, Google.com, Socialogs.com, and Socialposter.com.

Social Bookmarks Plugin for WordPress - Provides you access to the social bookmarking icons for more than 20 popular sites.

Socializer Plugin - Adds the ability to post to nearly 40 social bookmarking sites.

SocialList - Allows you to see which of your posts have been submitted to del.icio.us and Digg.

Socialogs.com - Allows you to have your entries submitted to Socialogs.com.

WP-Notable - Adds the icons for numerous social bookmarking sites to each post.

wphotspots - Tracks the activity of your posts on several social bookmarking sites.

Social Site Integration

Blogmark Integration - Display your Blogmarks list on your blog.

DiggClick - Add the Digg button to the beginning of your posts.

DiggIT - Allows you to add the Digg button even if someone had already submitted your post.

Facebook Comments - Allows you to bring comments on your Facebook notes over to the relevant blog post.

Gregarious - Combines a Digg button plugin with Alex King’s popular “Share This” plugin for social bookmarking.

Ma.gnolia Widget - Display links from your Ma.gnolia account using this widget.

Reddit Button - Adds a Reddit button to your blog posts.

StumbleCrumble - Display a pre-determined number of your latest Stumbled websites on your own blog.

Status Indicators

360Voice Bits Plugin - Connects with 360Voice.com to post the latest info on your 360 standings.

AIM Online Status Indicator - Let your readers know if you’re online.

IM Online - Presence indicator for AIM, MSN, Yahoo!, Google Talk, Skype and ICQ.

MeeboMe Plugin For WordPress - Display a Meebo widget on your blog so you can chat with your visitors.

WP-ICQ-Status - Display your current ICQ status on your blog.

Xbox 360 Gamercard WordPress Plugin - Allows you to display your Xbox 360 Gamecard.

Miscellaneous Site Integration

.Mac Sidebar WP Plugin - Display information from your .Mac account in your WordPress sidebar.

Amazon Wishlist - Add your Amazon Wishlist to your blog.

Bloggersnap - Allow your visitors to take a webcam shot and post it to your blog.

EasyPayPal - Allows you to accept payments for many services including subscriptions, trial periods, and more.

Ebay Sales Lister - Display Ebay listings (from your account or others) on your site.

Facebook Photos - Allows easy access to your Facebook photos for use in your blog.

GetWiki - Embed a Wikipedia article in your blog.

iTunesSpy - Display your latest played songs on your WordPress blog.

Last Amazon Review - Displays latest reviews from an Amazon RSS feed. Supports Associate IDs.

MasterWish - Place your wishlist from MasterWish.com on your blog.

Netflix - Share portions of your Netflix queue with your readers.

Phoogle - Add Google Maps with markers you choose to any of your posts.

Slashdot.org Headlines - Display the latest headlines from Slashdot on your site.

PayPal Donate Button - Allows you to add a “Make a Donation” button powered by PayPal.

WP-Twit - Display your latest Twitter postings on your site.

Yahoo Browser-Based Authentication - Allows users to sign in to your blog using their Yahoo ID and password.

Your YouTube Favorite Videos - Display your favorited YouTube videos on your site.

YouTube Video Gallery - Display a gallery of YouTube videos on your site.

Left Sidebar

DarkT - Slick black design, extremely legible, very modern looking, fixed width and widget ready.

Green Bug - Very pleasant looking fixed width and widget ready theme, great for a nature blog.

HijauSegar - Very open with easily edited headers. Fixed width.

Integral - Very uncluttered design, makes a great theme for a company blog, fixed width and widget ready. Fixed width.

Melod Art - Unique coloring, would make a great family blog. Fixed width and ready for widgets.

Notes - Make your personal website look like an actual personal journal.

Rainbow Feather - Fluid width theme, perfect for a writer or someone aspiring to be one.

RedHorizon - Clean and professional, stylish. Fixed width and widget ready.

Riaz - Very professional and classy looking, could be used for many needs. Fixed width and widget ready.

Rounded Transparent - Very clean, easy to navigate, stylish, fixed width, widget ready.

Simply Blue - Nice rounded corners, modern looking, fixed width and widget ready.

Simplicity 2.0 - Just as the name applies, very simple, but visually appealing. Would make a great personal blog, or possibly fashion related. Fixed width, widget ready.

Skeletons In My Closet - Very easy to read, fixed width, great for a personal or music blog.

Solid - Very stylish, clean reading, fixed width, widget ready.

Was: ImJTk - Nice mixture of colors, very smooth and free flowing, fixed width, widget ready.

Right Sidebar

Blending Curves - Pink is a difficult color to pull off in a lot of themes, but this one does it well with blending in a “torn out journal pages” feel. Fixed width and widget ready.

Blogger’s Cafe - Very simple, great for sites about blogging, coffee shops, or just plain old coffee lovers. Fixed width.

Blue-Ridge - Muted colors so as not to distract, great for a personal blog, fixed width, widget ready.

Boxy Mint - Great personal page or company blog, versatile, modern look. Fixed width and widget ready.

Elegant Purple - Great personal blog with an all purple look. Fixed width and widget ready.

Green Love - Great personal or travel theme, fixed width and widget ready.

Green Pro 2.0 - Excellent use of green, versatile look that can be used for many different sites. Fixed width and widget ready.

Leaf On Edge - Very versatile theme that could be used for blogs on any number of subjects, fixed width.

Lemon & Lime - Pleasing colors, logo placeholder, fixed width and widget ready.

Melmac - About as modern as you can get. Fixed width, widget ready.

NightLight Idea - Nice black theme with lite animation in the header. Fixed width and widget ready.

Otek - Orange colored, but not enough to be distracting, clean navigation, Fixed width and widget ready.

Persian Minyx - Fixed width and widget ready, unique way of marking the width.

Pgreen - Very readable, versatile look for a fixed width theme that is widget ready.

Raised - Blue everywhere, but still readable. Child page navigation is a little sloppy, but passable. Fixed width.

RedPlanet - Great for a science or technical blog, very customizable, fixed width, widget ready.

Silver Light - Another good professional person’s theme, fixed width, widget ready.

SybmimDX Remix: Ghost - Very simple, would make a great professional blog, fixed width.

05 Moon 1.0 - This is an excellent black theme, variable width and widget-ready.

Acid Green Pro - Fixed width, centered layout with widget ready sidebars. Tons of space in the sidebars for lots of goodies.

Alike Theme - Another darkish theme, but quite easy on the eyes. AdSense ready, fixed width and widget ready.

Ayumi - Primarily white theme with good highlights, easy to read and widget ready.

Bionic Jive - Compartmentalized well, clean read, variable width.

Blogging Simply - Fluid width, widget ready, loads of space in the sidebars for all the extras you want.

CitrusIsland - Variable width, widget ready, colors that pop.

Cordoba Green Park - Variable width, widget ready, easily changeable color schemes.

Creaker - Widget ready and perfect for customizing.

Crunch - Available in multiple colors, easy to change header.

Daily Digest 3.0 - Fixed width, widget ready, newspaper style.

Fava Beans and a Nice Chianti - Very elegant looking, great for a foodie blog, variable width.

Fresh Apple - This theme is based around a green apple, how can it not be soothing to the eye? Variable width and widget ready.

I Like Grey - Variable width with lots of boxes in each side column for customization.

i3Theme - For Mac lovers, this theme makes your WordPress blog look like your favorite operating system.

Illacrimo - Widget ready, smooth appearance. Perfect for a graphic artist’s site.

Intensive - Google AdSense optimized, good for newish blogs.

Journalized Winter - Variable width, great for someone that likes lots of info on their pages. Also available in Sand colors.

Mandigo - A fixed width (800 or 1024) theme that can be two or three columns based on settings on the Options page. Widget ready.

Mogle - Black and orange professional looking theme, Adsense ready.

Navigation WP Theme - Based on the WordPress Admin area, variable width, widget ready.

Nuberu - You can’t get much cleaner than plain black & white. Fixed width.

OmegaLeaf - Very sleek white and red theme, fixed width.

Pink Web 2.0 - Versatile theme with numerous uses, widget ready and fixed width.

ProSense - Fixed width, clean reading, and available in three different color schemes. Widget ready.

Soccer Theme - Fixed width, widget ready, great for a sports-themed blog.

Talian 1.0 - Clean colors, easy to read, variable width, widget ready for easy customizing.

Track 17 - Variable width, great for a tech themed blog.

TyreMonkey - A nice red and black three column design. Fixed width.

Ubmodicus - Lightweight, fast loading, widget ready.

Unnamed - While it lacks a name, it has Ajax features (the black area you see is a pop-in) as well as being widget ready. Fixed width.

Zen - Very stylish, easy to read, fixed width, widget ready.

A CSS styled table version 2

http://veerle.duoh.com/blog/comments/a_css_styl...

clipped by raddevon Aug 21, 2007

css webdesign xhtml

Show Clip

A CSS styled table version 2

18 comments 2007 at 02.12 pm posted by Veerle

In 2005 I wrote an article about styling a table with CSS. After receiving so many requests I finally decided to give in and write another tutorial. Seems like a popular topic and an interesting one to share some tricks on how you can nicely style them. This article is about the proper usage of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS.

The XHTML

If you've ever read my first article, you might remember that I suggested you to read Roger's article 'Bring on the tables'. I can't explain it any more profound than how he does. However, I'll give you a short overview of what to keep in mind when you are coding a table with accessibility in mind. Here's my short list:

Make sure to use the th elements for the headers in combination with the scope attribute
Add a caption to your table, especially when there is more then 1 table on the same page
Use the summary attribure in the table element to describe the content of the table
Divide your table into sections by grouping table rows using the thead, tfoot and tbody element if needed

A CSS styled table version 2

Why use table headers and scope?

It gives you 2 advantages. It makes the table more accessible for people using a screen reader. Secondly, it makes it easier to style with CSS. You can give all th elements another styling that sets it appart from all other cells which are using the td element. Adding the scope attribute will help people with screen readers to understand the table better. We easily make the connection between the headers and the data cells, but people using screen readers can't if there are 2 kind of headers: one referring to a row and one referring to a column. We use the scope attribute to explain how the headers work and how they are connected with the data cells.

<table>
<tr>
<td></td>
<th scope="col">Webhosting Home</th>
<th scope="col">Webhosting Home Plus</th>
</tr>
<tr>
<th scope="row">Data usage</th>
<td>1 GB per month</td>
<td>2 GB per month</td>
</tr>
</table>

When to use the abbr attribute in headers

You can go an extra mile by using the abbr attribute as well. It's certainly recommended in case the headers are rather long.

<table>
<tr>
<td></td>
<th scope="col" abbr="Home">Webhosting Home for limited usage</th>
<th scope="col" abbr="Home Plus">Webhosting Home Plus for more extended usage</th>
</tr>
...
</table>

Why add a caption?

It provides a short description of the table. This information is valuable for people using a screen reader. It's immediately clear what the table is about.

<table>
<caption>Company X webhosting products overview</caption>
...
</table>

Why add summary?

Reading a table for people using a screen reader takes a lot of patience and sometimes a caption doesn't give them enough information but only a hint. Help them by giving a description upfront before they delve into the data. It'll save them a lot of time. A summary can help these people far more by the extra information they read.

<table summary="Webhosting products overview showing all available packages, what's included and what the monthly cost is with an option to order">
<caption>Company X webhosting products overview</caption>
...
</table>

The CSS

Time to talk about style and color. I have 2 examples to show:

A CSS styled table version 2

Example 1 uses no background images but only background color for the table cells
Example 2 uses a background image

Styling the table cells

In the CSS below I've highlited the styling for the borders. The border-collapse property is set to collapse so the cells have no cellspacing.

table {
width:90%;
border-top:1px solid #e5eff8;
border-right:1px solid #e5eff8;
margin:1em auto;
border-collapse:collapse;
}
td {
color:#678197;
border-bottom:1px solid #e5eff8;
border-left:1px solid #e5eff8;
padding:.3em 1em;
text-align:center;
}

Styling the headers

In the CSS code below you'll see that I've been using a class to style the alternating rows, but you can always use a simple javascript in case you don't want to add these extra classes in the code and if you want to keep your code extra extra clean. I've also added a class for the 1st column since this one has yet another styling, also with an alternating background effect.

CSS for example 1

tr.odd td {
background:#f7fbff
}
tr.odd .column1 {
background:#f4f9fe;
}
.column1 {
background:#f9fcfe;
}

CSS for example 2

tr.odd td,
tr.odd .column1 {
background:#f4f9fe url(images/background.gif) no-repeat;
}
.column1 {
background:#f9fcfe;
}

Styling the thead and tfoot elements

I'm using a different styling for the headers at the top of the table:

thead th {
background:#f4f9fe;
text-align:center;
font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
color:#66a3d3;
}

For the styling at the bottom of the table, I've added a strong element for the titles and em element for the prices:

tfoot th {
background:#f4f9fe;
text-align:center;
}

Here is the styling for the strong element which is for the 'actual' headers:

tfoot th strong {
font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
margin:.5em .5em .5em 0;
color:#66a3d3;
}

This is for the prices which are styled via the em element:

tfoot th em {
color:#f03b58;
font-weight: bold;
font-size: 1.1em;
font-style: normal;
}

Creation of the background image

This is done by creating a document of 25 by 600 pixels in Photoshop. Create a new layer with a subtle vertical gradient. Select a soft blue as the background color and a lighter blue for foregrond color, this is the same color that will be used as background color in the CSS. When the cell expands vertically it'll be filled with this color. Select the gradient tool and drag a vertical line from bottom upwards to the top while holding down the shift key.

Create another new layer, select the pencil tool and make sure it's set to 1 pixel thickness. Draw a horizontal line starting at the top left corner, holding down shift while dragging horizontally to the right corner. Do the same for the vertical line: starting at the top left corner, holding down shift while dragging vertically to the botton left corner.

There you have it. Hope you enjoyed this tutorial and learned some valuable things :)

Looks interesting?

Group Members

Related Tags

CSS Rounded Corners

CSS Drop Shadows

CSS Gradients

CSS Mouseovers

CSS Quotes for Blockquotes

CSS Graphs and Diagrams

1. jQuery - Change the way you write Javascript

2. Dean Edward’s Packer - Compress your Javascript

3. sIFR Text - Dynamic headers using any font you want

4. Wellstyled.com’s Color Scheme Generator

5. Lightbox - Next generation unobtrusive pop-ups

6. Firefox Extensions - Change the way you tweak and debug

7. Sajax - So simple, there’s no excuse not to use it

Web Design 101: Floats

What is float?

What if the floated element is larger than its container?

Can you float a whole layout?

Want a colored sidebar?

How about three columns?

Float your thumbs

More about Containing Floats

Using float: Caveats and bugs

Resources

by Dave Shea

And what does this have to do with the web?

How do CSS Sprites work?

Applying the CSS

Positioning the links

Hovers

Buttons

Irregular shapes

Benefits and pitfalls

Top 25 Niche Social Media Sites (That Actually Send Traffic)

A CSS styled table version 2

The XHTML

Why use table headers and scope?

When to use the abbr attribute in headers

Why add a caption?

Why add summary?

The CSS

Styling the table cells

Styling the headers

CSS for example 1

CSS for example 2

Styling the thead and tfoot elements

Creation of the background image

Comments

What is `float`?

Using `float`: Caveats and bugs