background preloader

Guide de survie du positionnement CSS

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? Related:  Apprendre les CSSMise en page, agencement, Layout etcCréa Site

display: inline-block et les espaces indésirables - Alsacreations La valeur inline-block de la propriété display est à la mode, même si elle demeure encore trop peu connue et mal utilisée. Elle offre de multiples avantages dont le principal est de pouvoir disposer des éléments les uns à côté des autres, tout en étant dimensionnés et sans les retirer du flux. L'un de ses inconvénients majeurs est l'apparition d'un espace indésirable et incompressible de prime abord entre les blocs. S'il n'est pas gênant, tant-mieux; sinon, de multiples techniques plus biscornues les unes que les autres existent. Le cas «white-space» Comme tous les éléments de type inline ou de contenu textuel, les objets munis de la déclaration display: inline-block respectent la règle des caractères blancs (whitespace), c’est-à-dire que n’importe quel caractère HTML espaçant deux éléments va immanquablement apparaître entre leurs deux boîtes. L’espace créé par le white-space est d'environ 4 pixels, mais ne vous y méprenez pas : cela varie selon les navigateurs et la taille de police.

Centrer un bloc div, guide complet Nous avons tous rencontré le problème du centrage de div en CSS. Steve Pear fait le tour de la question et propose des solutions pour tous les cas de figure. Par Steve Pear Tout développeur a eu un jour des problèmes pour centrer un bloc div… Centrer le contenu d'une div est assez simple, il suffit de donner à la propriété text-align la valeur center, mais lorsqu'on parle de centrer la div elle-même les choses deviennent plus délicates, et quand il s'agit de centrer une div verticalement vous entrez dans un monde de douleur CSS. L'objectif de cet article est de montrer comment, avec quelques astuces CSS, on peut centrer n'importe quelle div, horizontalement, verticalement ou les deux à la fois, à l'intérieur d'une page ou d'une div. Centrer une div dans une page, les bases Cette méthode fonctionne avec n'importe quel navigateur. Le résultat dans CodePen (vous pouvez cliquer sur HTML et CSS pour en voir le contenu ou sur edit on CodePen pour le modifier) : Le résultat dans CodePen :

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

Comprendre le Viewport dans le Web mobile Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de "fenêtre" réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile. Comprendre la notion de viewport est absolument indispensable dans un projet d'intégration de site web pour tablettes et smartphones, ou dans un esprit d'adaptation "Responsive Web Design". Les différentes surfaces d'un mobile Afin de mieux cerner et exploiter le concept de viewport sur terminaux nomades, il nous faut commencer par maîtriser deux notions de base : la surface réelle et la surface en "pixels CSS" des mobiles. La surface physique C'est le nombre physique de pixels qui composent la matrice de l'écran, telle que le constructeur le décrit dans les caractéristiques, en gros la "résolution" (en vérité le terme juste est "définition"). Niveau de zoom initial

Grunt: The JavaScript Task Runner Sitemap: Conseils & outil pour générer un Sitemap XML Qu'est-ce qu'un sitemap ? Un sitemap est un fichier qui contient une liste enrichie d'URLs internes à un site web. Ce fichier est au format XML. Il permet de fournir aux principaux moteurs de recherche des informations sur les URLs d'un site web qu'ils ne pourraient pas découvrir par eux-mêmes. Pour bien comprendre à quoi sert un sitemap, il faut comprendre la manière dont fonctionnent les robots d'indexation des moteurs de recherche (appelés aussi Web spiders ou crawlers ou Bots) tels que Google, Yahoo ou Bing. Voici leurs actions lorsqu'ils analysent un site tel que www.monsite.com : ils commencent par télécharger et analyser le fichier (s'il existe). On peut alors tirer le constat suivant: si une URL d'un site web n'est pas accessible par sa racine ou récursivement dans ses descendants, alors un robot ne peut pas la trouver magiquement. 3 types d'entrées dans une sitemap : les liens, les vidéos et les images Les URLs internes dans un sitemap

Auditer votre CSS Auditer votre CSS vous aide à organiser votre code, à le rendre plus lisible, à éliminer les répétitions, mais aussi à améliorer les performances de votre site. Par Susan Robertson. Par Susan Robertson La perspective de procéder à un audit de CSS ne soulève généralement pas l'enthousiasme, et pourtant c'est devenu un de mes genres de projets préférés. L'audit de CSS est un vrai travail de détective. Vous partez du code d'un site et vous commencez à creuser : combien de feuilles de styles, quel impact sur la performance, comment le CSS lui-même est-il écrit? Je vais partager avec vous quelques astuces pour mener votre propre audit, quelques outils, et les avantages de procéder à un inventaire complet de votre CSS. Bénéfices d'un audit Procéder à un audit vous aide à organiser votre code et à éliminer les répétitions. Réduire la taille des fichiers. J'ai réorganisé Fasetto.com en vue d'améliorer ses performances. Un fois cette étape passée, j'examine le site ligne à ligne. Les outils NdT:

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.

Les sprites CSS Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple). Les avantages des sprites CSS sont multiples : La technique des sprites CSS Principe (avec sprite)

Game Programming Patterns WordPress – Personnaliser un thème ? Oui, avec un child theme - Tutoriels | Creative Juiz Les thèmes WordPress sont de plus en plus courus par tous : débutants, blogueurs confirmés ou professionnels du web. Il est possible d’en obtenir gratuitement un peu partout sur la toile, pas toujours de bonne qualité, pas toujours très sécurisés, comme il est possible d’en obtenir de payants (je n’ai pas dit qu’ils étaient mieux). Dans tous les cas il est possible de les personnaliser. Plusieurs solutions Wild tweaking La première, la moins propre, consiste à modifier directement les fichiers du thème, améliorer les portions de code des articles, des commmentaires, ou simplement de l’en-tête de votre document ou du fichier functions.php pour ajouter quelques morceaux de code trouvés sur la toile. Soit. En effet, à l’instar des plugins, les thèmes sont versionnés et peuvent subir des mises à jour (amélioration de fonctionnalité, mise à jour de sécurité, etc.). Child Theme La seconde solution, de loin ma préférée : créer un thème enfant. Voyons cela en détail avec des exemples concrets. par <?

Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. <! screen Écrans handheld print Impression

Learn CSS Layout - floats, positioning, flexbox, grids

Related:  CSS