background preloader

La fusion des marges en CSS

La fusion des marges en CSS
Qu’est-ce que la fusion des marges? La fusion des marges est un mécanisme décrit dans la spécification CSS (CSS 2.1: Collapsing Margins). Il concerne les marges verticales (margin-top et margin-bottom) des éléments de type bloc. C’est un mécanisme qui, pour deux blocs qui se suivent, «fusionne» la marge inférieure du premier et la marge supérieure du deuxième. C’est-à-dire qu’au lieu d’additionner les deux marges, le navigateur va conserver la plus grande des deux. <p style="margin-bottom: 20px;"> Premier paragraphe </p><p style="margin-top: 30px;"> Deuxième paragraphe </p> Pourquoi ce mécanisme? La fusion des marges est très utile pour obtenir des espaces harmonieux entre les portions de texte. la marge supérieure correspond au retrait minimal souhaité avant l’élément; la marge inférieure correspond au retrait minimal souhaité après l’élément. Voici par exemple un code CSS simple qui exploite ce mécanisme, pour obtenir des espaces harmonieux entre les paragraphes: Un paragraphe (fond vert)

Display inline-block, une valeur trop peu utilisée Floatera, floatera pas… mais pourquoi ne pas utiliser la valeur inline-block de la propriété display en CSS ? Vous connaissez certainement les valeurs block ou inline, mais moins celle de inline-block et pourtant elle peut vous servir dans bien des cas. Voyons dans quelles conditions nous pouvons l'utiliser (de manière non exhaustive) dans un premier temps, puis dans un second temps quelques difficultés dans son utilisation. Cette astuce a été publiée initialement sur le blog personnel de l'auteur, creativejuiz.fr à la date du Jeudi 17 mars 2011. Utiliser display: inline-block Par défaut les éléments input ont comme valeur de display celle de inline-block. Le formulaire Quelle transition ! Je vous propose cette forme de mise en page pour formulaire. Notre code CSS va donc nous permettre d'avoir un comportement homogène. La CSS : Aperçu du formulaire Une navigation horizontale (éléments de liste) Le code HTML : Le code CSS : Remarque : la valeur inline sur le li est suffisante dans mon exemple.

Visualiser 1. position:static Le positionnement par défaut de tous les élément est : position:static, qui signifie que l'élément n'est pas explicitement positionné et apparaît là ou il doit normalement apparaître dans le document. Normalement vous n'avez pas à le spécifier sauf pour remplacer un positionnement qui a été mis précédemment. 2. position:relative Si vous spécifier position:relative, alors vous pouvez utilisez top ou bottom, et left ou right pour déplacer les éléments relativement a l'endroit ou ils devraient normalement se trouver dans le document. Déplaçons div-1 vers le bas de 20 pixels, et vers la gauche de 40 pixels: Remarquez que l'espace ou div-1 aurait du être si nous ne l'avions pas déplacer est maintenant un espace vide. Il semble que position:relative ne soit pas vraiment utile mais it pourra l'être pour certaines présentation que nous verrons plus tard. 3. position:absolute Déplaçons div-1a dans le coins supérieur droit de la page: Footnotes 4. position:relative + position:absolute

Standardista Float On n'utilise plus autant les float aujourd'hui, mais parfois c'est encore incontournable. Dans cette excellente intro (ou révision), Ire Aderinokun revisite float en présentant les règles qui régissent son comportement. Par Ire Aderinokun Même si je n’utilise plus que rarement les float aujourd’hui, il y a encore des circonstances où ils constituent la seule solution viable. Dans ces rares occasions, je suis souvent contrariée parce qu’ils ne fonctionnent pas comme je l’avais prévu. J’ai donc décidé d’aller voir de plus près les règles qui régissent le comportement des float et la façon correcte de les utiliser. Les règles de float La propriété float peut prendre quatre valeurs : Ce que chacune de ces valeurs signifie pour le positionnement de l’élément à l’intérieur de son élément parent — et plus généralement dans la page — est déterminé par les règles qui suivent. 1 - Un élément flotté est “invisible” pour son parent C’est la position “optimale” pour un élément flotté. Clearing Clearfix

25 Useful CSS3 Techniques and Tutorials Learn how to earn $125 or more per hour as a freelancer - Click Here Looking for hosting?. We recommend MediaTemple for web hosting. Use Code MTLOVESDESIGN for 20% off Css3 have a capacity to revolutionize the way we design/develop website. css3 is intoducing loads of new and exciting features. It is essential today for a web designer to know about CSS3 and there are many tutorials and resources for the CSS3. 1.) We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling). 2.) Analogue clock created using webkit transition and transform CSS. 3.) The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. 4.) What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents? 5.) 6.) 7.) 8.) 9.) 10.) 11.) 12.) 13.) 14.) 15.) 17.)

