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?

CSS Tutorial Initiation au positionnement CSS : 1.flux et position relative Par défaut, les navigateurs affichent les boîtes issues du document html dans l’ordre du flux normal. En position relative, un élément peut être décalé verticalement et/ou horizontalement. Pour représenter le positionnement en flux normal, on peut imaginer le navigateur parcourant (logiquement) la page de code HTML du début à la fin et retranscrivant son contenu au fur et à mesure des balises rencontrées. Boîte de type bloc en flux normal Par défaut, les boîtes de type bloc seront affichées dans une succession verticale. En HTML : <p class="jaune">Une boîte jaune</p><p class="verte">Une boîte verte</p> En CSS : Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 1 : Le navigateur traite successivement les deux éléments rencontrés. Les principaux éléments créant des boîtes bloc sont : Boîte de type en-ligne Par défaut, les boîtes de type en-ligne sont affichées dans une succession horizontale. Les principaux éléments créant des boîtes en ligne sont :

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.

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 CSS : 2.position float La position float retire une boîte du flux normal pour la placer le plus à droite ou le plus gauche possible dans son conteneur. Comment l’utiliser dans une mise en page CSS ? Cet article fait suite à l'initiation au positionnement CSS : 1.Flux et position relative. Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche (float: left) possible dans son conteneur. Le fonctionnement des flottants Ajoutons aux styles précédents une règle de positionnement flottant à droite et une mesure de largeur (facultative, mais utile pour certains navigateurs) : En HTML: <p class="jaune">Une boîte jaune flottant</p><p class="verte">Une boîte verte doté d'un contenu plus long…</p> En CSS: Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 1 Première utilisation : une mise en page à deux colonnes En CSS : Et en HTML : Le résultat, illustré par la figure ci-dessous, peut être observé également dans la page-exemple 1

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

Passer aux feuilles de style Vous utilisiez les balises HTML de présentation ? Pour tirer parti des avantages offerts par les standards, découvrez le vocabulaire élémentaire des feuilles de style. Vous souhaitez vous affranchir du html détourné à des fins de présentation ? Abandonner les balises obsolètes ? Séparer strictement forme et contenu ? Appliquer un style À tous les éléments de la page À toutes les instances d'un élément À certaines instances d'un élément À une instance unique d'un élément À un ensemble d'éléments successifs À une partie de contenu de paragraphe pour que certains mots d'un paragraphe soient gris, on applique la classe .gris à l'élément span : <p>… <span class="gris"> ceci sera en gris </span> … </p> pour en savoir plus : the span element. À un élément directement ou indirectement contenu dans un autre élément À un élément directement contenu dans un autre élément À un élément suivant un autre élément À différents éléments simultanément Couleurs, bordures et arrières-plans Couleur d'avant-plan Bordures

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 :

60 minutes créa | Adobe.com | Votre rendez-vous avec les experts d'Adobe Tout ce dont vous avez besoin pour vos créations. Édition pour enseignants et étudiants Formule annuelle pour par mois Votre achat est soumis à la vérification de votre éligibilité

Related: