Experiment #2 - Semantic Blog Template - Part 3
In this final part of the experiment, I'm going to look at applying CSS to the finished markup. Rather than start a new design from scratch, I've decided to use an existing design - partly because I already have the images handy and also because it presents sufficient challenges to make a good example.
Structuring the CSS
I've taken a few hints from the likes of Jina Bolton and split the stylesheet into key sections. For most of the elements I apply the layout, text and theme sections. This means that there are multiple style declarations for many elements but I can easily manage changes to colour or images in the theme section or spacing and margins in the layout section. I created additional sections for specific elements such as the navigation menu and logo.
Layout
The first step I've taken is to use a set of CSS reset styles, the ones I've used are from Yahoo's YUI library, but there are others to choose from. The reset styles are used to provide an standard base across all browsers on which you can build your styles.
The basic layout is a liquid layout (one which stretches to fit the width of the browser window) with a fixed width column on the right.
/* Layout */
body {
margin:0px 30px; //add 30px margin to the left and right of the page
}
#page {
margin: 0px auto; // center the page element
min-width: 770px; // for compatible browsers, set minimum width
}
#header {
margin: 0px -30px 0.5em -30px; // negative margins cancel out the side margins on the body element
}
#maincontent {
position:relative; // allows secondarycontent block to be absolutely positioned relative to this element
}
#primarycontent {
margin-right:345px; // clear room for secondary content as a column, includes space for gutter
}
#secondarycontent {
width:330px; position:absolute; // position at the top right of the maincontent element
top:0; right:0;
}
#footer {
margin: 1.5em -30px 0px -30px; // negative margins as used for the header
}
Text and colours
Before adding the images into the design, It's good to block in the typography styles and colours, I've also worked in the background colours and padding/margins for content blocks. In most cases this requires entries in each of the three main sections of the stylesheet for example:
/* Layout */
.module {
padding:0 8px 12px 8px;
margin-bottom:8px;
}
.module-header {
margin:0px -8px 0.5em -8px;
padding:2px 8px;
}
/************************************************/
/* Text */
.module-header {
font-size:1.4em;
}
/************************************************/
/* Theme */
.module {
background-color:#aeae8c;
color:#fffff0;
}
.module-header {
color:#fffff0;
background-color:#aeae8c;
border-bottom:solid 1px #A3A383;
}
See the full stylesheet for the rest of the css additions.
The navigation menu
Styling a list as a navigation menu has been documented in depth so often that I'm not going to go into the specifics, if you're new to the subject try this article at A List Apart or the many examples at Listamatic. I'm no expert in CSS so this may not be the best approach (and it's flawed for IE6) but this is just a first run at it, as I explain towards the end of this article, cross-browser compatibility is not part of the scope for this exercise so I would tackle that later.
background-color:#aeae8c;
position:absolute;
top:77px;
left:30px;
height:41px;
z-index: 100;
padding:0px 4px 0px 4px;
}
#navigation li { // display each item as a left-floated block and remove the bullet points
display: block;
float:left;
height:41px;
padding-top:12px;
margin-top:0px;
list-style-type: none;
}
#navigation li a{
font-size:18px;
font-weight:bold;
text-decoration:none;
color:#474724;
padding:12px 15px 11px 17px;
}
#navigation li a:hover{
color: #fffff0;
}
#navigation li a.active{
color:#ffffff;
}
#navigation li a.active:hover{
color:#ffffff;
}
As you can see in the example the page is now looking more like a completed design. A additional benefit of building up the design in this way is that we can see that the design is readable and presentable without the background images loaded. A reader may have disabled images in their browser for perfomance reasons or heavy network traffic may slow the download of the images.
Images
Finally I'm adding the background images into the design. I start with the header background, this is simply a horizontally repeating image aligned to the top of the page.
background-color:#ffa020;
background-image:url(wd2/Common_Header.gif);
height:123px;
}
Next I add the rounded corners to the top and bottom of the modules in the second column. Because this design uses a fixed width for this column, I don't need to separate out each corner. I uses a single image for the top of the module, applied via the module-header class and a single image fro the bottom of the module, applied via the module class
background-color:#aeae8c;
color:#fffff0;
background-image:url(wd2/rail_bottom.gif);
background-repeat:no-repeat;
background-position:bottom;
}
.module-header {
color:#fffff0;
background-color:#aeae8c;
border-bottom:solid 1px #A3A383;
background-image:url(wd2/rail_top.gif);
background-repeat:no-repeat;
background-position:top;
}
The navigation menu
This is quite complicated, I don't know if I would try and do this a different way to make it cross-browser compatible, but this was based on using the images which I already had available, mainly a repeating background for the whole menu and rounded end pieces plus the item separator.
The approach I've taken is to apply the repeating background image to the main list element and then use the .first and .last classes to apply the end pieces to the relevant list items. I've used negative margins to pull the first and last list items outside the list so that the end pieces do not overlap the main background. This is not a great solution as the nature of the relationship between list and list item seems to be overly complicated for some browsers so the end pieces may become truncated. The separator image has been applied to the left-hand side of the links within the list items using the li.first a selector to remove the separator from the first link.
/* Navigation */
#navigation {
position:absolute;
top:77px;
left:39px;
height:41px;
z-index: 100;
background-image:url(wd2/nav_bg.png);
padding:0px 4px 0px 4px;
}
#navigation li {
display: block;
float:left;
height:41px;
padding-top:12px;
margin-top:0px;
list-style-type: none;
}
#navigation li.first {
height:41px;
background-image:url(wd2/nav_left.png);
background-repeat: no-repeat;
margin-left:-14px;
background-position:top left;
}
#navigation li.last {
height:41px;
background-image:url(wd2/nav_right.png);
background-repeat: no-repeat;
background-position:top right;
margin-right:-14px;
}
#navigation li a {
font-size:18px;
font-weight:bold;
text-decoration:none;
color:#474724;
padding:12px 15px 11px 17px;
background-image:url(wd2/nav_seperator.png);
background-repeat:no-repeat;
background-position: center left;
}
#navigation li a:hover {
color: #fffff0;
}
#navigation li.first a {
background-image:none;
}
#navigation li a.active {
color:#ffffff;
}
#navigation li a.active:hover {
color:#ffffff;
}
compromise
The rounded corners in the primary content area need to be applied separately due the the non-fixed width of the column. By cutting out extraeneous markup, I'm rather short of elements with which to apply all four corners. As a compromise, I decided to just add the top left and top-right corners by using the primarycontent and blog elements. If I felt strongly that the bottom corners were vital to the design I could using DOM scripting to insert them without adding to the content markup.
background-color:#fffff0;
background-image:url(wd2/main_tl.gif);
background-repeat:no-repeat;
background-position:top left;
}
#blog {
background-image:url(wd2/main_tr.gif);
background-repeat:no-repeat;
background-position:top right;
}
Logo
The logo is applied to the heading tag using the Leahy/Langridge method which sets the height and width to match the logo image and then add padding to match the height of the logo to push the text down below the image, the overflow:hidden statement ensures that the text is not visible once the style has been rendered.
/* Logo */
#logo {
position:absolute;
top:8px;
left:30px;
margin:0;
width:298px;
padding: 87px 0 0 0;
overflow: hidden;
background-image: url(wd2/webdeveloper2.gif);
background-repeat: no-repeat;
height: 0px !important;
height /**/:87px;
}
Styling Microformats
One of the advantages of using microformats is that, because the microformats are declared using class attributes for the HTML elements, we can easily use CSS selectors to apply styles to them. Here I've added some simple styling to the hCard markup for the profile module:
/* hCard */
.vcard img.photo {
float:left;
margin-right:5px;
}
.vcard .fn {
font-weight:bold;
}
.vcard .adr {
font-size:0.8em;
text-align:right;
}
.vcard .adr span {
display:block;
}
Taking the lead from Steven Harman's example, and using Wolfgang Bartelme's icons, I've added a bit of advanced CSS to display icons relating to the XFN markup in the blogroll module. The icons only display when the link is hovered over - keeping the list tidy when not in use.
/* XFN */
a.bloglink:hover[rel~="colleague"], a.bloglink:hover[rel~="co-worker"] {
padding-right: 21px;
background: url(wd2/xfn-set/xfn-colleague.png) no-repeat right;
}
a.bloglink:hover[rel~="colleague"][rel~="met"], a.bloglink:hover[rel~="co-worker"][rel~="met"] {
padding-right: 26px;
background: url(wd2/xfn-set/xfn-colleague-met.png) no-repeat right;
}
a.bloglink:hover[rel~="friend"] {
padding-right: 21px;
background: url(wd2/xfn-set/xfn-friend.png) no-repeat right;
}
a.bloglink:hover[rel~="friend"][rel~="met"] {
padding-right: 26px;
background: url(wd2/xfn-set/xfn-friend-met.png) no-repeat right;
}
a.bloglink:hover[rel~="sweetheart"] {
padding-right: 21px;
background: url(wd2/xfn-set/xfn-sweetheart.png) no-repeat right;
}
a.bloglink:hover[rel~="sweetheart"][rel~="met"] {
padding-right: 26px;
background: url(wd2/xfn-set/xfn-sweetheart-met.png) no-repeat right;
}
a.bloglink:hover[rel~="me"] {
padding-right: 21px;
background: url(wd2/xfn-set/xfn-me.png) no-repeat right;
}
So here's the final example, I was going to call it the finished example but there's still polishing to be done before it could go live
A note on browser compatibility
I've only tested the css in these examples with Firefox 2 and IE 7 on Windows. I do know that there are problems rendering in other browsers (IE6 - no surprises there) but I decided that cross-browser css hacks were too big a subject to try and cover in this article.
Come up to The Lab and see what's on the slab.