/CSS/ Create styled sidebar boxes

30/03/2007 | Filed under Develop > CSS

Craig Grannell shows how to position content on your website in the form of sidebars, and also demonstrates how to style up page structure, headings, paragraphs, lists and links

Unless your websites are thin on content or have information presented in an entirely linear fashion, you need to work with positioning ancillary content on a regular basis. Most of the methods for doing this are borrowed from magazine design, including sidebars and boxouts.

The first thing to realise about ancillary content is that it’s not your main content. It’s surprising how many designers don’t take this into account and thereby create sites where it’s not easy to distinguish each block of content. It’s also important to keep your code as simple as possible and the CSS rules as modular as possible. In the latter case, it’s sensible to create a default style that has specific properties that can be overridden via the use of ‘class’ attribute values and associated CSS rules.

Click here to download sidebar-boxes-site folder.
Click here to download sidebar-boxes-nifty folder.
Click here to download the tutorial PDF.

Comments

Paul Hankin / 04/04/2007 / 14:59 / http://www.stlouispiano.com

I just read your online article at http://www.netmag.co.uk/zine/develop/create-styled-sidebar-boxes (Create styled sidebar boxes).

While it is great that you offer these type of articles online - it is impossible to follow along with the article in the way it was originally intended. The first part of the tutorial states "Copy the ‘sidebar-boxes-site’ folder from the CD to your hard disk. " Well - there is no CD.

Please would consider adding a link to necessary tutorial files in order to make your online tutorials usable.
Thanks.
Paul Hankin

Just Wondering / 05/04/2007 / 11:09

And where are the examples, screenshots???

Craig Grannell / 09/04/2007 / 16:55 / http://www.snubcommunications.com

This is repurposed content from .net 159, and nothing to do with the writers (once .net pay for something, they can reprint it as they see fit). I've alerted the editor to the problem of non-availability of files. Should anyone want a ZIP archive of the files, email me via my website. For screen grabs, you'll have to find a copy of the mag, though.

Ben / 11/04/2007 / 02:50 / http://www.benkrull.com.

I'm confused... we need some pictures or something.

Otto Sipos / 23/04/2007 / 08:55 / http://www.clear.hu

The required resources are on the dics of .Net 159.

Mike / 02/05/2007 / 19:56 / http://www.wobum.com

Pictures are much appreciated.

Mathew Browne / 15/05/2007 / 21:39 / http://www.mbwebdesign.co.uk

Thanks for providing the files.

Adam / 19/05/2007 / 20:13 / http:www.cubixstudios.net

thanks guys, this is really helpful and will much improve a lot of my css site.

Thomas / 27/05/2007 / 16:19 / http://www.avsh.pl

Very very good ...
I ever missed the code-examples and files you were talking about. What's a shame :(
Very nice!