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?
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
Initiation au positionnement en CSS (Partie 1) - Alsacreations Pour éviter l'usage inconsidéré des tableaux de mise en page, l'utilisation correcte de chaque élément (balises div, p, h1, ul, li, etc.) ainsi que leur positionnement en CSS est dorénavant indispensable. Les éditeurs HTML visuels n'utilisent qu'une infime partie des possibilités des balises (faussement nommées "calques" en général), ce qui les rend souvent peu compatibles et peu pratiques. Cet article en deux parties explique comment positionner les éléments en CSS de façon optimale. Résumé et pense-bête. Tous les éléments (balises) HTML peuvent être positionnés, décorés, dimensionnés, ... grâce aux styles CSS. Les balises de bloc et les balises en-ligne Ce chapitre sur la structure des balises est primordial, vous devez auparavant avoir consulté le tutoriel sur les bloc/en-ligne. Voici un résumé pour les lecteurs pressés les éléments de rendu "bloc" se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Ancêtre, Parents, Enfants, Frères Le Flux
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.
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.
CSS Positioning 101 · An A List Apart Article If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” for others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts. Article Continues Below CSS positioning is often misunderstood. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit. Get with the flow#section1 First, let’s take a step back to recognize the world we’re working in. Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Think of a “box,” as described by the spec as a wooden block—not unlike the ones you played with as a young whippersnapper. Static and relative—nothing new here#section2 The static and relative position properties behave like your childhood blocks—they stack as you would expect. Example D shows our new markup.
Learn CSS Layout - floats, positioning, flexbox, grids 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 :
Initiation au positionnement CSS : 3. position absolue et fixe | Openweb.eu.org La position absolue et la position fixe permettent de placer une boîte par rapport aux limites de la zone d’affichage ou du conteneur. Comment les utiliser dans une mise en page CSS ? Cet article fait suite à l'initiation au positionnement CSS: 2.position float. Une boîte en positionnement absolu peut être placée n'importe-où dans le code HTML et s'afficher à l'endroit de votre choix. Ceci s'avère très utile en particulier pour : placer les menus de navigation en fin de page, pour améliorer l'accessibilité de votre site en donnant un accès immédiat à son contenu dans les navigateurs textes, tout en les faisant apparaître en haut de page ou encore dans une colonne pour les navigateurs graphiques ; créer plusieurs colonnes au positionnement indépendant de l'ordre dans lequel elles se trouvent en HTML. Le fonctionnement de la position absolue Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. En CSS :
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.
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 ).
Comment centrer verticalement sur tous les navigateurs ? - Alsacreations Ce tutoriel présente des solutions pour centrer verticalement des éléments de tailles variables dans des conteneurs de hauteur fixe ou fluide. Les techniques exposées sont compatibles avec tous les navigateurs actuels, à partir d'Internet Explorer 7 (IE6 n'est volontairement pas abordé) et n'utilisent ni <table>, ni JavaScript. Sommaire Introduction Le temps du valign=middle sur nos tableaux de mise en page est bel et bien révolu. Avec CSS2 et l'arrivée de nouvelles valeurs pour la propriété display, beaucoup ont vu en table-cell une nouvelle ère pour le centrage vertical. Bref, le dossier "display:table-cell et centrage vertical" fût rangé au placard, on s'est dit qu'on le ressortirait après les funérailles d'IE6 et d'IE7. Pourtant, si l'on remonte à la source et que l'on regarde la spécification de la propriété vertical-align : La propriété vertical-align s'applique aux éléments de type en-ligne et à l'élément table-cell. Et au fait, le vertical-align ça marche comment ? Le code CSS :
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. Comprendre z-index et les contextes d'empilement - Vincent De Oliveira Cet article est une traduction de What No One Told You About Z-Index écrit par Philip Walton le 22 décembre 2012. Ce que personne ne vous a dit sur z-index Le problème avec z-index, c’est que très peu de personnes ont réellement compris son fonctionnement. Vous ne me croyez pas? Le problème Dans le HTML suivant, vous avez trois <div>, et chaque <div> contient un seul élément <span>. Voici à quoi ressemble le HTML et le CSS. <div><span class="red">Red</span></div><div><span class="green">Green</span></div><div><span class="blue">Blue</span></div> Le challenge: essayez de faire passer le <span> rouge derrière les éléments bleu et vert en respectant ces règles: Ne pas modifier le code HTMLNe pas ajouter ni modifier la propriété z-index, sur aucun élémentNe pas ajouter ni modifier la propriété position, sur aucun élément Pour vérifier que vous avez bien compris, cliquez sur «Edit on CodePen» et jouez un peu avec. La solution Heureusement, la suite de l’article va clarifier les choses.