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:  CSSMise en page, agencement, Layout etcCSS

Initiation au positionnement en CSS (Partie 1) 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

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 :

Superperposer un texte sur une image Comment positionner un texte sur une image? Deux méthodes simples selon l'effet que l'on veut obtenir, sans utiliser de table. Le code fonctionne sur tous les navigateurs récents. Utiliser des calques et CSS Le texte et l'image sont placés dans deux calques, eux-même internes à un calque conteneur. Ce sont les propriétés de style top et left qui positionnent le texte sur l'image, en fonction des dimmensions de celle-ci. Le code <div style="position:relative; height:400px"><div style="position:absolute;z-index:1"><img src="images/greenhouse.jpg"></div><div style="position:absolute;top:360px; width:600px; height:400px; z-index:2;font-size:200%"><center><b>Ma maison... Les calques internes ont une position absolue. Créer une image du texte L'image d'un texte peut être réaliser très rapidemment avec Gimp en quelques étapes. Dans le menu Fichier cliquer sur Nouveau. L'image ici.gif est positionnée au-dessus de l'image cats.jpg grâce à la propriété z-index. Démonstrations Ma maison... Voir aussi

Using The Best Ampersand Available I really like one of the typographic tricks Mark Boulton makes in his "Better Typography" presentation. (Slideshow of the presentation here. Around slide #109) He suggests "using the best ampersand available". Now that's a nice looking ampersand. Then apply styling to the class. Check out some simple examples of how this can make text more pleasing: I should mention that the excellent wp-typogrify plugin automatically adds this span/class to ampersands on your WordPress blog, which is pretty slick and just one of it's many nice features. Share On

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

CSS3 – Effet parallaxe (sans JavaScript) Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3. C’est à la suite de l’article de Simon Kern sur Alsacréations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement conçu avec JavaScript. L’article zoom sur l’effet parallaxe de Simon est bien conçu, je vous invite à le lire si vous préférez l’utilisation de jQuery, ou si vous souhaitez découvrir une alternative ou un complément à ce tutoriel. J’en profite pour remercier Simon qui m’a autorisé à reprendre son design ainsi que la base du code qu’il a conçu pour l’article sur Alsacréations. Démonstration Place à l’explication ! Concept Pour réaliser cet effet il nous faut plusieurs éléments qui vont nous permettre de simuler différents plans. Lorsque un tel effet est mis en place sur un site web, il l’est souvent pour offrir une transition originale entre deux vues, un peut comme lors d’un diaporama pour passer d’une slide à l’autre. <!

Jardin Zen css: La beauté de la conception CSS Alors, de quoi s'agit-il ? Il faut sans cesse montrer la puissance de CSS. Le Jardin Zen vise à exciter, inspirer et encourager la participation. Les CSS permettent un contrôle total de la mise en forme d’un document hypertexte. Participation Notre objectif a toujours été de promouvoir les designs de qualité. Vous pouvez modifier la feuille de style comme bon vous semble, mais pas le code HTML. Téléchargez les fichiers d’exemple HTML et CSS pour travailler sur une copie locale. Avantages Pourquoi participer ? Conditions Si possible, nous aimerions surtout voir l’utilisation de CSS 1 et 2. Heureusement, concevoir de cette manière démontre comment les différents navigateurs ont maintenant bien implémenté les CSS. Nous vous demandons de soumettre des créations originales, merci de respecter les droits d’auteur. Ceci est aussi bien un exercice d’apprentissage que de démonstration. Par Dave Shea.

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

Related: