Daily CSS Fun
Every day in the month of February I will be posting a redesign of the index page for this site. In doing so I have held myself to only one rule - the only thing i can change from day to day is the style
of the document. From day to day and design to design the underlying html document will not change at all. Why do this you ask? Well, since I wrote the article "Your CSS Bores Me" for ChunkySoup.net I've gotten a lot of feedback from folks who are not sure what CSS can do. While I don't claim to be a designer I think its time to at least attempt to put my money where my mouth is and try and rely on Cascading Style Sheets exclusively.
While these CSS documents will never be too difficult, throughout the course of the month I will also be posting explanations and sketches of what each different style sheet does. These may not come in too timely a fashion (I want you folks to view-source and try and figure things out yourself). However, the detailed explanations will come because my primary goal here is to create a repository of well documented CSS techniques.
Well, it's not very difficult to see that I didn't exactly stick to my daily upload. It wasn't out of lack of creativity, or due to CSS itself. I really has more to do with the fact that I got pretty bored of looking at this same document over and over again. So instead of the previous scheduled 28 layouts I'm gonna cap the layouts at 20 for the month and concentrate on the explanation of each layout. As this experiment was always less about a nifty style sheet switcher
and more about proving that CSS is flexible and worthy of exploration I'm perfectly ok with this change.
To begin with it would be best to familiarize yourself with the document I'm going to be working with. It's important that we not only have a validated HTML document, but also that the html tags used were chosen to convey structure and meaning. Can we say markup boys & girls? While I encourage you to turn to the View-Source command in your favorite borwser to look at the HTML I've provided a few other ways of looking at the document.
Once we are comfortable with this document we can then focus our use of CSS to override a browsers default presentation of each of these elements. At its core, CSS is nothing more then that - taking an element out of its normal flow in the document using positioning; changing the elements default behavior using display; applying colors and background images to elements; changing font sizing, faces and spacing. Below, along with each style sheet, I will try and point out the main position structure used. Most of the time that can be done just by placing borders on each div element on the page. I will also highlight other noteworthy changes. Questions are always welcome.
I've decided to start off simple. This three column layout is created by pulling some of the main content out of the normal flow of the document.
This is the first of many of the style sheets that will rely on the ability to add background images to most any object. If you're looking at the source pay careful attention to the manipulation of the boxes for the opening of the page.
In an effort to prove that most anything can be manipulated with CSS I've carved the page down to its barest essentials using display:none.
Typographically this is a pretty simple style sheet, nothing we haven't seen before. With it I wanted to hammer home the use of padding, margins & background images to introduce graphical content to a document.
Building on a few of the techniques used in the previous style sheets, but also relied heavily on displaying block elements as inline ones instead.
Well, by now you can see the types of things going on. A few things to look out for in this design are the converting of dates to blocks and then moving them left and down to line up with the next piece of info & setting the margins to deal. I also have focused a bit on how the boxes sit next to each other - the borders on the first two, and the scissors as background image of the third. Browser Note: I think IE/mac deals with the connecting dashed borders best, on other browsers it seems to be a coincidence of font sizes.
In anticipation of the next few layouts which will be primarily fixed sized layouts I decided to take a drastically different approach and make a totally flexible one. Updated 2002.03.09 to use position:fixed in all but IE/PC.
In this layout I've manipulated a bunch of the boxes to place their background images where I wanted them. Watchout in IE/PC as it didn't like my top area much, so I've used overflow:auto to keep that section from overlapping the archives. Note for those doing this for real, overflow auto works real well to hold layouts together when users enlarge text.
I really liked where this was going. The idea was obviously to use borders as the main design element. I guess maybe I didn't have the patience to really nail it.
Since some of these are stretching into the odd and non-realistic I'm going to go back to using photographs in the next few layouts. In this docuement the inset scrollbars are created via overflow:auto & the over lapping of content and headers is done with negative margins.
With the focus on working with the image there really wasn't anything difficult or tricky going on with the styles here. But that's ok by me.
Getting back into the swing of things with something simple. Thanks to auto-illustrator for the visuals. [As a few have noticed I've fallen behind. Came down with a bit of a flu bug and have been draggin my feet. Rest assured, I'll catch up].
This sheet shows a pretty simple combination of positioned and non positioned elements. But the interesting bit lies in the use of background images on both the HTML and BODY elements. In doing this I avoided the need to create a 2000+px wide image to cover all resolutions.
Wow... all those horizontal percentages seemed to have added up to something postable. Go figure. Aside from the reliance on percentage widths there really isn't anthing special happening.
Just a simple layout with an "airy" feel. Thought it fit with this photo I had taken yesterday. This layout combines the relative positioning technique used in the 2nd layout and the background image use of the 4th.
I stared at this photo for about an hour after I put it on its black canvas. The whole time wondering how I could incorporate the content of the page without detracting from the image. In the end I kinda cheated.
You know, sometimes you just have to let IE6/PC be IE6/PC. While I was surprised that it handled right aligning the content via margin:auto*) it failed once again on the + selector. I can still live with the results. *Since originally writing this I have learned that IE/PC handles margin:auto properly if set explicitly for margin-left and margin-right.
It's freakishly spring-like outside this week so I thought I'd be cheery (sorta). Happy face courtesy the plastic bag that yesterday's chinese food came in. Centering of said face courtesy background-position.
In a return to the style of the past I went back to my default grey on blue scheme.
