Esotropiart

Blog

first last

C2F Schools II - A CSS Layout

I continue to work on the new layout for the C2F school login screen. With each project I always learn something new. There's not really all that much to know about CSS academically. I feel comfortable with all the attributes and syntax. However, when a specific layout is desired, there are always some hoops to jump through, because no modern browser fully supports CSS as it is recommended by the W3C. CSS hacks must be employed constantly. Microsoft Internet Exploder seems to be just about the worst browser for properly rendering Cascading Style Sheets, and it is necessary to come up with extraneous code and weird tricks to overcome its shortcomings. There is no perfect browser, furthermore, and all of them require some sort of adaptations for cross-browser consistency if the layout has virtually any styling at all. [Ahem]... but IE6 is currently the worst. Firefox is the clear leader. Download it, use it! It's free. It's better.

I included a dummy layout that shows my progress on this particular design project, a school login screen for C2F, Inc. It doesn't yet appear on the site and is still in process. I am showing it here because I think it could be informative for designers to see a list of many design tricks I use on a regular basis in the form of a real-world example. Most of what I know is common knowledge, but there are a few techniques that will really aid the novice designer, and perhaps those of any level. As time permits, I will develop a step-by-step EsoShow and accompanying captions to present some of the more interesting techniques used. For now, you can click on the following image to see how the layout functions. Keep in mind that the layout and accompanying graphics are not finished, and all links have been made inactive. I currently test my layouts in IE6 and Firefox 1.x, and this one seems to work exactly as I wanted in both - after many IE6 CSS hacks.

C2F School Home Page
see the CSS layout in action

first last