Simple centered CSS layout
When developing a web app or site, I usually start off with an XHTML file (template.html) and a CSS file (base.css). This example is a common layout for most websites and web apps, which is a centered, two-column layout and from there you can tweak it however you want. The naming convention I use for XHTML, CSS and JavaScript is all-lowercase with dashes seperating words. The reason I use this method is because in my ASP.NET controls, I use camel case and sometimes there could be similar name conflicts.
Stubbing out the XHTML file
First we’ll start with the XHTML file. Below is the list of
wrapper: This is the overall container that wraps all the DIVs, it also allows us to center the main area of our site.header: Here we usually place a logo, slogan and/or header navigation.nav: Holds the main navigation for the site. I’ve seen developers use this nav ID in ULs and DIVs, so the choice is up to you.main-content: This is the middle part between the header and footer. It will also hold sub-DIVs depending on how you want to section out your site.footer: Finally you can place copyright, support email, or a footer nav in this area.
To be continued…Reply