/******************************************************************************* * This stylesheet originally came from * http://webhost.bridgew.edu/etribou/layouts/skidoo_redux/demos/two_columns.html * * It was written by Eric Tribou * * Modified by Stephane Bortzmeyer * * Most of the comments are from ruthsarian. * * The stylesheet is organised in three parts: * 1) Basic layouts mechanics, specifying the layout of the page (a ""hacks" subpart * at the end of this part defines several hacks or workarounds for browser support") * 2) Visual consistencies, specifying fonts, proportions (such as h1, h2, etc) for * consistency among Web browsers * 3) Theme defines the colors * * ----------------------------------------------------------------------------- * Skidoo is a two-column, float-based layout utilizing negative margins to * provide column placement and cross-browser compatibility. There have been * several incarnations of this layout: original skidoo, skidoo too, and now * skidoo redux. This is the latest, most compatble and up-to-date version of * the skidoo layout available. It is recommended you use this layout and not * an older version of skidoo. * * This layout is not for the faint of heart. Beginners will have problems * understanding the nuances, but through a little experimentation of different * variables, should be able to gain an understanding of what does what. For * experienced developers this is best served as a reference tool, explaining * what bugs are experienced on what browsing platforms for this and similar * layouts. It could be used as a map in working your way through bugs that * exist in your own layout. * * DISCUSSION TOPICS * - why left/right margins need (semi-)static widths (ie. no percentages) * - setting width of left/right columns * - why columns drop * - a general overview of float-based layouts and why they're "funny" * * * ------------------------------------------------------------------------------ * This stylesheet is released into the public domain. *******************************************************************************/ /******************************************************************************* * BASIC LAYOUT MECHANICS * * GENERAL NOTES * - yes, that's a lot of DIVs for a two-column layout. there is a reason * it all. first, all the columns must be floated to prevent a 3-pixel text * jog (a bug) that IE/Win 6 and earlier have. I can't use CSS hacks around * this one and need the extra markup. But using all floats can have * positive consequences, especially when using floated elements that need * to be cleared, but without clearing the other columns of the layout. * - NEGATIVE MARGINS is an approach to the two-column CSS layout that seems * to have the most compatibility and potential. the real strength of this * idea is to have the ability to provide different colors (or images) as * the background for each column. traditional two-column layouts can't * do this because the columns are only as tall as needed to fit their * content. in other words they don't run the full height of the layout. * negative margins gives us a means to fake this functionality. borders * (or padding, or margins) applied on #outer-column-container reserve the * space where the left and right columns will live. all two columns are * floated. since the columns are cleared inside #inner-column-container, * #inner-column-container (and #outer-column-container) will be as tall as * the tallest of the two columns. this means the borders will also be * this tall, giving the visual appearance that all two columns are the * same height. one "gotcha" on this approach is that the two side columns * won't be cleared if they exist entirely outside the space of the parent * element (#inner-column-container) where we clear the two columns. So * they need to be made to overlap the area of the middle column by at * least 1 pixels. This is why the outer columns have a 1 pixel margin on * their inner edge and the middle column (and source-order-container) * have negative margins (to make room for the 1px margin from the outer * columns). * * #page-container * - wraps the entire page. use this to set min/max widths and set any margins * or border that wraps the whole layout. * * #outer-column-container * - reserves space for the left and right columns. using borders allows you * to use the border color to act as the background color for the left and * right columns. background color could then act as the background of the * middle column. * * #inner-column-container * - provides the single-pixel black border between the middle column and * its outside brothers. * * #source-order-container * - source ordered layouts place the main content at the top of the page. to * do this with CSS in a two-column layout you need to wrap two of the * three columns in an element (DIV) to float them together as if it was a * a single column. * - this element contains both the #middle-column and #left-column elements. * * #middle-column, #left-column * - containers for the each of the two columns in the layout * * #footer * - bottom of your webpage. a place to put copyright and contact information * * .clear-columns * - this class is assigned to an empty div placed after the last (floating) * column inside a block that contains two or more floating columns. it * clears the floats, forcing the element containing the columns to * visually contain all of its columns. there are alternative approaches * to clearing which do not require this extra markup (see * http://www.positioniseverything.net/easyclearing.html) however I find * this method is much more effective and compatible for the task at hand. * also, it should be evident by now that markup bloat is not a concern * with this particular layout. */ #outer-column-container, #inner-column-container { border-right-width: 0; } #source-order-container { margin: 0; } .clear-columns { clear: both; } #outer-column-container { border-left: solid 10em; /* left column's width */ /* border-right: solid 10em #ffffff; /* right column's width and background color */ } #inner-column-container { width: 100%; /* force this element to take the full width between the left and right columns. this is especially important as children of this element will have width:100%; set, and how that 100% value is interpreted depends on the width of it's parent (this element). */ } #source-order-container { float: left; /* float left so the right column, which is outside this element, has a place to go. */ width: 100%; /* force this to go as wide as possible */ margin-right: -1px; /* make room for the right-column's overlap */ height: 100%; } #left-column { width: 100%; float: left; /* float left, where it'll live */ margin-left: -10em; /* move it further left. the value here should be the same value as the left border width on #outer-column-container, but negative */ width: 10em; /* need to set a definite width, should be the same width as the left border width on #outer-column-container */ margin-right: 1px; /* overlap the middle column to help with clearing. see general notes above. */ } #middle-column { float: right; /* middle column goes right of the left column since the two share the same parent element */ width: 100%; /* make the middle column as wide as possible for a fluid layout. this is not possible if it's parent element, #source-order-container, wasn't also at 100% width */ margin-left: -1px; /* make room for the left-column's overflap */ } /******************************************************************************* * BASE THEME * * Setup basic styling for the layout. This will set gutterspace and generate a * basic border structure for the layout. Real layout styling belongs in a * separate "theme" stylesheet; leave this stylesheet untouched. */ body { padding: 0; /* padding on the body element when javascript min-width is in use will create problems in IE/Win 6. */ margin: 14px auto; /* horizontal margins belong on #page-container. vertical margins are not there as well due to small rendering issues in IE/Win 5 when viewport is shorter than webpage */ max-width: 1200px; /* Jean-Marc Saffroy 2010-11-12 */ } #page-container { /* border: solid 1px; */ /* border around the entire layout */ min-width: 20em; /* limit how narrow the layout will shrink before it stops. Originally 600 px but creates too many problems with small screens. */ margin: 0 14px; /* horizontal margins here instead of on the body because we're setting min- width on this element. if margins set on body users will see an odd skip in the layout's rendering as it's resized below min-width. (JS-based min-width only.) */ } #masthead { padding-top: 1px; /* hack to force teh entire masthead to receive the background color */ border-bottom: solid 1px; /* three of the four sides of this block will already have borders courtesy of the #page-container element so we only need to render the bottom. */ } #inner-column-container { border: solid 1px; border-width: 0 1px; margin: 0 -1px; /* compensate for the borders because of 100% width declaration */ } #middle-column div.rMenu-center { border-bottom: solid 1px; /* border along the bottom of the horizontal menu at the top of the middle column */ } #footer { border-top: solid 1px; /* same situation as the masthead but this time we're rendering the top border. */ padding-bottom: 1px; /* hack to force the entire footer to receive the background color */ } .inside { margin: 10px; /* margin, instead of padding, used to induce margin collapse if needed by child elements */ } /******************************************************************************* * HACKS * * Not all browsers are created equally. Many CSS engines behave differently * and can create discrepencies in the rendering of your layout across different * browsing platforms. These hacks are aimed to resolve those discrepencies * and provide a more consistent look to the layout. * * CSS hacks work by playing to a bug in the CSS engine or parser for a given * browser. This forces the browser to either apply or ignore a rule that other * browsers wouldn't. This lets you apply rules to work around bugs in a specific * browser that would otherwise break the layout. * * It's important that when you use a CSS hack you do so in a way that is as * specific in targeting the problem browser as possible. Some hacks might * work for two or three different platforms, but you only need to apply it on * one platform. You might find that this hack has no adverse effects on those * other two platforms right now, but in a later version the hack might create * problems. Save yourself the headache and do as much as you can to narrow * the target of a CSS hack as much as possible. * * COMMON HACKS USED HERE * * The star-html hack (* html) targets Internet Explorer, both Windows and Mac, * for versions 6 and earlier. There is no element higher up in the page * than the HTML element. IE seems to think otherwise. Rules applied to any * selector that begins with "* html" will be ignored by just about every * browser except Internet Explorer. So any selector given below that begins * with "* html" is targetted at Internet Explorer. * * The backslash-star comment hack targets IE/Mac. CSS comments end with an * asterisk and forward slash. Anything after that closing comment mark will * be interpreted as as CSS rule. However if you prefix that closing comment * mark with a backslash, IE/Mac won't recognize that the comment has been * closed, but other browsers will. So any rules that come after the hacked * closing comment will be applied by any browser except IE/Mac until a * non-hacked closing comment is found. * * With the above two hacks outlined, it's possible to target IE on a specific * OS platform. This is important as the CSS and rendering engines for Mac and * Windows are completely different and have very different requirements in * terms of hacks. * * You may see other empty comments in wierd places, those are variations on * another comment hack to help target specific version of IE/Win (separating * IE 5 from IE6 typically). * * One other you'll see is a height setting of 0.1%. This is to trigger * hasLayout (see reference section below). IE (at least pre-version 7) * will automatically expand a box beyond it's set height if its content * is too tall. Setting height to 100% also works, but this can lead to * problems where an element that should only be a few pixels tall turns * out to be as tall as the rest of the page. By setting it to 0.1% you * minimize the chance of elements being set taller than they need to be. * * WHY USE HACKS? * * For compatibility sake. Specifics on what each hack does, and why its * used, is provided with the rule or ruleset in question. However, the * majority of hacks used have to do with an internal property in IE * called hasLayout. The first item in the reference section below has * all you could ever want to know, and more, about hasLayout. * * REFERENCE * http://www.satzansatz.de/cssd/onhavinglayout.html * http://www.communis.co.uk/dithered/css_filters/css_only/index.html */ .clear-columns { /* hide from IE/Mac \*/ padding-bottom: 1px; margin-bottom: -1px; /* this padding/margin hack is here for older Mozilla engines (Netscape 7, 6, FireFox pre 2.0) which will not allow an element to clear unless it has some effect on how the rest of the layout renders (ie, it takes up space). Hidden from IE/Mac as it triggers a horizontal scrollbar. */ } * html #page-container { /* \*/ height: 0.1%; /* IE/Win 5 needs this to prevent rendering issues if a minimum width is applied to this element and the viewport is sized narrower than it's minimum width. however this breaks IE/Mac so a comment hack is used to hide it. */ position: relative; /* IE/Mac 5.0 seems to need this. without it any child element with position: relative isn't rendered. */ } * html #middle-column, * html #left-column, * html #right-column, * html #source-order-container { /* hide from IE/Mac \*/ overflow: visible; /* a bug through IE/Win 6 causes the widths of text boxes to be calculated narrower than they render, causing overflow of their parent elements. we need to explicitly handle this overflow. IE/Win 5.0 does not handle visible overflow correctly and so on some layouts, at some viewport widths you'll get a horizontal scroll bar. */ /* hide from IE/Mac \*/ position: relative; /* this resolves rendering bugs in IE/Win. without this the columns don't render on screen or text jog. */ } * html #middle-column { margin-right: -4px; /* fix 3-pixel text jog in IE/Win 5.0. -4px because we also have to compensate for the overlaps from the left and right columns */ margin-right/* */: 0; /* reset value on 5.5 and later using comment hack to hide this rule from 5.0 */ } * html #middle-column .inside { margin-right: 14px; /* compensate for negative margin in previous rule */ margin-right:/* */ 10px; /* reset margins for 5.5 and later */ } * html #masthead, * html #footer { /* hide from IE/Mac \*/ height: 0.1%; /* this is to fix an IE 5.0 bug. setting this value forces these elements to contain their child elements, meaning margins will no longer collapse. */ height/**/: auto; /* reset for IE/Win 5.5 and later by hiding this rule from 5.0 with the empty comment hack. also hidden from IE/Mac for the same reason. */ } * html #masthead .inside, * html #footer .inside { margin-top: 0; margin-bottom: 0; /* since margins no longer collapse due to previous rules we remove vertical margins from the .inside class */ margin/* */: 10px; /* reset for IE 5.5 and later */ } /* #footer img {margin:-30px;} Plutôt une valeur relative. TODO /* Pour le bouton Flattr */ #footer img { margin: 0; vertical-align: middle; } #leftmenu img { margin: 0; vertical-align: middle; } /* TODO le texte se retrouve parfois sous l'image https://pbs.twimg.com/media/CxtvZPvXgAA2CH-.jpg is not monospaced :-( */ font-family: "Courier New", Courier, monospace; } pre { overflow: auto; /* For the long code lines. "scroll" creates a scrollbar even for short lines. Not good. "auto" creates the scrollbar only if necessary. "visible" is the default and makes the code resize the windows. "hidden" hides the excess code (a good idea, since it is not supposed to be so large). */ font-size: 105%; } label { /* It's all about the visual feedback. In this case, label * elements are usually clickable which then set focus on * their target. I want to show that to the user in a manner * they are used to and understand. */ cursor: pointer; } table { /* Some browsers won't carry the font size down into the * browser like they're suppose to. */ font-size: 100%; } td, th { /* I never like or use the default vertical centering "feature" * provided by tables. */ vertical-align: top; } img { margin: 30px; } body { /* I've seen several comments that setting the base font size to 100.1% * fixes some browser bugs. Which bugs? I don't know. I believe it's * to fix some rounding-error bugs that some browsers (Mozilla) are * prone to. It doesn't hurt anything, so I keep it here. */ font-size: 100.1%; } /******************************************************************************/ /******************************************************************************* * REAL THEME * * This part of the stylesheet provides the theme of the layout. The theme includes * anything that controls the presentation of the page, but typically it's just * for setting colors, fonts, borders, and gutter space. * * It is possible to offer multiple themes for a single page and allow the * user to pick the one that best fits their needs. * * ------------------------------------------------------------------------------ *******************************************************************************/ body { background-color: #000099; } #page-container { font-family: arial, helvetica, sans-serif; font-size: small; background-color: #99ccff; color: #000; } #page-container, #inner-column-container, #masthead, #footer { border-color: #99a; /* all the borders within the layout */ } #outer-column-container { border-left-color: #99ccff; /* left column background */ } #masthead, #footer { background-color: #000099; /* masthead and footer background */ } #footer { color: #ffffff; text-align: center; } #middle-column { background-color: #fff; /* middle column background */ } #left-column { background-color: #99ccff; } #left-column h3, #right-column h3 { margin-bottom: 0; /* column menu titles should hug the menus */ } #right-column p, #right-column ul { margin-top: 0; } p.fontsize-set { text-align: center; /* center the icons for changing font size */ } p.fontsize-set input { margin: 0 2px; /* space them out a bit */ } /* Advice from Julien Wajsberg. */ .para { line-height: 1.5; } /* Various tuning */ h1 a{ color: #9999FF; } h1 a:visited { color: #3333FF; } /* Just to be sure we control the base link style */ a { color: #0000EE; font-weight: normal; text-decoration: none; /* border-bottom: 1px dashed #000099; */ /* http://roshanbh.com.np/2008/08/dashed-dotted-link-css.html */ } a:hover { /* because I like the visual feedback a user gets when they * mouse over a link and see the underline of the link * appear. */ color: #0000FF; border-bottom: none; text-decoration: underline; } a.wikipedia { color: #0000AA; font-weight: normal; text-decoration: none; border-bottom: none; } a.wikipedia:hover { color: #0000FF; text-decoration: underline; } #footer a { color: #BBBBEE; font-weight: normal; text-decoration: none; border-bottom: 1px dashed #000099; } .hide { display: none; } hr { background-color: black; height: 0.06em; } hr.wide { height: 0.2em; } hr.ultrawide { height: 0.4em; } p.small { font-size : 85%; } p.verysmall { font-size : 60%; } /* Search box */ input#pattern { width: 100%; box-sizing: border-box; } /* For small screens, remove the left menu */ @media (max-width: 580px) { #left-column { display:none; } #outer-column-container { border-left: none; } }