A CSS Framework
by Mike Stenhouse on May 22 2005, 16:20
In my Modular CSS article I documented the possibility of breaking down stylesheets into components that could be reused across projects. All well and good. The next logical step is to extend this to become a CSS framework, allowing rapid development of sites with pre-written and tested components. All that's really required to produce this is a set of naming conventions and a flexible base template...
Who is this for?
If you've been creating sites with CSS for a while you may be getting frustrated with having to recreate and retest basic layouts on a regular basis. In this article I'm trying to illustrate a simple way of skipping the tedious startup on your average project, letting you get to the interesting stuff as quickly and efficiently as possible. I've not attempted to explain the layouts included here so it may not be suitable if you're a CSS beginner. Sorry about that... Feel free to dissect them yourself if you're interested; I've kept them as simple as possible.
How many layouts are there?
Well, loads but the majority of them fall into rough groups. Any framework must account for the most common layouts, otherwise it'll never get used.
- Vertical navigation with one content column
- Vertical navigation with two columns of content
- Horizontal navigation with one content column
- Horizontal navigation with 2 columns of content
- Horizontal navigation with local navigation and one column of content
- Horizontal navigation with local navigation and 2 columns of content
These 6 cover most of the blogs out there and most of the corporate sites as well. How can we structure a document so that it'll be useful in all 6 of these scenarios?
What are the common elements?
Malarkey had a shot at pinning down websites' common elements and giving them names a while back but I want something a little more general so that the building blocks can be retasked without slipping their labelling.
So... what are the common building blocks in the above 6 layouts?
- Header
- Footer
- Main content
- Sub content
- Main nav
- Local nav
These elements are used mix and match across most sites you visit so these are the constituent elements that any framework will have to cater for. No designs will use all of them but most will use header, footer, main content and main nav with optional sub content and sub nav.
The ideal structure
For me the most important single aspect of accessibility is the source code order: if it makes sense you're well on your way to building an accessible site.
You can't spent much time on the accessibility mailing lists or forums without someone being told that they should structure their HTML so that the content preceeds the navigation. This stops screenreader users from having to sit through the site's navigation every time they travel to a new page. You can get around this with skip links but that's an extra link to follow...
So, in an ideal world, how would we structure our websites?
- Header
- Main content
- Sub content
- Local nav
- Main nav
- Footer
This source order follows the exact structure people are expected to want: once they have read/listened to the content of your page they are most likely to want to navigate within the current section or to related pages. After they have worked their way through those they'll probably want another section of your site so the main navigation follows.
The page structure
This page structure above looks something like this when turned into (X)HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<div id="page">
<div id="header" class="clearfix">
<hr />
</div><!-- end header -->
<div id="content" class="clearfix">
<div id="main">
<hr />
</div>
<div id="sub">
<hr />
</div>
<div id="local">
<hr />
</div>
<div id="nav">
<hr />
</div>
</div><!-- end content -->
<div id="footer" class="clearfix">
</div><!-- end footer -->
</div><!-- end page -->
<div id="extra1"> </div>
<div id="extra2"> </div>
</body>
</html>
The magic of CSS
We're going to need some farily advanced CSS tricks to turn this source order into useful layouts. They all have to be flexible, to account for text resizing, which with the footer rules out absolute positioning...
The eureka moment for me was when Dunstan published his absolutely positioned menu technique as part of his Mozilla Europe work. Suddenly it became possible, using an incredibly sneaky trick, to pull the nav bar from the bottom of the source and use it horizontally in the header and still allow for text resizing. Now that's genius.
Then you've got the negative margin tricks for moving floats around. I first came across these when Ryan Brill posted about them on Mezzoblue... Dead handy.
If we're going to use floated layouts we're going to need some way of clearing the contents. I could put clearing divs into each of my elements but there is the black magic clearfix method by Tony Aslett that will do this for me, keeping the source clean.
A few other things that might come in handy:
- Body ids to switch styles
- Display: inline to cure IE's double float bug
See where I'm going with this?
We have a single, flexible source document that will take a variety of content and a load of CSS techniques to manipulate them... To make this framework useful I have to be able to get my single source document to display as any of the common layouts listed above. Once that's done I'll be able to drop any content into the HTML framework, plug in the appropriate layout stylesheet for the design, tweak it and the job will be done. No more rewriting XHTML and CSS for every project; every time I start I will begin work with a solid foundation that I can tweak to fit the specifics of the job. Startup time will be next to nothing.
Back to our five main layouts
Okay, so the source code is fixed. What we want is to be able to plug in tried and tested layout stylesheets for reuse on future projects. I'm going to stick with fixed width layouts for this because they're simpler but using negative margins we could get these fluid with a bit of extra work.
- Vertical navigation with one content column
- Vertical navigation with two columns of content
- Horizontal navigation with one content column
- Horizontal navigation with 2 columns of content
- Horizontal navigation with local navigation and one column of content
- Horizontal navigation with local navigation and 2 columns of content
Achieved: Level 2!
That's it - all the common layouts done with pluggable stylesheets and ready to go. They're set up in a kind of Zen Allotment for you to have a flick through...
If you want to have a play with these yourself, all the source files are packaged up in quick-grow zip file.
30/11/2007 UPDATE: I've uploaded a slightly updated version of the framework. Very little has changed but a few people have voiced concerns over the lack of a formal license. Taking advice from Paul Jones (thanks!) I've added the new BSD terms, which are about as open as they come. I'm happy for people to use the framework for whatever they want. If you do, please drop me a line - I'd love to see what you come up with!
6/09/2010 UPDATE: This article is now available in Belorussian, apparently, translated by Amanda Lynn.
Comments
by clint on May 22 2005, 00:27 #
by mattymcg on May 22 2005, 07:07 #
Allright, but never forget that you want to keep your job!
Therefore write unmaintainable code !
by Pascal Opitz on May 22 2005, 10:01 #
A CSS Framework… Brilliant!
by Joshua Heyer on May 23 2005, 17:59 #
by Tinus on May 23 2005, 18:05 #
by mark on May 23 2005, 19:33 #
by Mike Stenhouse on May 23 2005, 20:43 #
a set of links will do
by chris on May 23 2005, 23:40 #
And quite usefull!!
I just noticed that on “my” firefox (ubuntu) the navigation seems to be longer than header so the “Contact” link is on the 2nd line. Anyway, I already had to tackle that problem once. I just used a container for the horizontal navigation bar – with a fixed size (100% or in px I do not remember) for that container.
<div id="navContainer" style="width=xxx"><div id="nav">links…</div>
</div>
link to page
by Gabriel on May 23 2005, 23:57 #
I don’t see any usage terms with these stylesheets. Is the intention for readers to be able to use these stylesheets directly to build from, or are you just sharing the techniques?
(In the US, at least, you really can’t assume anything is available for any particular use unless it’s spelled out in front of you…)
by Kevin Dangoor on May 24 2005, 03:54 #
content -> html framework -> CSS applied -> Go live
Users could interface with a form on the web, upload their content, the HTML framework would get populated, the CSS sheet applied, and their web host would display the finished file. Automatic! Then the designer would just create new cool stylesheets, or be put out of work.
by jeremiah on May 24 2005, 15:44 #
by Dutch Nomad on May 24 2005, 15:49 #
To sort out your css problems:
Error: The stylesheet http://contentwithstyle.pascalopitz.com/css/sifr-screen.css was not loaded because its MIME type, "text/html", is not "text/css".by George Smith on May 24 2005, 16:35 #
Kevin: As for terms of use, you can pretty much do what you like. I’d appreciate a credit somewhere (a reference in the source is enough) and I’d be very interested to see what you manage to do with them so drop me a mail.
Jeremiah: That sort of thing would work really well for hosted blogging or the like, I reckon… Top idea!
I’ve been using a similar workflow for my small freelance projects. For these I get given the design and I just pick the right layout sheet and start tweaking.
Josh Heyer has suggested putting this framework up with a layout repository that people can contribute to. I’ve registered a domain, now I just need the time to sort out a site… Watch this space.
by Mike Stenhouse on May 24 2005, 16:44 #
by Mike Stenhouse on May 24 2005, 16:46 #
Thanks for flagging it up. We start with edges and corners, but we get it running smooth soon …
by Pascal Opitz on May 24 2005, 17:43 #
This is something I’ve wanted to look into for a long time now. I’m one of those people who always manages to have to recreate basic layouts before continuing on to a more customized one, so this type of thinking should save me some work.
Hopefully you’ll be posting more on this train of thought in the future. Thanks for the start though!
by Patrick Haney on May 24 2005, 21:20 #
As browser support becomes more frequent it’s easier to wean myself from tables-based formats.
I’ve just spent a day exploring its features and learnt a lot.
My only stumbling point is that I’m not sure how to recreate it locally without having the PHP server side scripting language.
Is it possible to get the horizontal navigation and masthead to work without the PHP?
Thanks
by John Hilvert on May 25 2005, 01:35 #
I want to play around with the files on my own. however… I think there is some mistake in the link of the zip file. It just goes to the same place as the other demo link, Could you provide a link to the zip file?
Thanks again for a great article
by etan rozin on May 25 2005, 02:32 #
by Craig Beck on May 25 2005, 09:31 #
by Mike Stenhouse on May 25 2005, 12:16 #
by Dave Child on May 25 2005, 14:13 #
Only one question: in
link to page
I see that the Header is larger then the navigation menu. Isn’t it nicer if both are the same length? Or u did this way to have buttons on the navigation menu all the same length to look nicer?
Sorry, maybe this is a newbie question
Cesidio
by Cesidio on May 25 2005, 16:17 #
by Mike Stenhouse on May 25 2005, 17:11 #
by Mike Stenhouse on May 25 2005, 17:42 #
I’m about to start another side project and the thought of beginning from scratch with the code is always daunting. I am definitely going to build my own library of page layouts and components. You have completely inspired me.
This is a software engineer’s approach to CSS design. Modular, reusable code based on common patterns. You never have to reinvent the wheel, and all your energy can be used towards innovation. Brilliant!
Thanks again!
by Lynne on May 25 2005, 23:21 #
what up with that?
(using both Firefox & Exploder6, BTW).
Other than that, this is an excellent idea…
by Steve on May 26 2005, 04:59 #
by Dee Zsombor on May 26 2005, 11:29 #
by Mike Stenhouse on May 26 2005, 12:58 #
Brilliant work.
by f0vela on May 26 2005, 17:20 #
Re: The pesky horizontal scrollbar…
My screen res is 800×600.
To eliminate the horiz scroller,
I actually have to grab a corner of the
web browser and drag it right…
With anything LESS than 780 pixels for the
INSIDE window width, the horiz scroller appears.
Here are some screenshots:
1) Firefox – No horiz scrollbar – inside width >= 780 pixels
http://img131.echo.cx/my.php?image=firefoxnoscroll4hv.jpg
2) Firefox – fugly horiz scrollbar – inside width < 780 pixels
http://img131.echo.cx/my.php?image=firefoxscroll2wo.jpg
3) IE6 – No horiz scrollbar – inside width >= 780 pixels
http://img131.echo.cx/my.php?image=ie6noscroll3fw.jpg
4) IE6 – fugly horiz scrollbar – inside width < 780 pixels
http://img131.echo.cx/my.php?image=ie6withscroll1iu.jpg
Hope this helps….
by Steve on May 27 2005, 00:19 #
Or, you can browse the internet and find Gems like this for FREE.
Thanks, this I am gonna use!
by Magicien on May 27 2005, 02:49 #
by Mike Stenhouse on May 27 2005, 15:41 #
Thanks again for the great resource!
by Paul on May 28 2005, 00:44 #
by Pat on May 28 2005, 18:44 #
by Mike Stenhouse on May 29 2005, 14:36 #
display: inline-block;
I think you can use display: table-cell;
But it’s an excellent work!! Congratulations!!
by Ploufy on May 30 2005, 16:48 #
by Mike Stenhouse on May 31 2005, 02:28 #
I would like to point out thought that there is a mispelled word in The Ideal Structure section of the page second paragraph. The word “having” is mispelled to read “ahving”.
by Ron on May 31 2005, 06:09 #
I have this message in the javascript console
Error: Error in parsing value for property ‘display’. Declaration dropped.
Source File: http://contentwithstyle.pascalopitz.com/css/tools.css
Line: 19
by Ploufy on May 31 2005, 08:58 #
With the layout-navtop-1col.css :
When you move the cursor over the last item of the menu (at the bottom of the page), a blank line appears. The footer seems to move. It’s only under IE, there isn’t this problem with Firefox.
Don’t worry I haven’t noticed another problem. :-)
by Ploufy on May 31 2005, 09:04 #
That IE bug is a classic. I’ll sort it out later. Ron: Thanks for the correction too – one of these days I’ll learn to type properly!
by Mike Stenhouse on May 31 2005, 13:52 #
by Jordan on May 31 2005, 16:50 #
Thanks again.
by guest on June 1 2005, 22:27 #
My last version was 1.0+, and today I use FF 1.0.4
by Ploufy on June 1 2005, 10:34 #
by Mike Stenhouse on June 4 2005, 16:54 #
by taare on June 6 2005, 20:54 #
on this page:
http://contentwithstyle.pascalopitz.com/resources/css-framework/index.php?css=layout-navleft-1col.css
There is a blank space at the bottom of the page, below the bottom navigation…I’m just wondering, how do I get rid of that?
I’m still getting used to the spread of files and having trouble correcting that
thanks for any advice.
PS: This is a great collection of cross-browser CSS templates, very much appreciated
by Ash on June 12 2005, 10:50 #
div#content {
position: relative;
width: 780px;
margin: 0 auto [HERE ->] 20px auto;
padding: 0;
text-align: left;
}
Otherwise, got a URL?
by Mike Stenhouse on June 12 2005, 18:18 #
thanks for the reply.
It turns out that didnt fix it. I’ve tried a few things here and there…none worked obviously.
Site is live because less than 1% use firefox to access it.
btw, i forgot to mention that the extra space below the footer only appears in mozilla [mac and pc] and safari
here’s a link: www.sajlawyers.com/areas_of_practice.php
scroll to the bottom
thanks for your help btw.
also, have you ever thought of integrating a footer than sits at the bottom of the page, regardless of pagelength?
you know, the
css: #ieclear {clear:both}
stuff like that.
just a thought :)
by Ash on June 13 2005, 20:46 #
you know, the div id=”clear-ie”
css: #ieclear {clear:both}
stuff like that.
by Ash on June 13 2005, 20:48 #
Incidentally, you will want to avoid using an id for your clearing elements since you’re likely to want to reuse them. Ids can only occur once on a page but classes can turn up as many times as you want.
by Mike Stenhouse on June 14 2005, 02:42 #
see this page:
http://www.sajlawyers.com/template.php
by Ash on June 15 2005, 00:09 #
To sort your background problem I’d put the repeating faux-column gif on div#page instead of body. To get the shadow to show through you’ll probably need to put about 5px right padding on #page too. Then use one of the extra divs to put a bottom shadow under your page to tie it all together.
Your site’s looking nice, by the way.
by Mike Stenhouse on June 15 2005, 01:43 #
Once again, great job on the css compilation. You’ve got yourself another regular visitor to your website now :)
by Ash on June 17 2005, 01:16 #
I have one question.
How do I get the right column’s background colour to extend all the way down the page? The colour of the main section and sub section are different. I want them to have the same height.
I have tried the Faux Columns solution, I seam to be going wrong somewhere.
thanks for any advice
by Oystein on June 21 2005, 15:28 #
by Mike Stenhouse on June 21 2005, 18:58 #
However, when an organisation with vast experience in user testing looked at this type of markup order, they felt that, precisely because it not an order practiced on most sites, it could cause significant confusion amongst some users – especially screen reader users who may navigate a page not only in a very different manner to a sighted user but far faster.
They suggested that a markup order that deliberately placed Main Navigation as the first major element in markup might well have the benefit of being ‘familiar’ and thus increase overall usability.
I’m not arguing against the markup order suggested above. I’m not convinced that there is a Right or Wrong here. I’m merely pointing out that what works in theory may not always translate well into practice – especially when trying to accomodate the learnt behaviours of site users.
by Mel Pedley on July 1 2005, 15:37 #
Similarly, the right and left columns could also be switched in the markup. The only constraint being the right column cannot preceede the central column (using a negative left margin on the central column).
Incidentally Mike, I have used a similar technique based on a negative right margin for quite a while. Provides the flexibility described above flipped the other way – constraints on left column :
#main {
float: left;
width: 340px;
margin-right: -560px;
margin-left: 220px;
}
/ * / * html #main {display:inline;} /* */
div#sub {
float: right;
width: 200px;
}
div#nav {
float: left;
width: 200px;
}
Generally I use this with either liquid or elastic layouts and works a charm on all modern browsers/platforms. Negative margins is a great technique with considerable flexibility and minimal constraints on markup that can help extend usability and accessibility [IMO].
Plus the user can choose the order of the prinicple content and navigation without needing to touch the CSS – very nice :)))
[PS. always late to the debate me!!!]
by Tom on July 2 2005, 22:35 #
Content organised in the order I’ve suggested here is, in my opinion, the most sensible. It’s only potentially confusing because few sites have the option of considering source order – it requires quite a large mental shift for the developers to both CSS and semantic coding, but I don’t think that should count against it. Coupled with a proper heading structure (that’ll allow JAWS to construct a document outline) it ought to be ‘better’ for all non-visual users. I include PDAs in that as well as search engine robots…
That said, when testing with screen readers, the most annoying thing for me is having to continually skip through massive navigations to get to the meat of the page because I always end up over-shooting. I tend to skip to the end of the page and then work backwards… That behaviour would be interrupted by my front-loading approach.
Hmmmm, it might be worth passing this one on to Bob Easton for discussion…
by Mike Stenhouse on July 11 2005, 18:02 #
by Mike Stenhouse on July 11 2005, 18:05 #
The elastic fantastic is a good demo also making use of unobtrusive javascript for the visuals rather than faux or other techniques. Feel free to share any of these techniques in your framework / forthcoming site :)
by Tom on August 1 2005, 21:17 #
And what is meant with sub content? Things like blog roll, ads, news ?
by beza1e1 on August 16 2005, 14:26 #
by Andrew on August 16 2005, 19:22 #
by Andrew on August 16 2005, 23:24 #
Andrew: If these were proper designs I’d have skin.css in there but they’re all dead simple so I didn’t bother. With hindsight I probably should have put one in for consistency!
by Mike Stenhouse on August 23 2005, 10:32 #
All I can say is to echo what others have said, “wow”! This is the sort of thing I might dream of undertaking but never seem to have the time, energy or skill. This is brilliant.
Thank you so much for all you have done. The thing I find even more amazing is the simple black and white design you’ve done them all in. Even that is brilliant.
Thanks once again.
Rich
by Richard Brown on August 25 2005, 09:41 #
by Mike Stenhouse on August 25 2005, 12:16 #
I got 2 questions regarding classes in tools.css:
1) What do you use replace class for in final work?
2) Can you explain further the way you used the clearfix method? You used
display:inline-block;property which is to stop IE/Mac to widen widthless floats to full width. But then you addwidth:100%;property. What is that selector* html>body .clearfixLooks like a combo of StarHtmlHack with BeNiceToOpera5?Your code differs from original method, you linked to. What’s the point?
by Greg on August 26 2005, 09:45 #
<h2 class="replace" id="some-heading">Some heading</h2>
2) * html>body .clearfix will feed the rule to IE/Mac only, since it obeys descendent selectors (way ahead of its time) but also follows the StarHtml filter, being the IE engine. It looks like the PIE article has been refined since I first grabbed the clearfix code but here’s the reasoning…
IE/Mac can’t be forced to clear with the Holly Hack – it obeys height, unlike it’s PC counterparts, so it requires a different hack. Inline-blocks apparently expand vertically to contain their floats (like table cells, if I remember rightly), but we don’t want to shrink-wrap the block or it’ll cause the contained floats to stack vertically, hence the 100% width.
Am I making sense?!
by Mike Stenhouse on August 30 2005, 08:38 #
2) I tested this selector with Win/IE and it didn’t work. That made me think of it being a Mac/IE hack. However I haven’t seen it before and I don’t have Mac to test it myslef, thus the question. Is this selector (being in fact Mac/IE hack) described somwhere in detail?
Your explanation of inline-block property seems to make sense. Again, no chance for me to test it.
Thanks for reply. Your article sped up my workflow. I was already thinking about something of that kind on my own but why not to use a proven one.
by Greg on September 1 2005, 08:31 #
I don’t have to worry too much about IE5/Mac these days but every now and again it comes in handy. I am a bit worried that a future version of IE/PC will start supporting descendant selectors but retain the * html bug so just be aware…
Glad to hear the article has been of use to you!
by Mike Stenhouse on September 5 2005, 12:06 #
* html .clearfix { /* Hides from IE-mac */ height: 1%; /* End hide from IE-mac */ }This can cause serious problems, since the page might be very high, so in IE you might suddenly have 30px gaps in there. I recommend to replace that with 1pxby Pascal Opitz on September 20 2005, 10:40 #
but i think, it can not work for all Project’s like that. When i remember how long i was trying to tell IE how to center something, when the Content is dynamic. uuuu awfull…
Ever tried to generate a dynamic CSS File ?
I’am just working on something like that, where you have a Database and choose which parts you would like to re-use for a particular page.
Still, i like that Article very much!
Cheers,
Tom
by Tom on September 22 2005, 03:50 #
by Mike Stenhouse on September 22 2005, 07:40 #
by Martin on September 23 2005, 13:09 #
Modular css and your css framework are great! But can someone help me in understanding the benefits of placing your navigation last in the mark-up?
It seams to me that being able to navigate a website is more important than eliminating the ‘skip navigation’ link. When the main nav is in the bottom of the markup, it seems to me that finding the content that one wants to read becomes really difficult. Maybe not for a blog I guess. But even in a blog there should be a good means of navigating the archived information. I feel that finding the information one looks for is the hard part about using the internet.
So I have always assumed that placing navigation items at the top of the page is the only logical way to structure ones markup. How many selections do people make before reaching a content item they want to read or hear? More than enough to make up for a “skip navigation” link IMHO.
But I would love to hear that I am wrong. Because if I am wrong, I will use your css framework and make my life easy. :-)
thanks again,
bill
by bill on October 9 2005, 14:33 #
I think that your rationale for souce code order holds very well for a landing page – where people are likely to need navigation first and foremost, but once in browsing mode a nav-at-the-top order forces either repetitive reading of the navigation or reliance on skip links. People come to websites for their content and I want to make access to that as easy as possible.
Have a read of ‘The Ideal Structure’ section of the article and this reply to Mel further up in the comments.
I’d be interested to hear what you decide to do about your source order – I’m open to suggestions too!
by Mike Stenhouse on October 10 2005, 08:19 #
Thanks for your reply!
I have read your article many times (along with it’s growing list of comments). And Mel’s comment suggests that the navigation might be better at the top because of ‘familiarness’. But I just wonder how much time is spent navigating one website and how much time is spent navigating the vast internet for meaningful content. Will users without sight find content on a web site that they want to read/hear if the navigation follows the content (even in a ‘perfect world’)? I just don’t know myself and that is the only reason I asked.
Maybe it depends on the nature of the site. Sites with a broad range of topics may benefit from a navigation-first approach. And smaller sites with a more focused subject matter might be better off with the content first.
At any rate, in the framework that I’ve made to speed up my own work (which has nothing to do with css apart from being able to slap new css files into it and linking to them in the db) I print the navigation first. Your wonderful article has made me think about turning my framework into a little tableless-layout CMS by including css files that cover the layouts you’ve mentioned in your article.
Any way it was inspiring to read and I thank you!
And you hit an important nail on the head. Clear as a bell. And I hope Im not off-topic in my questioning your markup.
I think, though, that I will probably keep the navigation at the top of the markup.
I can see. But I also don’t have a scroll-wheel on my mouse. And I would surely be put off by a site that could fit all its content on my screen in order to save me having to ever scroll down the page constantly to read it, by putting the navigation at the bottom of the page.
Hope that wasn’t too long a comment.
Have a good one,
bill
by bill on October 10 2005, 12:50 #
That’s a fair point actually, although I use the same argument to justify placing my navigation at the bottom… If someone’s on my site they probably came through Google or from an inbound link so they are likely to be after my content, not my navigation. Thinking about it, I suppose that what I’m advocating is a kind of Embrace Your Bottom for screenreaders!
I think you’re right about the nature of the site mattering though, and I like your no-mouse-wheel analogy – it’s a really interesting way of thinking of it. Anyway, it sounds like you’ve put plenty of thought into how you’re structuring your HTML and, for me anyway, that’s the most important thing.
Thanks very much for your reply – it was really interesting!
by Mike Stenhouse on October 17 2005, 10:10 #
The power of CSS is amazing. I’ve seen a few sites like this one where i’ve been blown away by what you can do. Alot of DHTML and other funkiness can be avoided if your clever with your stylesheet.
I want to manage a stick up footer on the website for IE 5.0 +. with CSS As you can see 1 on bmw.co.uk
thanks
Imran
by imran on November 2 2005, 15:16 #
I did something similar to that for a recent site using a mixture of CSS and DOM scripting: Guildhall School of Music and Drama.
The bar at the bottom is pinned there regardless of content height.
by Mike Stenhouse on November 3 2005, 06:04 #
I think you could cut down on a few “display:inline” and “text-align” declarations though ;-)
I’d say that links inside containers in these examples as well as some script to allow a switch of column length would be helpful. They could demonstrate real life behavior or bug. For example, the negative margin 3 column layout demo on ALA fails to show issues with NN6 and Opera 6.
I’ve done something a bit similar, but with fluid layouts:
Liquid Layouts
And I’ve used the negative margin technique the “other way around”:
3 column Fluid Layout
FWIW, all these solutions are hack free.
by Thierry on November 8 2005, 10:42 #
by Pascal Opitz on November 10 2005, 07:18 #
Thanks. DRE
by Andre on November 16 2005, 10:34 #
When I say hack free, I mean CSS filters and structural hack.
The 8 layouts are based on the exact same markup; check them out, you won’t find any clearing DIV in there :-)
by Thierry on November 16 2005, 23:12 #
On a sidenote: Your solution comes along with negative margins… personally I rate that as kind of a a hack. And again, what is so bad about overwriting rules with html>body? And what is the benefit of a hack-free (validating) CSS file?
by Pascal Opitz on November 21 2005, 01:34 #
Not all these solutions rely on negative margins, but I must say they are very handy when the content comes first in the markup. I don’t know why you consider them as a hack though…
Your question regarding the “be nice to Opera hack” contains my answer. I don’t like to “fork” inside a stylesheet to overwrite values.
Make it red, no make it yellow, no make is red again… That does not make sense to me (without mentioning that most CSS filters rely on parsing bugs).
IMHO, many more people would use CSS layouts today if – instead of wasting time “talking hacks” – discussions were about how elements flow and how to construct the box to avoid box model issues…
;-)
by Thierry on November 22 2005, 00:18 #
Negative margins are as much a hack as using selectors for overwriting values. They’re not really invalid, but they’re not intended to be used for this kindo stuff if U ask me. Especially if you consider that reading “margin-left: -200px” is as confusing as ’”red, ehrm… no, green … no red”, to me at least.
And sure, I don’t LIKE to apply hacks like StarHtml or html>body, but then again if it saves me the clearing divs you’re using in your 3-col layout I’ll do it, sinde it’ll keep presentational stuff where it belongs: inside of the CSS.
Same goes for hacks in favour of Mac IE compatibility or any backwards compatible rendering.
You might argue that IF everything worked fine everyone would … but that is not much more but bla bla since:
a) various browsers have bugs that need to be dealt with
b) you have to deal with designers that have their own ideas about how the site should look like, so you cannot design the layout around the markup
c) you need as much research to get a good layout going hack-free and browser compatible as you would need to apply clearfix and such things. and they don’t make your html any better.
I acknowledge what you’re trying to say, fo the the reasons above I tend to dismiss the last point you were trying to argue.
by Pascal Opitz on November 23 2005, 08:44 #
by eric on November 28 2005, 16:25 #
You mentionned structural hacks in a previous comment, and you use it again here as an “excuse” for using CSS filters, but my layouts [1] [2] do not use presentational hacks.
And IMHO, browsers bugs should not be an excuse either [3].
;-)
[1] no hacks
[2] still no hacks
[3] still good browsers support
by Thierry on November 29 2005, 21:59 #
Thanks for your input.
by Pascal Opitz on November 30 2005, 06:38 #
by Brian on December 1 2005, 11:29 #
by Lance Fisher on January 20 2006, 13:42 #
By the way, I’m trying unsuccessfuly to make the design fluid. Right now I work on the 3col with horizontal nav design.
Do you have any ideas?
Thanks!
Drew
by Drew on January 11 2006, 08:25 #
Ive noticed this in FF and IE it rarely happens and all you have to do is reload the page and the rest will get there but it does happen – so on that rare occasion someone will end up with a shocker page.
Is this a problem with @import? or the browser skipping over files to speedup loading?
Has anyone else come across this problem? Id rather not have to resort to putting all the css styles in 1 file.
by Rhys on January 22 2006, 18:05 #
Do you have a URL? I’d be interested to see it happen…
by Mike Stenhouse on January 23 2006, 07:57 #
by Boda on March 4 2006, 16:59 #
http://raibledesigns.com/page/rd?entry=css_framework_design_contest
by Matt Raible on March 3 2006, 19:26 #
by foddski on April 11 2006, 06:49 #
Great work! Just a question, I’m playing with “Horizontal navigation with local navigation and one column of content” and I saw that the sub content is not displayed, but it’s in the html file and css (display: none;). If I delete it (or simply I leave it empty) I experience many problems, expecially with IE, for example the horizontal navigation disappear, or passing the mouse over one of the link in the left menu reduces the page, moving the footer to the top. Anyway with firefox and opera there are no problem, any idea how to solve it?
Best regards,
ogivio
by ogivio on April 14 2006, 04:53 #
Anyways, I’m trying to revisit oldies-but-goodies-links in terms of CSS templates/framework. Seems that most of the ones I’ve bookmarked are about a year old, like this one. So, I’m just wondering if there has been any major changes etc. to the current findings in Web Design/Development and current new technology?
PS. I wonder if anyone has tried the framework w/ “current” offerings such as OTL’s?
by Sherwin Techico on April 13 2006, 04:20 #
Ogivio: Not seen that problem and I’ve been using this framework on projects for a year and a half now… Do you have a url I can look at?
by Mike Stenhouse on April 18 2006, 12:36 #
and another page with the sub part removed from the source http://www.soundsurgeons.it/hide/new/nuovo_sub.html with IE6 I can see no horizontal bar, but as I said before there are no problems with firefox or opera.
Thank you again Mike!
Ogivio
by ogivio on April 19 2006, 05:59 #
The project is young and needs work to correct remaining inconsistencies accross browsers, so I won’t recommend to use it for serious projects, but feel to test it, and use it if you want. Please drop me a line if you have comments or suggestions.
here is the url:
http://www.wymstyle.org
by Daniel R on April 21 2006, 03:41 #
Have a play with this:
http://positioniseverything.net/articles/jello.html
Still has a bit of my original negative margins trick in there from way back in 2002 :-)
Douglas
by Douglas Livingstone on April 19 2006, 21:16 #
I’ll definitely drop you a note before redistributing anything…
by Gabe da Silveira on April 25 2006, 15:24 #
I was struggling with a similar idea to have a servlet-based code to populate pages as required.
I like the idea of using the single column with the local-list and switch as required to 2-column and/or a single page as needed by the application.
I have problems with IE6; fireFox is fine.
The problems seem related to the div id=”sub”, unused in the layout-navtop-localleft.css that I am using to start the application.
I have tried div id=”sub” class=”clearfix” and div class=”wrapper” without luck.
Have a look at the referenced url.
IE6 mangles or does not show the nav-row as well as repeting -entries in
IE 6.0.2900.2180
fireFox: 1.5.0.3
http://142.46.207.217/~zarama
by zarama on May 9 2006, 13:42 #
I too am having problems with IE6 not showing the nav row. Firefox is fine. I am using layout-navtop-subright.css
http://peteandtari.petegeniella.com
by pete g on May 11 2006, 13:54 #
by ogivio on April 20 2006, 11:53 #
I’m no programmer, so I apologize for this lame speculation. Each $page_layout could be associated with a multi-dimensional array, the outer array being the stacking order of named $yui_rows (of which there seem to be 10 flavours), and the inner array being the content file to include in each row’s divs.
So the pseudocode arrays look like:
default = (
1/1 row => (banner),
1/1 row => (header),
1/4 3/4 row => (nav, content),
1/1 row => (footer)
);
home = (
1/1 row => (banner),
1/1 row => (header),
1/4 1/2 1/4 row => (nav, content, adverts),
1/1 row => (footer)
);
etc.
So all HTML structure is contained within ten PHP files, one for each flavour of YUI row, and each row’s divs include a call to the function. You just assemble them like lego.
by jeffo on May 21 2006, 15:47 #
I hope this can make it to some CMS engines soon.
I bloged about it here
by Wiktor Schmidt on June 27 2006, 06:05 #
by laryk on September 12 2006, 08:25 #
The interesting thing, it only happens in Firefox, I’m using 1.5.0.4.
This is a great idea, I use CMS made simple and these could be put up as a way to start their designs for those that are new to HTML/CSS
by mark on July 21 2006, 13:08 #
by Mike Stenhouse on July 21 2006, 13:34 #
by graystatic on March 31 2007, 21:20 #
great work on this “holy grail” of a css framework!
by james wilson on March 29 2007, 15:42 #
If you want another similar examples, get it:
http://www.manuelrecena.com/docs/estandaresweb_0609_ejemplos.zip
Regards.
by Manuel J. Recena Soto on October 17 2006, 08:58 #
That’s really good of you to publish the framework for us newbies, is there any licensing issues for re-working your framework…is there any license at all?
Thanks again,
Bert
by Bert on October 23 2006, 14:31 #
by Mike Stenhouse on October 23 2006, 14:35 #
e.g.
<div id=”extra1”> </div>
<div id=”extra2”> </div>
by keith on January 4 2007, 13:04 #
by Mike Stenhouse on January 4 2007, 13:25 #
by 2Dmedia Web Design (Sam) on November 29 2006, 13:50 #
the time to create a layout is now reduced to minutes :)
Best,
Alex
by Alex on July 3 2007, 12:05 #
Must confess, however, that I do sometimes hack the accessibility issue by using structured tables (with summary tags) and then just using <div> to float content to the top in the code, so that screen readers get content before navigation.
If anyone fancies berating me for this workaround, please feel free, as I know I should be sticking to the more user-friendly and accessible website design methodology demonstrated here.
I also have to confess that, although I keep templates handy, I do like coding on the fly. Handcoding is a really rewarding way of designing webpages, if only Dreamweaver and Photoshop junkies would give it a chance. It provides so much more control over important issues such as search engine friendly design, web accessibility and so forth.
by Chris Boswell (Leeds UK) on August 13 2007, 12:42 #
Thx
by Ami Porat on December 16 2007, 10:51 #
by Mike Stenhouse on December 16 2007, 13:06 #
After the extract command I get an error message: “the file exists already, choose another name” [there are no such files at the same location] I get the same error no matter what other file name or location I specify. After this process, I get two empty folders CSS and I. What gives?
Thanks
by Ami Porat on December 17 2007, 01:46 #
by Large balloon guy on January 17 2008, 16:51 #
Thanks,
My Design Buddy – Katy, Texas
by Buddy on July 30 2007, 10:07 #
by Tercüme bürosu on January 16 2008, 04:08 #
by Edward V on June 19 2008, 13:34 #
by Magicien on November 11 2008, 18:12 #
by Jess on October 29 2008, 20:49 #
by Gary on December 28 2008, 06:49 #