background preloader

Initiation au positionnement CSS (partie 2)

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 Related:  Mise en page, agencement, Layout etc

Guide de survie du positionnement CSS Cet article s'adresse à ceux qui ont déjà quelques notions de positionnement CSS, mais qui se demandent s'ils l'utilisent correctement, ou qui galèrent pour mettre en pratique leurs connaissances encore trop bancales. Comment s'y retrouver dans le machin tentaculaire qu'est le positionnement CSS? C'est un sujet à la fois complet (tant mieux) et complexe (ouille). Pour bien l'appréhender, il faut prendre en compte: les possibilités de CSS 2.1 pour l'affichage et le positionnement des éléments (et à l'avenir de CSS 3); celles qui sont implémentées dans les navigateurs (et donc pas les autres, sauf pour préparer l'avenir); les contraintes de mise en page et d'adaptation aux contenus (le contenu, ça va ça vient… et ça vous surprend toujours d'une manière ou d'une autre); les contraintes du média screen (on ne fait pas tout et n'importe quoi avec les hauteurs et largeurs, le centrage, etc.); les bugs éventuels des navigateurs (ou de certains navigateurs). Comment s'y retrouver?

HTML 5 : Div et span, différences d'usage pratique Ces deux balises sont des conteneurs qui sont destinés à structurer le contenu, mais ils ont un rôle complémentaire et des règles de rendu différentes. Span sert surtout à associer un style à une partie d'un texte tandis que div sert à agencer le contenu de la page. Les deux balises doivent avoir une balise de début et de fin, la forme réduite n'est pas reconnue évidemment. N'est pas valide par exemple ceci: Le format seul valide est celui-ci: La balise peut être vide. Div La balise <div> est un bloc, donc un objet rectangulaire qui ne peut être réparti sur plusieurs lignes. Par exemple, le texte suivant: <div>0000000<div>111111</div>222222</div> s'affiche ainsi: Span La balise <span> est inline, elle s'inscrit dans le flux du contenu, peut être répartie sur plusieurs lignes. <span> n'a pas de saut de ligne et le texte suivant: <p><span>0000000<span>111111</span>222222</span></p> s'affiche donc ainsi: Margin On ne peut pas attribuer une marge externe avec l'attribut margin. Height et width Padding

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.

HTML5 : Nouveaux éléments de section, article, header, footer, aside, nav Les éléments de section HTML5, une nouvelle façon de penser Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document ou de l'application web, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre, et ne servent qu'à regrouper d'autres éléments HTML pour leur affecter un style CSS commun, voire pour interagir avec eux via le DOM... Il ne s'agit donc pas de nouveaux éléments avec des noms génériques : c'est bien plus que ça ! HTML5 inclut la majorité des éléments HTML4 pour assurer une rétro-compatibilité avec les navigateurs. Par exemple, une majorité des sites contiennent des informations supplémentaires relatives ou non au contenu principal (que l'on nomme sidebar ou barre latérale). Liste récapitulative des éléments de section HTML5 Un cas particulier : Internet Explorer <9 Exemples de documents Exemple minimal L'en-tête <header> Le <footer> Remarque

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. The em unit is not simply a replacement for the familiar px; you can use it for more properties than just font-size. 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.

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. Phasellus nibh nibh, interdum sit amet, sagittis nec, cursus sit amet, dolor. Duis scelerisque tortor. 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. 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 : Gouttière ou pas gouttière ?

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. 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 Further reading

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. For example: 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. In the future, we might be able to do:

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. Bref, c'est une question de cuisine interne. Pourquoi s'en occuper, s'il s'agit de cuisine interne ? 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".

Related: