Initiation au positionnement CSS (partie 2) Le positionnement des éléments en CSS est sans aucun doute l'un des aspects les plus intéressants de cette technologie, mais également l'un des plus ardus. Positions, flux et autres flottants sont pourtant des notions essentielles à une bonne maîtrise de la mise en page. Si de plus en plus d'intégrateurs semblent aujourd'hui acquérir les bases du comportement de ces propriétés, les choix des techniques demeurent couramment discutables, tout au plus hasardeux. Voyons ces méthodes de positionnement en détails afin de ne plus se laisser aller à des choix arbitraires incohérents. Sommaire du document Parce qu'une révision des bases ne fait jamais de tort… La section qui suit se contente d'introduire brièvement les notions de positionnements disponibles en CSS. Notion de flux Le flux d'un document pourrait se définir comme étant le comportement naturel d'affichage des éléments d'une page web. Les éléments de type block (h1, p, ul, ol, dl, table, blockquote, etc.) Revenir au sommaire Un habillage
Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.
Learn CSS Layout - floats, positioning, flexbox, grids Design a responsive site with em-based sizing You've probably heard that you should use relative units for font size. This is a good rule for accessible web design; if the user changes their browser's default font size, this enables your page's text to resize accordingly. You may have taken this advice and made the switch. Perhaps you got out your calculator and converted your site's font sizes from absolute px units to ems or, more likely, rems. But if that's where you stopped, you are missing out on a lot of the flexibility and power that ems bring to the browser. By consistently using ems, you can design components on the page that respond automatically should the font size change. Font size units Using ems for font size can be tricky. This means that placing the same module in different containers might change the meaning of em. To avoid this, we typically use a different relative unit for font size: rems. Building a module with ems Let's use relative units to build a module. We'll build a panel with a heading and a body.
sandbox 1. A very wide image contained in a paragraph with no styles applied Dunstan kindly lent me this charming image. Pellentesque in felis quis tortor consectetuer condimentum. 2. 3. 8. 4. 5. 6. 7. Ce bon vieux tableau HTML – La Tête dans le Flux Hier, sur Twitter, j’ai conseillé d’utiliser des tableaux HTML pour de la mise en forme. Et je n’ai même pas honte. En 2011 déjà, lors d’un atelier Paris-Web, je vantais les mérites des tableaux HTML pour de l’habillage graphique. Au cours de cette présentation, je revenais point par point sur chacun des arguments anti-tableaux : Bref, l’idée globale de ma présentation était à cette époque de revenir sur le classique « les tableaux HTML, c’est le Mal absolu », tellement ancré dans nos esprits que l’on ne se pose même plus de questions. En 2015, avec toutes les techniques de positionnement actuels (inline-block, table-cell, flexbox, etc.), et avec tout le mal qu’on a pu dire des tableaux HTML, comment est-il encore possible que j’en parvienne à conseiller son usage ? Tout simplement parce que l’on m’a demandé comment réaliser ce type de gabarit, a priori très simple : Selon moi, le meilleur choix, aujourd’hui, est le tableau HTML. <table role="presentation"><!
Le point sur les grilles en CSS – La Tête dans le Flux Les grilles en CSS font souvent office de Saint Graal dans nos maquettes : toujours imitées, jamais égalées. Ou énoncé différemment : des fois ça marche, des fois ça marche pas. EDIT : à l’aube de 2016, cet article bénéficie d’une suite dans cette réflexion : « Grid Layout, vers la grille parfaite ». De très nombreux frameworks CSS proposent des solutions de grilles toutes plus sexy les unes que les autres, mais ont immanquablement recours à des hacks et des bidouilles multiples pour couvrir tous les cas de figure et bugs navigateurs. Mais pourquoi donc ? Tout simplement parce qu’en 2014, en 18 ans de CSS, il n’existe toujours pas de modèle de positionnement idéal pour la conception de grilles de mise en page. Faisons le point sur les solutions existantes, leurs avantages et limites, ainsi que sur les modules de positionnements que l’avenir nous réserve… The Grid ? Avant de choisir ou tenter de concevoir une grille CSS de mise en page, les critères suivants doivent être considérés : Avantages
width: 100%, tu es le Mal ! – La Tête dans le Flux La propriété CSS width est certainement celle qui porte le plus mal son nom. En effet, elle représente la taille de la composante de contenu uniquement, pas largeur de l’élément. A vrai dire, l’appellation content-width lui conviendrait parfaitement et serait bien moins source de problèmes, mais voilà, elle s’appelle bel et bien width, et c’est ça le drame. Il est dangereux de croire que width correspond à la largeur de l’élément puisque dès que des marges internes (paddings) ou bordures (border) y sont ajoutées, la taille totale de l’élément ne correspond plus du tout à width. Et c’est d’autant plus problématique que l’on voit pulluler partout des width: 100%… ce qui crée potentiellement des éléments qui déborderont joyeusement de leur parent dès lors que le moindre padding ou la moindre bordure seront appliqués. C’est tout. Dans la grande majorité des cas, on peut aisément se passer de width: 100% Vos éléments sont des blocks (div, p, h1, ul, etc.) ?
clearfix Reloaded + overflow:hidden Demystified clearfix and overflow:hidden may be the two most popular techniques to clear floats without structural markup. This short article is about enhancing the first method and shedding some light on the real meaning of the second. clearfix In everything you know about clearfix is wrong I explain the issues this method creates across browsers and I suggest to only use clearfix on elements that are not next to floats (e.g. a modal window), although as authors we still have to deal with collapsing margins. This demo page demonstrates the issue. Margin-collapse behavior in the first two boxes shows that it is the generated (non-empty) content that keeps the bottom margin inside the box (which makes perfect sense according to spec). So, to create the same box layout across browsers we can enhance the original method by generating content using both pseudo-elements :before and :after: overflow 10.1 Definition of "containing block": 4. You can check this demo page to see how things work. Better alternatives
Force Element To Self-Clear its Children Share this: Ship custom analytics today with Keen.io. This will do you fine these days (IE 8 and up): Apply it to any parent element in which you need to clear the floats. You would use this instead of clearing the float with something like <br style="clear: both;" /> at the bottom of the parent (easy to forget, not handleable right in CSS, non-semantic) or using something like overflow: hidden; on the parent (you don't always want to hide overflow). Now for a bit of history! This was the original popular version, designed to support browsers as far back as it possibly could: There then was a bit of a cleaner version documented here by Jeff Starr, based on the fact that nobody uses IE for Mac, which is what the backslash hack was all about. Then it became popular to use "group" as a class name, which is nicer and more semantic (via Dan Cederholm). Of course, if you drop IE 6 or 7 support, remove the associated lines. Update May 18, 2011: Nicolas Gallagher again with the "micro" clearfix.
A new micro clearfix hack The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required. Demo: Micro clearfix hack Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+ The “micro clearfix” method is suitable for modern browsers and builds upon Thierry Koblentz’s “clearfix reloaded”, which introduced the use of both the :before and :after pseudo-elements. Here is the updated code (I’ve used a shorter class name too): This “micro clearfix” generates pseudo-elements and sets their display to table. Including the :before selector is not necessary to clear the floats, but it prevents top-margins from collapsing in modern browsers. It ensures visual consistency with other float containment techniques that create a new block formatting context, e.g., overflow:hiddenIt ensures visual consistency with IE 6/7 when zoom:1 is applied.
HasLayout et bugs de rendu dans Internet Explorer 6-7 Le HasLayout, dont vous avez sans doute entendu parler au détour d'un tutoriel ou sur un forum, est une spécificité du navigateur Internet Explorer pour Windows, qui affecte les versions 5 à 7 incluses. Il s'agit d'un mécanisme interne du moteur de rendu d'Internet Explorer. Le HasLayout intervient dans le positionnement des éléments et plus généralement dans le calcul de l'affichage des pages web. Concrètement, qu'est-ce-que c'est? Les explications détaillées sur le HasLayout peuvent être trouvées dans l'article On Having Layout. On retiendra surtout que, pour Internet Explorer, tout élément d'une page HTML peut avoir deux états: soit il a le layout, soit il ne l'a pas. Mais qui a le layout? Un exemple de différence de rendu lié au layout Par défaut, les éléments flottants «dépassent» de leurs blocs parents. <p style="border: solid 2px red;"> Ce paragraphe n'a pas le "layout". Nous ajoutons une propriété width avec la valeur 100% au paragraphe qui contient le flottant:
display: inline-block et les espaces indésirables - Alsacreations La valeur inline-block de la propriété display est à la mode, même si elle demeure encore trop peu connue et mal utilisée. Elle offre de multiples avantages dont le principal est de pouvoir disposer des éléments les uns à côté des autres, tout en étant dimensionnés et sans les retirer du flux. L'un de ses inconvénients majeurs est l'apparition d'un espace indésirable et incompressible de prime abord entre les blocs. S'il n'est pas gênant, tant-mieux; sinon, de multiples techniques plus biscornues les unes que les autres existent. Le cas «white-space» Comme tous les éléments de type inline ou de contenu textuel, les objets munis de la déclaration display: inline-block respectent la règle des caractères blancs (whitespace), c’est-à-dire que n’importe quel caractère HTML espaçant deux éléments va immanquablement apparaître entre leurs deux boîtes. L’espace créé par le white-space est d'environ 4 pixels, mais ne vous y méprenez pas : cela varie selon les navigateurs et la taille de police.