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?
CSS Tutorial 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.
CSS3 Flexbox Layout module Vous connaissez certainement le modèle de boîte classique en CSS et ses dispositions de type “block” ou “inline”, sachez que Flexbox CSS3 a été conçu pour étendre ce périmètre en introduisant un nouveau modèle de boîte distinct, que l’on appellera “le Modèle de boîte flexible”. En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects. Au sein de ce schéma, on ne raisonne plus en “block” ou “inline”, ni même en float ou autres types de boîtes “classiques” CSS, mais en “Modèle de boîte flexible”, dont les quatre possibilités principales sont : Note : ce tutoriel a été initialement rédigé en octobre 2010. En action ! Flexbox (le modèle de boîte flexible) se fonde schématiquement sur une architecture de ce type : Démonstration display: flex Compatibilité Standardisation
Learn CSS Layout - floats, positioning, flexbox, grids Le modèle tabulaire en CSS Le modèle de construction tabulaire (HTML et CSS) compte sans aucun doute parmi les plus fascinants qui soient, après avoir été d'abord adulé puis banni vigoureusement par les intégrateurs de tous poils. En 1998, les spécifications CSS2 étendent les historiques valeurs de la propriété display et proposent depuis belle lurette des possibilités de rendus et positionnements “tabulaires” sans pour autant interférer dans la sémantique et le bon usage des éléments HTML. Passons immédiatement à table et découvrons en détail le monde mal connu du Modèle Tabulaire en CSS… Note : Cet article est publié conjointement sur OpenWeb.eu.org et sur Alsacreations.com. Compatibilité Commençons par une excellente nouvelle : le modèle de rendu tabulaire en CSS est finalisé depuis suffisamment longtemps pour être compatible avec tous les navigateurs actuels et leurs générations précédentes. Tableau des compatibilités Display table inline-table Spécifie un comportement de table de type en-ligne pour un élément.
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.
Comprendre l'héritage et la parenté des styles CSS Les styles CSS fonctionnent sur le principe d'imbrication, de parenté et d'héritage, quelques explications. Le modèle Parent-Enfant(s) L'héritage des CSS est fondé sur le modèle Parent-Enfant(s) : chaque élément Enfant reçoit en héritage tous les styles de son élément Parent. Par exemple, la balise <html> est parent de <body>, et <table> est parent de <tr> qui lui-même est parent de <td>. Précision : l'élément enfant héritera de toutes les propriétés de l'élément parent uniquement si ces propriétés s'héritent, car l'héritage ne fonctionne pas non plus sur toutes les propriétés css (margin, padding et autres propriétés de bloc) Voici un exemple illustrant bien ce principe d'héritage. Le code HTML : <body> test <div>test</div></body> Pour connaitre les différents liens de parenté des balises, il existe un site très complet à ce sujet. Attention : il existe des exceptions, toutes les balises ne peuvent pas être imbriquées ! Cas de la balise de lien <a> Vous pouvez vous contenter de ce code :
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. Réalisation d'un design complet (HTML / CSS) en 4 étapes Dans ce tutoriel nous allons voir étape par étape comment concevoir le code initial HTML et CSS d'une page web, afin d'acquérir quelques techniques de base. Rien de trop ardu pour une page web de ce type : un titre, un menu, le contenu de la page, et un pied de page contenant les informations d'ordre informatif. Voir le résultat final que l'on souhaite obtenir Télécharger les sources des fichiers (zip) Voici le code HTML construit pour cette page : <! Voir le résultat initial Notez qu'aucun style n'a été appliqué à la page, vous remarquerez que le site est tout à fait lisible et utilisable, certes peu agréable à l'œil mais fonctionnel Note : Le support du tutoriel (graphisme et code) est libre d'utilisation à condition de préciser la source ( Alsacreations ).
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