This text was prompted by the rising crop of CSS “suggestions and tips” articles which have surfaced within the final two years. Typical of those are the three column design making use of left and proper fastened columns hanging on their margins; and the usage of @import, as an alternative of JavaScript, to feed applicable model sheets to otherwise enabled browsers.
Article Continues Under
These concepts are very cool and their authors ought to rightly be heaped with reward, however I can’t assist feeling we’ve been right here earlier than.
Keep in mind if you discovered tips on how to make a desk of photographs show with out the hole? Or how about if you labored out the browser’s desk rendering algorithm and began utilizing “educator” rows to ensure right show? Much more sinful, do you keep in mind discovering these “hidden” (non-standard) attributes like marginwidth?
As internet designers, we’re naturally drawn to tips, gimmicks, and workarounds. We have to hold our consideration on what we are attempting to attain in future.
Actual world issues#section2
- I need my designers to make use of CSS. I don’t need them to cover behind WYSIWYG functions, I need them to really perceive what they’re doing.
- I need common, versatile layouts. Ideally, a line of textual content needs to be so long as sure variety of characters, not some arbitrary pixel measure. I need my designers to create grids which are each clever and delightful. I need my shopper’s info to be as helpful on a 160×160 PDA display screen as it’s on a 1024×768 PC monitor.
- I would like the group to spend much less time on CSS hacking and extra time on direct design implementation.
- I would like flexibility in grid design. If the idea suggests a six-column grid, then I get a six-column grid. Ditto if it must be an eight column part on high of a 4 column part.
Setting sensible restrictions#section3
In trying to find probably the most sensible grid-building method, I’ve imposed some restrictions on myself. These are to do with defining the practicality of the answer for my chosen atmosphere (the design studio) and the individuals who will use and develop these strategies (Dreamweaver-loving designers).
- Some browsers perceive the
@importdirective however not the field mannequin (iCab specifically is a unbelievable browser in all however CSS2) so ideally,@importhacks shouldn’t be used. - If there should be filtering to alternate model sheets (usually unavoidable) then they need to be as related to one another in construction as potential. Particularly, if properties are utilized to IDs then the identical ID selector ought to seem in all of the alternate model sheets to make altering/creating the grid simpler for designers.
- Once more within the curiosity of designer-friendliness, each field within the grid needs to be explicitly named, to permit the making use of of typographical or border results with out having so as to add a selector.
I’d prefer to recommend a few design strategies that go a bit means towards satisfying the necessities listed above. Consider these as a bridge to that time two years from now when all designers are educated to suppose natively in CSS.
For starters, right here is how a designer describes a 3 half multi column format:
content material stuff right here
content material stuff right here
content material stuff right here
content material stuff right here
Within the designer’s head, he has simply created the XHTML construction for a one-column high (information introduction?) and a four-column (important tales?) backside part with a one-column footer. He desires the center and backside sections to fortunately float up and down the web page in response to the person’s font measurement choice with none sections overlapping.
Easy sufficient, actually; now why should he go any additional?
He ought to have the ability to add any variety of columns with out the web page falling aside and with out having to undergo severe brainy positional coding.
One other factor—it is sensible to write down your DIV construction within the order that you just intend the reader to learn it, not some back-to-front factor to accommodate a bizarre backwards-compatibility glitch. The thought is to make creating structured format so simple as potential.
Absolute v. relative positioning#section5
So far as I can inform, there are two methods to do that. Each make use of the fundamental “absolute” and “relative” positioning attributes. The place lots of people get this incorrect is that the CSS Field Mannequin defines a place:absolute block as absolute relative to its containing block, and never relative to the web page or window.
In our instance, which means a set of 4 completely positioned DIVs can line up inside a container DIV outlined as relative, and nonetheless float up and down on the web page in response to font-size modifications — all of the whereas retaining their place in relation to one another. Not solely that, the format holds collectively whatever the variety of columns.
In idea, we’re accomplished. As ever in internet design there must be a bug and a few hacking in response. I define two strategies to implement this grid beneath. Neither is ideal. One makes use of JavaScript to manually pressure a mum or dad DIV to inherit its baby’s properties (extra later); the opposite has the best potential CSS definition, however requires a sniff to ship IE5/Mac a distinct model sheet.
Our first technique is pure CSS and assumes that the designer or web site editor has deliberate a component of copyfitting into the format. In sensible phrases, this would possibly imply understanding that the “Weblog” part in the midst of the web page is all the time going to be longer than the nav on the left — not an unreasonable request, in my ebook.
Listed below are the principle containers outlined:
#top-section {
place:relative;
left:0;
high:0;
}
#mid-section {
place:relative;
left:0;
high:0;
}
#bottom-section {
place:relative;
left:0;
high:0;
}
Nothing uncommon at this level, besides these of you who’re acquainted with absolutely the/relative property may have labored out that these containers is not going to develop when full of absolute DIVs.
For these sections to develop — for “mid-col-1” to begin simply beneath “top-col-1” and above “bottom-col-1” — the three container DIVs should both comprise relative DIVs or their top should be calculated and utilized by hand.
On this technique, the design says that the biggest column within the center part is “mid-col-2” so we set mid-col-1,3 and 4 to absolute, and mid-col-2 to relative. High and backside sections comprise one relative DIV every, so no drawback there. That is what the model sheet seems to be like:
#top-col-1 {
place:relative;
padding-left:20%;
padding-right:10px;
}
#mid-col-1 {
place:absolute;
high:0;
left:0;
width:20%;
}
#mid-col-2 {
place:relative;
high:0;
left:20%;
width:40%;
}
#mid-col-3 {
place:absolute;
high:0;
left:60%;
width:20%;
}
#mid-col-4 {
place:absolute;
high:0;
left:80%;
width:20%;
}
#bottom-col-1 {
place:relative;
padding-left:20%;
padding-right:10px;
}
This works nicely in most requirements compliant browsers, however not in IE5 Macintosh Version, which is the browser I exploit day-after-day.
The bug has one thing to do with the calculation of width percentages in a relative container. Should you set mid-col-2 to “absolute,” the issue goes away.
Technique 2: Passing the peak of an absolute DIV to its relative mum or dad#section7
Should you select to go along with all columns set to absolute, now you may have the issue of “bottom-section” overwriting “mid-section”.
The workaround I’m at present enjoying with includes a small script. (It’s at present on the clunky facet, so for now I’m utilizing the CSS-only technique above.) The trick is to make use of the onload occasion handler within the <physique> tag to set off a bit script that reads the peak of “mid-col-2” and passes it to “mid-section.” This forces “bottom-section” to begin additional down the web page the place it’s speculated to.
The next scripting is naked minimal. (It could be extra elegant to have a script that walks the doc’s DOM tree, making use of itself to each container of a sure sort. On this means you would possibly move the peak of the longest column as an alternative of arbitrarily passing solely “mid-col-2” and you possibly can carry out the switch to any variety of relative container DIVs.) If a intelligent JavaScripter desires to complete the job, I’d be obliged. In the intervening time, right here’s the little hack:
perform inherit(objidParent,objidChild,objidGrandchild) {
if (doc.layers) {
alert('sorry, no fairly layouts for netscape 4');
}
else if (doc.getElementById) {
Dad or mum = doc.getElementById(objidParent);
Youngster = doc.getElementById(objidChild);
Grandchild = doc.getElementById(objidGrandchild);Dad or mum.model.top = Youngster.offsetHeight + 'px';
Grandchild.model.show = 'block';return true
}
}
With this technique, “bottom-section” is at first invisible to forestall slower machines from displaying the overlapping DIVs:
#bottom-section {
place:relative;
left:0;
high:0;
show:none;
}
After assigning the peak of the kid to the mum or dad, the script units the show attribute to “block” — finishing the format.
You would additional refine this by calling the script each time you run
“styleswitcher” to maintain the footer from dropping its place on utility of the brand new model sheet.
I needed to attain a grid system that will let my designers transfer extra rapidly and so produce more energizing work. In the end, the one objective of a grid system is to be damaged. As we give you these internet design concepts, we have a tendency to repeat one another and every thing tends to look the identical. That is my important drawback with Flash: the typographic animation routines are so cool, all people makes use of them.
You’ll be able to see a functioning instance of this grid system on my internet log donkeyontheedge.com, and sure, I assume it does kind of appear like all people else’s.
