Associating Text With Images Using CSS Absolute Positioning
 by Ian Cook

For better retail product SE rankings...
Associating Text With Images
Using CSS Absolute Positioning
— by Ian Cook

Retail product pages are faced with the challenge of displaying images that exhibit the product alongside relevant text that search engines can associate with the actual product image being described. One of the best ways to meet this challenge involves Absolute Positioning using Cascading Style Sheets (CSS).

Editor's note:
Last month we ran an article that demonstrated how to use absolute positioning with CSS to get retail products ranked better with the engines. Unfortunately, the examples we gave did not display properly on browsers other than IE. This article attempts to clarify and improve on last month's advice.

And, next month we'll tell you how to use CSS to completely replace the table style layout.

Such a page layout technique allows us to position elements on a web page based on pixel coordinates instead of the linear order of a page's source code. And, in terms of optimizing pages for search engines, this can be an extremely powerful tool. That's because absolute positioning allows us to control precisely the linear order in which elements (body text, images, headline tags, etc.) are presented within our HTML code.

If this sounds confusing, just view the source code on this example to see how we have reversed the visual layout of the page relative to the page's source code.

As that example shows, the order of the page elements may render differently in a browser than the order in which they are defined within our source code. Generally speaking,...

TO READ THE FULL ARTICLE