Mapping the typical ocPortal Front Page

Attachment

» Download: map.png (86 Kb, 184 downloads so far)

Anyone can easily find this information with the Firebug add-on to the Firefox browser, as its CSS tabs tell you everything you need to know about the styles in your web pages, and if you don't like what it's telling you, you can even make "virtual" changes and see them take effect instantly. Firebug can be your eyes as it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.

However, I wanted to have a visual representation of the space allocated by the most important CSS Classes on a typical ocPortal front page and be able to refer to it at anytime without having to "fire up" Firebug ; some kind of a "CSS Map".
So here is my compilation:

There is a whole lot going on the top and bottom tiers to make it difficult to capture the elements in an uncluttered visual, so I've limited the discovery to the most important classes. Each class can have several elements of style with multiple properties and values. It is also important to note that they are layered (cascading) on the page; the last ones could blot out some of the real-estate of the top ones like so:

1. .re_body
2. .global_top
3. .global_zones
4. .menu_type__zone
5. .logo
6. .global_banner
7. .global_side "panel_left"
8. .global_side "panel_right"
9. .global_middle
10. .float_surrounder
11. .global_copyright
12. .global_minilinks

I will address these Properties: background, border, display, position, height, width, font, list-style, margin, padding, bottom, left, right, top, color, text-align, text-decoration, text-indent in subsequent mapping exercises.

I'm hoping that this first attempt might be useful to gain a better understanding of ocPortal's basic webpage.

Jean