forked from DerOperator/PositionIsEverything
-
Notifications
You must be signed in to change notification settings - Fork 0
/
piefecta-rigid.html
executable file
·588 lines (451 loc) · 20.4 KB
/
piefecta-rigid.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Piefecta - A superb 3-col tableless layout</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta name="mssmarttagspreventparsing" content="true" />
<meta name="keywords" content="demo,test,big john,big,john,position is everything,position,css,html,bug,bugs,bug fix" />
<meta name="description" content="Advanced CSS demos and bug reports" />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="SHORTCUT ICON" href="favicon.ico" />
<script type="text/javascript">if (window.self != window.top) window.top.location = window.self.location; </script>
<style type="text/css">
html, body {margin: 0; padding: 0; border: 0;}
body {
color: #000;
background: #cce;
font-family: georgia, "times new roman", sans-serif;
font-size: 90%;
font-weight: bold;
text-align: center;
margin: 30px 0;
}
p {margin: 6px 0; padding: 0 6px;}
h2 {
font-size: 1.4em;
text-align: center;
padding: 10px 0;
margin: 0;
border: 3px solid #a8b9da;
border-color: #cde #89a #789 #bccdef;
background: #abd;
}
h3 {font-size: 1.2em; margin: 20px 10px 5px;}
.clear { clear: both; }
a {text-decoration: underline; font-weight: bold; color: #000;}
.alignright {margin-top: 0; text-align: right; clear: both;}
.small {font-size: .9em;}
.wide {
background: #ffc url(images/stripes6.gif); /* header and footer colours */
width: 100%;
font-size: 1.6em;
font-weight: bold;
color: #ffa;
text-align: center;
}
.wide p {margin: 0; padding: 5px; position: relative;}
.top {border-bottom: 1px solid #000;}
.top a {position: absolute; right: 20px; text-align: right; font-weight: bold; font-size: .7em; color: #fff;}
.bottom {border-top: 1px solid #000; position: relative;}
.testfloat {width: 50px; border: 2px solid #f90; background: #ffd; font-size: .7em;}
.to-right {float: right;}
.to-left {float: left;}
.ap-test {
position: absolute;
top: -102px;
font-size: .6em;
width: 150px;
height: 100px;
border-top: 1px solid #000;
background: #5b5;
color: yellow;
}
/* \*/
* html .ap-test {
top: -101px;
t\op: -102px;
}
/* */
.ap-left {left: 0;}
.ap-right {right: 0;}
/*XXXXXXXXXXXXXXXXX Primary layout rules XXXXXXXXXXXXXXXX*/
/********************************************************************************
To adjust the side col widths, or the vertical col dividers, a certain set of values must be changed
all at the same time and by exact amounts or problems will result. Each of these group's member values
have been marked off with comments that start with "Critical...". For example, if the left col width needs
to be changed then all the values marked "Critical left col dimension value" MUST have their pixel values
altered by the same amount. Certain of these left col width values are marked "(moves inversly)", and
these get changed by the same pixel amount but inversly to the other values. So if margin-left on .outer
is increased by 10px, then the width of .outer must decrease by 10px, and so on.
To change the width of the entire layout, .wrapper, .outer, .float-wrap, and .center all get changed together,
and only after that is it safe to change col or divider widths. Remember, even one small mistake will degrade or
even break the layout, so be very careful! it's possible to "loosen" the layout so small errors aren't so messy,
but then it becomes hard to finely control text spacing.
For spacing within the cols, it's best to apply margins on content elements inserted into the cols,
because padding directly on those col elements will change their widths, breaking the layout.
Certain hiding hacks have been used extensively in this layout, so here is a quick explaination of them.
The Tan hack:
* html .anyelement {rules read only by IE/Win and IE/Mac}
The Mac-hack: (first the active comment you are reading now must be closed...) */
/* \*/
/* */
/*...Back in comment mode now. Anything between those two comment lines will be hidden from
IE/Mac. Don't use any comments within this hack or it will close prematurely and IE/Mac will begin
reading before it should.
The above two hacks are combined so as to feed rules only to IE/Win. Proper use of backslash escape
characters inside property names used in the Holly hack can further segregate rules to be read by only
IE6 from rules for IE5.x/Win.
These hiding hacks, along with several other fixes, make possible this formerly impossible layout.
It is highly unlikely that new browsers will have any problem with these valid hiding hacks, and
Microsoft does not plan any browser changes soon that would alter the proper operation of the layout.
********************************************************************************/
.wrapper {
margin: 0 auto;
width: 780px;
text-align: left;
background: url(images/pr-background.jpg) repeat-y;
border: 1px solid #000;
}
* html .wrapper { /*** IE5.x/win box model fix ***/
width: 782px;
wid\th: 780px;
}
.outer {
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
margin-left: 150px; /*** Critical left col dimension value ***/
width: 478px; /*** Critical left and right col/divider dimension value (moves inversly) ***/
background: #fff url(images/brownswirl.gif); /*** Sets background of center col***/
border-left: 1px solid #000; /*** Critical left divider dimension value ***/
border-right: 1px solid #000; /*** Critical right divider dimension value ***/
}
* html .outer { /*** IE5.x/win box model fix ***/
width: 480px; /*** Critical left and right col/divider dimension value (moves inversly) ***/
wid\th: 478px; /*** Critical left and right col/divider dimension value (moves inversly) ***/
}
.float-wrap {
float: left;
width: 478px; /*** Critical left and right col/divider dimension value (moves inversly) ***/
margin-right: -1px; /*** Static fix ***/
}
.center {
float: right;
width: 478px; /*** Critical left and right col/divider dimension value (moves inversly) ***/
margin-bottom: -1px; /*** Fixes a variance in IE/win for the green AP bottom boxes ***/
/* \*/
margin-left: -1px;
/* Hidden from IE-mac */
}
.left {
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
width: 152px; /*** Critical left col/divider dimension value ***/
margin-left: -151px; /*** Critical left col/divider dimension value ***/
}
* html .left {
float:left;
}
*>html .left {width:151px;} /*** Fix only for IE/Mac ***/
.container-left {
width: 150px; /*** Critical left col dimension value ***/
padding-bottom: 110px; /*** To keep content from going underneath the AP bottom boxes ***/
}
.right {
float: left;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
width: 152px; /*** Critical right col/divider dimension value ***/
margin-right: -150px; /*** Critical right col/divider dimension value ***/
margin-left: -1px; /*** Static fix ***/
}
/* \*/
* html .right {
margin-left: 0px;
margin-right: -500px;
mar\gin-right: -152px;
}
/* */
/*** These commented-out rules below are there to explain the "Critical" info
for the rules above, because comments must not appear within the Mac-hack.
The "rules" below are not active, they are just for teaching purposes. ***/
/*
* html .right {
margin-left: 0px; *** Critical right divider dimension value ***
margin-right: -500px; *** IE5.x/win fix, must be above a critical number, but very high values appear okay ***
mar\gin-right: -152px; *** Critical right col/divider dimension value ***
}
*/
.container-right {
/* \*/width: 150px;/* Hidden from IE-Mac */ /*** Critical right col dimension value ***/
margin-left: 3px; /*** Critical right divider dimension value ***/
padding-bottom: 110px; /*** To keep content from going underneath the AP bottom boxes ***/
}
/* \*/
* html .container-right {
fl\oat: right;
margin-left: 2px;
mar\gin-left: 0px;
}
/*** Static fixes ***/
/*** Below is the Holly hack, and if IE/Win shows bugs it's a good idea to apply this hack to
different elements and see if that fixes the problem. Sometimes it may be necessary
to use "position: relative;" on certain elements, but it's hard to tell in advance which
elements will need such fixes. Here it prevents IE5/Win from clipping the left ends
of the headings. ***/
/* \*/
* html h2 {height: 1%;}
/* */
/*** This is a fix for IE5/Win at the largest text size setting. ***/
/* \*/
* html .left {margin-right: -3px;}
/* */
.italics-test, .italics-test-side {
font-style: italic;
text-align: justify;
background: #ccd;
border: 1px solid red;
border-width: 1px 0;
}
/*** The following fixes prevent justified italic text from destroying the layout in IE/win.
The problem is that those properties together make IE force the container wider,
which in this type of floated layout causes a float drop. Pre-IE6 gets "width: 100%"
and "overflow: hidden", while IE6 gets "width: auto" and "overflow: visible, which
is the default, but explicitly stating it seems to keep IE6 happy. IE6 also needs
to see the "height: 1%" to give it some kind of box dimension. Browser coddling
we call it. Finally, Bruno found that "word-wrap: break-word;" disarranged the
justified text in IE5.5 and 6, so it is defaulted to "normal" for this text.
If you don't need justified and italicized text then forget all these fixes ***/
/* \*/
* html .italics-test, * html .italics-test-side {
overflow: hidden;
width: 100%;
o\verflow: visible;
w\idth: auto;
hei\ght: 1px;
}
/* */
/*** All the IE fixes that are inside separate "Mac-hacks" may be grouped within
just one Mac-hack for convenience if desired. However, each fix must come
later than the rule it is fixing or the fix itself will be overridden. ***/
</style>
<!--[if IE]>
<style type="text/css">
/*** The rule below prevents long urls from widening floated cols and breaking the layout
in IE. It is not valid, but if placed within a "Conditional comment" it will be hidden
from all user agents other than IE/Win, and thus validate. This fix fails in IE5/Win.
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp ***/
.outer {word-wrap: break-word;}
</style>
<![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/init.js"></script>
</head>
<body>
<!--XXXXX
Based on a 3-col method by Douglas Livingstone, and the Source Ordered Cols method.
XXXX-->
<div class="wrapper">
<div class="wide top">
<p>
Piefecta
<a href="index-2.html"><strong>Return to p.i.e.</strong></a>
</p>
</div>
<div class="outer">
<div class="float-wrap">
<div class="center">
<h2>First in source</h2>
<p style="font-weight: normal; margin: 10px;border: 1px solid #900; background: white; padding: 15px;">
<strong>Important new information as of July 2008: </strong>
IE bugs discussed in this obsolete document have been found to be associated with
<a href="http://www.satzansatz.de/cssd/onhavinglayout.html"><strong>hasLayout</strong></a>.
Knowledge of this MS concept is essential if you want to make IE behave well
with advanced CSS using floats.
Also see this <a href="articles/haslayout.html"><strong>basic method</strong></a> for specific ways to
combat the IE bugs on your pages.
</p>
<p>
This column is first in the source, being a right float within a left-floated wrapper. The second col
is floated left in that same wrapper, and following the wrapper is the left floated right col. (confusing, ain't it?)
</p>
<p>
The headings and italicized paragraphs are "widthless" and have 1px red borders to show any width problems
in the columns.
</p>
<h3>Some Of The Features</h3>
<img src="images/beach.jpg" style="float: right; margin: 10px 0 8px 20px; display: inline; width: 301px; height: 405px;"
alt="This image demonstrates how floated items are no problem in the layout"
title="This image demonstrates how floated items are no problem in the layout" />
<p>
Any col may be longest without problems, thanks to the fact that all the cols are
floated and "within" a single container. The notorious problems that IE has with
floats are negated because all the cols are floats, leaving no normal elements to
interact with them and induce IE bugs. Woohoo!
</p>
<p>
A number of bug fixes have been used to make this design work well in different browsers,
particularly IE/Win. Most of these can be applied in the stylesheet and forgotten, but several
involve tiny dimensional differences and need to be changed when alterations are desired
for the layout. Detailed instructions on this subject are to be found in the source stylesheet.
</p>
<p class="italics-test">
Italics can be used in this design, but when text is "justified" as well, it seems to make IE pre-calculate
box widths and then calculate the width of the italics after that, forcing the box bigger than the stated
width. In a float layout like this, such stupidity leads to display flaws and even destructive float dropping,
so if these two properties are used in the same paragraph a couple of precautions must be used to avoid
IE text buggery.
</p>
<p class="italics-test">
First, using the Holly hack to exclude all but IE/Win, apply to the paragraph a fairly large negative right margin.
The value can be too small, but apparently can never be too big to cause harm. This layout uses -30px right margin.
Then pixel size the width of the paragraph or other element to the widest width you can without float
dropping at the largest text size in IE. You can determine this width by trial and error in a few minutes.
Study the source to see exactly how it's done.
Remember, if both text properties are used on even <em>one word</em> it may cause trouble unless the fix is used.
</p>
<h3>Piefecta's Dirty Little Secret</h3>
<p>
This design employs a proprietary IE property that forces a spaceless url or word to break
before it cause IE to enlarge the floated box and break the layout. If the CSS must validate,
place the "word-wrap" rule in a "conditional comment" (as in this demo). It's also proprietary, but validatible.
</p>
<p>
Note for IE5/Win: This fix fails in IE5/Win, alas. Also note that use of "word-wrap" in conjunction with justified
text prevents IE5.5 and 6 from lining up the text on the right edge. That property has been set to "normal"
in the italics test boxes to keep the text justified on the right.
</p>
<h3>Update July 4th, 2008</h3>
<p>
The W3C has decided to adopt the <strong>word-wrap</strong> CSS property into the CSS 3 specification.
(the W3C was going to change MS's syntax at first, but someone gave them all "dope-slaps" and they
came to their senses, thankfully) Word-wrap is already supported by <strong>Safari 3/Win</strong>,
<strong>Opera 9</strong>, and of course <strong>IE</strong>. Only <strong>Firefox 3</strong>
does not yet support this vital CSS tool. C'mon guys, get with it!
</p>
<p>
Since the W3C has endorsed word-wrap, we are free to use it, even tho it may not
pass the validator for a while.
</p>
<img src="images/frog.gif" style="float: right; margin: 5em 15px 0 0; display: inline; width: 129px; height: 114px;"
alt="This image demonstrates how floated items are no problem in the layout" />
<p style="margin: 30px 152px 0 0;">
Mucho thanks to
<a href="http://www.neuance.net/"><strong>Douglas Livingstone</strong></a>,
who developed the brilliant
<a href="http://www.redmelon.net/tstme/3cols2/"><strong>Negative margined floats</strong></a>
method at the heart of this design. Thanks, Douglas! Next step is to add a "sticky footer" as shown by
<a href="http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm">Paul O'Brian</a>.
</p>
<p style="margin-right: 152px;">
The Master of the Mac, <a href="http://www.l-c-n.com/IE5tests/">Philippe Wittenbergh</a>,
came thru with crucial Mac fixes, as usual, along with
<a href="http://www.sperling.com/">Tedd Sperling</a> on cleanup detail.
<a href="http://65.109.140.59/">Bruno Fassino's</a> work on the text fixes for IE
came along at just the right time. This layout is
truly the result of the efforts of many coders over a long period. Thanks people.
</p>
<h3><em style="color: #c00; font-size: 1.2em; font-family: Verdana, sans-serif;">Special Announcement!</em></h3>
<p>
Now, thanks to the hard work of Trevor, aka 'ClevaTreva', you may easily have a
<a style="color: #228;" href="articles/pie-maker/pagemaker_2_9_home.html">coded version of the Piefecta
layout prepared for you, <em>automagically!</em></a> This unsung script/css genius has crunched the
incredibly complex rules of this design down into a tool so cool that all primary layout mods are
a "no-brainer". Woohoo!
</p>
<br />
<p class="small alignright">
<a href="design/index.html"
title=" Big John's Advanced CSS Design "><strong>Big John Design</strong></a>
<a href="https://github.com/DerOperator/PositionIsEverything/issues">Contact Us</a>
©positioniseverything.net<br />
Last updated: September 24, 2009<br />
Created Feburary 19, 2004
</p>
</div> <!-- end centered div -->
<div class="left">
<div class="container-left">
<h2>Second in <br />source</h2>
<div class="testfloat to-left">
Here is a left float test box.
</div>
<p>
This column is floated and also negatively margined to the left, so it is "pulled" out of its
container except for a single pixel that is kept within the container.
</p>
<p style="background: #edc; font-style: normal; border: 1px solid black; border-width: 1px 0; font-weight: normal; padding: 10px 5px;">
Check out these
<a href="http://www.everheldwebgroup.com/tek/everheld_layout.html">variant layouts</a> of the Piefecta added Sep/09,
courtesy of <a href="http://www.everheldwebgroup.com/">John Harrington</a>.
Thanks John!
</p>
<div class="testfloat to-right">
Here is a right float test box.
</div>
<p>
Tweaking the cols can be very confusing due the interlocked nature of the layout, but colored backgrounds
on all divs can greatly help this process. Using borders to mark the divs will make them wider and cause float dropping.
</p>
<p>
<a href="piefecta-rigid-left.html">Long left col demo</a>
</p>
</div>
</div> <!-- end left div -->
</div>
<div class="right">
<div class="container-right">
<h2>Third in <br />source</h2>
<div class="testfloat to-right">
Here is a right float test box.
</div>
<p>
This column is floated, and then negatively margined to the right, pulling it nearly outside its container just like the left column.
</p>
<p class="italics-test-side">
Italics can be justified as long as the paragraph gets the proper IE bug fixing, as described in the center col.
This rigid layout makes such pixel control easy.
</p>
<p>
The source contains a great deal of commentary on the code used in this layout. It's not for the squeamish, but
even semi-skilled CSS coders will be able to wrangle this design to meet most site requirements.
</p>
<div class="testfloat to-left">
Here is a left float test box.
</div>
<p>
This layout is known to work in: IE5/Win and up, Opera 6-7, Mozilla for both Win and Mac, IE/Mac, Safari, and Omniweb 5.
</p>
<p>
<a href="piefecta-rigid-right.html">Long right col demo</a>
</p>
</div>
</div> <!-- end right div -->
<br class="clear" /> <!-- using a <br /> here is less buggy than other choices -->
</div>
<div class="wide bottom clear">
<p><em>Ribbet!</em></p>
<div class="ap-test ap-left">
<p>
Here is an "absolute" box, which stays at the col bottom.
</p>
</div>
<div class="ap-test ap-right">
<p>
AP again. The side cols have bottom padding to avoid these boxes.
</p>
</div>
</div>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-39235363-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>