Overlapping Website Design Elements

Borders: Designing borders around elements may cause skinning problems especially when borders overlap each other, or if the borders require rounded corners. Squared off borders that do not overlap other page elements are usually fine. Rounded borders can only be accomplished by carefully lining up a graphic with table cells (used to create a round corner).

Overlapping elements: In general overlapping elements on the web is something to be avoided. There are a few different ways overlapping can cause a problem. Overlapping drop shadows with textured backgrounds, overlapping navigation elements with graphics, and overlapping text and graphics.

Whenever a page design calls for a textured background or background image, foreground text or images should not have drop shadows. Text and images with drop shadows need to include the portion of the background that the drop shadow falls over. For this effect to work the image or text with a drop shadow will need to display in the exact position where it overlaps with the background image. Even a one pixel offset can cause the effect to break. Pixel perfect control of web page layout is extremely difficult especially when trying to support many browsers and platforms.

Because navigation systems usually use graphics for the main navigation elements, overlapping a background element with the main navigation bar is not recommended. This is because, as mentioned earlier, navigation graphics require three states (default, mouse over, and active). Each of these states use separate graphics. Overlapping design elements with navigation elements will cause strange effects when the state of a navigation element changes but the background graphics does not.

Overlapping HTML text with a graphic is also problematic. Especially when a graphic is silhouetted and text is designed to wrap around the image. To avoid this web design flaw, always try and image your graphics as rectangles. Even if you silhouette your image, the web still views it as a rectangle with one specification for its height and one for its width. If you can imagine an invisible bounding box around your images, make sure that no other page elements (text or other content images) overlap that bounding box.