Open Graph Protocol On continue sur le référencement sur Facebook avec le protocole Open Graph qui est la suite logique d’une série de billets sur Facebook que j’avais un peu abandonné… Si tu les a manqué il faut sans doute commencer par les premiers articles. Les enjeux du référencement sur Facebook Le concept de « Social Rank » et le signaux qui pourraient être pris en compte par les algorithmes de classement des technologies de recherche Comment ces signaux sont interprétés avec le « Social Graph » Il est donc maintenant temps d’arriver vers des choses un peu plus concrètes avec le socle permettant la communication des informations en les sites web et la plateforme Facebook : le Protocole Open Graph. L’«Open Graph Protocol» : les principes Techniquement, le concept du Social Graph (le boite noire de Facebook) est supporté par le protocole Open Graph. Comment les sites web communiquent avec Facebook ? Cette communication est rendue possible par les plugins sociaux en particulier le célèbre bouton «j’aime».

Apprendre HTML5, CSS3 pour créer un site web À travers de nombreux exemples pratiques et cas concrets, Alsacréations vous propose de découvrir toutes les possibilités offertes par la conception web aux normes, HTML, XHTML, HTML5, les feuilles de style CSS et CSS3, le Web mobile, l'accessibilité, PHP, JavaScript, jQuery, etc. Tutoriel : Guide pas à pas Article : Document d'analyse ou de référence Astuce : Court stratagème toujours utile Cette page présente une sélection de nos ressources. Vous pouvez aussi consulter la liste complète des tutoriels et articles ou des astuces. Pensez à utiliser le moteur de recherche. Comprendre le positionnement en CSS Consolidez et élargissez vos connaissances des différents schémas de positionnement CSS actuellement utilisés ou avant-gardistes (flux, positionnement absolu, fixé, relatif, flottement, inline-block, modèle tabulaire). Découvrez nos formations web, leurs programmes, les dates des sessions et les tarifs sur le site formations.alsacreations.fr

Shéma 9.1 Introduction au modèle de mise en forme visuel Ce chapitre 9 et le suivant décrivent le modèle de mise en forme visuel : l'interprétation par un agent utilisateur de l'arbre du document et du rendu de celui-ci par un média visuel . Dans ce modèle, chaque élément de l'arbre produit zéro ou plusieurs boîtes selon le modèle de la boîte. La construction de ces boîtes est gouvernée par : les dimensions de la boîte et son type ; le schéma de positionnement (en flux normal, en positionnement flottant et absolu) ; les relations entre les éléments dans l'arbre du document ; des informations externes (ex. la taille de la zone de visualisation, les dimensions intrinsèques des images, etc.). Les propriétés définies dans ce chapitre et le suivant concernent les médias continus et les médias paginés. Le modèle de mise en forme visuel ne précise pas tous les aspects de la mise en forme (ex. il ne spécifie pas d'algorithme pour l'interlettrage). 9.1.1 La zone de visualisation zone de visualisation . Les

Circle Hover Effects with CSS Transitions From our sponsor: Get started on your Squarespace website with a free trial In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. We will omit vendor prefixes in this tutorial. So, let’s get started! The HTML For most of the examples, we’ll be using the following structure: <ul class="ch-grid"><li><div class="ch-item ch-img-1"><div class="ch-info"><h3>Use what you have</h3><p>by Angela Duncan <a href=" on Dribbble</a></p></div></div></li><li><div class="ch-item ch-img-2"><div class="ch-info"><h3>Common Causes of Stains</h3><p>by Antonio F. The CSS Example 1

SEO Vous trouverez dans ce Guide SEO toutes les bonnes pratiques du SEO pour faciliter l’exploration et l’indexation de votre site web par les moteurs de recherche. Ce guide SEO propose des articles pédagogiques décrivant les bonnes pratiques permettant à un site d’être bien compris et indexé par les moteurs de recherche. Les articles du Guide SEO peuvent être lus indépendamment, selon vos besoins. Très bonne lecture! Guide SEO : INTRODUCTION Pour commencer voici quelques articles d'introduction permettant de poser les bonnes bases des principes généraux du SEO. Guide SEO : LES BALISES Ici vous trouverez toutes les règles de mise en place, les erreurs à éviter et surtout une méthodologie pour la rédaction des balises essentielles (title, meta description...) pour le référencement naturel. Guide SEO : LE CONTENU Le contenu est un des éléments le plus important dans le SEO car c’est bien sur lui qui fournit la matière première aux moteurs d'indexation tels que Google et Bing. Guide SEO : LES URLs

Related: