Well, I've had fun writing this code and trying to think of a few layout ideas. I put this code to use for one site so far; I hope that it will be useful beyond that. There are certainly more attractive layout schemes, I'm no designer, but I think these layouts have potential for functional sites. If you have any comments, bug reports, browser compatibility information, or suggestions please send me an email.
Joseph Hermens
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /* To get around the different ways that padding is treated by browsers, elements are given margins rather than giving padding to the main layout elements */ div.layout_div div { margin:5px; } div.layout_div p { margin:15px 10px 15px 10px; width:700px; } div.layout_div ul { width:670px; list-style:disc; } div.layout_div h2, div.layout_div h3 { margin:10px; } div#header_div h2 { margin:10px; } div#link_div h3 { margin:10px 0px 5px 4px; } div#link_div ul { margin:0; padding:0; width:100%; overflow:hidden; } div#link_div ul li { margin:0; padding:0; white-space:nowrap; } div#link_div ul a { margin:0; padding:2px 4px; text-decoration:none; color:#000; display:block; } div#link_div ul a.current, div#link_div ul a:hover { background-color:#FFF; } div#footer_div div { margin:2px 6px; } /* shows next and previous links */ div.links_div { text-align:center; width:600px; } div.links_div a { margin:0px 5px; font-weight:bold; } |
| 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 | /* comment */ div.code_div { margin:10px; border:dashed 1px #DDD; padding:10px; white-space:pre; font-family:"Courier New", Courier, monospace; } table.code_table { margin:10px; border:dashed 1px #DDD; } table.code_table td { padding:2px 5px; vertical-align:top; white-space:pre; font-family:"Courier New", Courier, monospace; font-size:.8em; } table.code_table td.lines { border-right:dashed 1px #DDD; } table.code_table tfoot td { color:#999; } /* style sheet elements, span classes and custom elements */ span.ss, ss { color:#060; } /* stylesheet string */ span.sb, sb { color:#F00; font-weight:bold; } /* block start and end */ span.se, se { color:#000; } /* selector */ span.st, st { color:#F0F; font-weight:bold; } /* type . # : > */ span.sp, sp { color:#009; } /* property */ span.sv, sv { color:#00F; } /* value */ span.sn, sn { color:#F00; } /* number type */ span.sc, sc { color:#999; } /* comment */ /* syntax highlighting for javascript, span classes and custom elements */ span.jk, jk { color:#009; font-weight:bold; } /* javascript keyword */ span.ck, ck { color:#909; } /* client keyword */ span.dk, dk { color:#19F; } /* native keyword */ span.nk, nk { color:#099; } /* native keyword */ span.jc, jc { color:#999; } /* comment */ span.je, je { color:#990; } /* event */ span.jf, jf { font-weight:bold; } /* function */ span.jm, jm { color:#060; font-weight:bold; } /* regex modifiers */ span.jn, jn { color:#F00; } /* number */ span.jr, jr { color:#060; } /* regex */ span.js, js { color:#00F; } /* javascript string */ /* html style, span classes and custom elements */ span.ht, ht { color:#009; font-weight:bold; } /* html tag */ span.hp, hp { color:#009; } /* html properties */ span.hl, hl { color:#F0F; } /* html link */ span.hy, hy { color:#909; } /* html style */ span.hc, hc { color:#999; } /* html comment */ span.hv, hv { color:#060; } /* html value string */ /* script tags */ span.hs .ht, hs ht { color:#900; font-weight:bold; } /* html script tag */ span.hs .hp, hs hp { color:#900; } /* html script property */ span.hs .hv, hs hv {} /* html script value */ /* style tags */ span.hy .ht, hy ht { color:#909; font-weight:bold; } /* html style tag */ span.hy .hp, hy hp { color:#909; } /* html style property */ span.hy .hv, hy hv {} /* html style value */ /* form tags */ span.hf .ht, hf ht { color:#F90; font-weight:bold; } /* html style tag */ span.hf .hp, hf hp { color:#F90; } /* html style property */ span.hf .hv, hf hv {} /* html style value */ /* unused */ ha { color:#060; } /* html anchor */ hi { color:#909; } /* html image */ ho { color:#900; } /* html object */ hn { color:#00F; } /* html number */ |