All the cool kids are using CSS to separate content from appearance on their sites. Here is 101 resources that will get your feet wet with CSS, teach you some new tricks and techniques, clean your code, and hit the ground running with pre-made layouts.
CSS Templates and Layouts
In November 2005 I presented on pro.html.it a three-part article on creating CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. The main goal of the article was getting the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility. The result is a set of 40 layouts that we've thought worth sharing: on each of them you'll find also a download link (if you want, you can download the entire collection, 40 HTML pages in a single zip file). Further details can be found below the gallery.
Three percentage columns (n.02)
Three percentage columns (n.03)
Three percentage columns (n.04)
Three percentage columns (n.05)
Three percentage columns (n.06)
Three fixed columns (n.7)
Three fixed columns (n.8)
Three fixed columns (n.9)
Three fixed columns (n.10)
Three fixed columns (n.11)
Three fixed columns (n.12)
Liquid, secondary columns fixed-width (n.13)
Liquid, secondary columns fixed-width (n.14)
Liquid, secondary columns fixed-width (n.15)
Liquid, secondary columns fixed-width (n.16)
Liquid, secondary columns fixed-width (n.17)
Liquid, secondary columns fixed-width (n.18)
Liquid, three columns, hybrid widths (n.19)
Liquid, three columns, hybrid widths (n.20)
Liquid, three columns, hybrid widths (n.21)
Liquid, three columns, hybrid widths (n.22)
Two columns liquid, side fixed (n.23)
Two columns liquid, side fixed (n.24)
Two percentage columns (n.25)
Two percentage columns (n.26)
One column liquid and two halves (n.27)
One column liquid and two halves (n.28)
Two percentage columns and one larger (n.29)
Two percentage columns and one larger (n.30)
Two columns liquid, fixed side and large one (n.31)
Two columns liquid, fixed side and large one (n.32)
Two colums fixed (n.33)
Two colums fixed (n.34)
Two colums fixed (n.35)
Two colums fixed (n.36)
Two colums fixed (n.37)
Two colums fixed (n.38)
One column fixed and two halves (n.39)
One column fixed and two halves (n.40)
Further details
All layouts use valid markup and CSS, and have been tested successfully on Internet Explorer/win 5.0, 5.5, 6 and beta 2 preview of version 7; Opera 8.5, Firefox 1.5 and Safari 2. Each of the columns could be the longest, and for testing columns length I've used the script filler text on demand.
Each layout could represent a site with five main sections: header, content, navigation, other stuff and footer. The basic markup, common to every layout, is the following:
It's almost minimal, apart from an extra wrapper around the content. Some might argue that the extra div it's unsemantical: all I can say is that in my opinion an extra wrapper in the markup is certainly better than CSS hacking, and to be able to meet the objectives I fixed for the article I needed at least a solid starting point.
Talking about CSS: each of the layouts uses float and in most of the cases negative margins. Once you've understand how they work, they are really simple and powerful. There are two main things to know: first, a negative margin according to the side of float has the effect of shifting even more the floated elements towards the side of float; the second one is that a negative margin on the opposite side of float does not affect the floated element position, but has the only effect to yeld space for eventual flanking element on the side of the negative margin.
The CSS of the examples, which is embedded in both online and download versions, has been kept to the minimum in order to focus on the most important thing, as is the layout. In fact, the CSS has been divided, with an empty line, between two logical parts: the first is for typography and colors, while the second and most important is for the layout itself. No graphics was used in the examples, but if you'll feel the need, you may want to apply techniques such as Faux Columns and Sliding Faux Columns. That's all for now: enjoy!
The only CSS layout you need(?)
One of the arguments for switching from table based layout into CSS based layouts are the flexibility CSS gives us. However, despite the flexibility, you have maybe experienced that the CSS layout you normally use didn't handle a specific case so you still had to edit, or perhaps totally restructure your HTML?In this article you are presented to ten different layouts with example pages, all based on the same HTML.
This article and the example pages are perhaps not the universal answer so the title is maybe a little bit overstated, but hopefully they can make it easier for someone. Furthermore, all the pages are also experiments in how to change a layout without having to use absolute positioning since this take the element out of the page flow. The changes in layout are made by changing mainly floating, margin and padding - no absolute positioning is used.
On the example pages you will find a short description on the page, and if you look in the source code everything is hopefully clearly explained.
As you can see on the images below the different elements in the layout have different colors for better visualization.
Three column CSS layout - left and right menu | ||
 | Supports 100% height: Yes Supports Faux columns: Yes | |
Two column CSS layout - top and left menu | ||
 | Supports 100% height: Yes Supports Faux columns: Yes | |
Two column CSS layout - top and right menu | ||
 | Supports 100% height: Yes Supports Faux columns: Yes | |
Two column CSS layout - left and footer menu | ||
 | Supports 100% height: No Supports Faux columns: Yes | |
Two column CSS layout - right and footer menu | ||
 | Supports 100% height: No Supports Faux columns: Yes | |
Three column CSS layout: 100% height with footer | ||
 | Supports 100% height: Yes, this is a 100% height layout Supports Faux columns: Yes, this layout is made with Faux columns | |
Three column CSS fluid layout: 100% width | ||
 | Supports 100% height: Yes Supports Faux columns: No | |
Three column CSS fluid layout: 100% width and with column borders | ||
 | Supports 100% height: Yes Supports Faux columns: No | |
Two column CSS layout - header and left menu | ||
 | Supports 100% height: Yes Supports Faux columns: Yes | |
One column CSS layout - top and footer menu | ||
 | Supports 100% height: No Supports Faux columns: Yes | |
About the concept and the HTML
The HTML and the concept used is a (tiny) rewritten version of Ordered Borders Layout (OBL) found at Position Is Everything, so if you know that solution the HTML and some of the CSS should look familiar. The reason for rewriting it was mainly that OBL didn't support 100% height and Faux columns didn't fit directly into the CSS concept.
The reason for using OBL is simply because the content comes first in the HTML code (after the header, before the menu/columns) which may benefit search engines, screen/speech readers and cellular phones.
Tested in IE6, IE7, Firefox 1.5/2.0, Opera 9.01 and should work in Safari also
No comments:
Post a Comment