For my second post, I’ll build on my basic HTML page structure and give the page a basic layout. This post won’t go into detail for more complex things like navigation bars, etc.; I’ll limit it to creating the basic “boxes” where the content will be dumped.
Reset Styles
This is a debated technique, but I personally prefer to use a style reset (specifically I use a portion of “Reset Reloaded” by Eric Meyer)
/* =Reset Styles - Thank you Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0px;
padding: 0px;
border: none;
outline: 0px;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
I find that this saves me a lot of time and code (especially setting margin, padding, and border to nothing). I would normally specify these anyway, so it’s helpful at design time to know that I’m starting with nothing (rather than the browser default). I can then easily set different defaults for different sections of the page. For example, I can set ul and li margin, padding, etc., defaults for the #bodyText region without screwing up my navigation lists.
Page Regions
Now, I will get to the heart of the post, and set up the regions defined in my HTML structure.
Of course, you’ll want to substitute your own values
#container
The purpose of the #container region is to create the actual “page” that will be displayed over the <body>. I like to use a percentage width with a minimum and maximum width. So my CSS for a container div would look like:
/* container */
div#container {
width:90%;
margin:.75em auto;
min-width:650px;
max-width:70em;
background-color:#FFF;
}
#header
Minimal styling is needed for the header box, as it usually is 100% width (default for a div). I find I usually have a header with a logo to the left or right. The height, then, is defined in pixels based on the image height. In this case, I used gradient background (I like PNGs with alpha transparency) so the background color shows through.
/* header */
div#header img {
float:left;
border:none;
margin:5px 1em;
}
div#header {
height:120px;
background-image:url(images/headerGradient.png);
background-repeat:repeat-x;
background-position:bottom;
background-color:#FFF;
}
div#headTitle {
font-size:2em;
height:120px;
text-align:center;
font-weight:bold;
font-family:Cambria, "Times New Roman", Times, serif;
padding-top:30px;
}
Note that I didn’t make the text in the heading (in this case, the site title) an <h1> tag, as I reserve the <h1> tag for the page title.
#mainNav
The #mainNav again usually is a 100% width, so it requires minimal styling. Occasionally, a height may need to be defined, but the most important thing is to clear any floats. So the CSS for this section is usually simply:
/* main navigation ids */
div#mainNavDiv {
clear:both;
}
The rest of the styling will be applied to the <ul>, <li>, and <a> tags in the main navigation region.
#mainContent
OK, so this is getting to be kinda repetitive, but again, the primary elements that are needed are a background color (especially if it’s different than the container background color) and, you guessed it, clearing the floats from the #mainNav region. You can also set padding here to help arrange the other regions inside #manContent, but I prefer to use margins on the contained regions. No right or wrong here, just personal preference.
/* main content */
div#mainContent {
clear:both;
background-color:#FFF;
}
#secondNav
OK, now it gets a little more interesting. I generally have my second-level navigation on the left side, so we’ll need a width, margins, and a left float. I like to use an em for widths here, so the navigation menu expands as text size increases, so does the width of the region (this of course becomes somewhat less important as browsers increasingly rely on the zoom features, but I still think it’s preferable).
/* second-level navigation */
div#secondNav {
float:left;
width:12em;
margin:1.5em;
}
#bodyText
The main things we need here are margins and padding. Of course, since the #secondNav region is floated left, the text in the #bodyText region will wrap completely around the #secondNav; this can create a problem when #bodyText is longer than the navigation. So, to keep the main text properly aligned, we’ll need to set the left margin appropriately. Here’s what it might look like:
/* main text content */
div#bodyText {
margin-left:15em;
margin-right:1em;
}
#footer
OK, we’re back to a more boring one here, basically a clear; we’ll want to add maybe some padding, change text size, color, etc.
/* footer */
div#footer {
clear:both;
background-color:#999;
text-align:center;
padding-top:5px;
font-size:.8em;
}
Final Product
OK, so I’ll combine it all here; here’s the basic css layout.
/* =Reset Styles - Thank you Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0px;
padding: 0px;
border: none;
outline: 0px;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* container */
div#container {
width:90%;
margin:.75em auto;
min-width:650px;
max-width:70em;
background-color:#FFF;
}
/* header */
div#header img {
float:left;
border:none;
margin:5px 1em;
}
div#header {
height:120px;
background-image:url(images/headerGradient.png);
background-repeat:repeat-x;
background-position:bottom;
background-color:#FFF;
}
div#headTitle {
font-size:2em;
height:120px;
text-align:center;
font-weight:bold;
font-family:Cambria, "Times New Roman", Times, serif;
padding-top:30px;
}
/* main navigation ids */
div#mainNav {
clear:both;
}
/* main content */
div#mainContent {
clear:both;
background-color:#FFF;
}
/* second-level navigation */
div#secondNav {
float:left;
width:12em;
margin:1.5em;
}
/* main text content */
div#bodyText {
margin-left:15em;
margin-right:1em;
}
/* footer */
div#footer {
clear:both;
background-color:#999;
text-align:center;
padding-top:5px;
font-size:.8em;
}