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) Related:  WebdesignRNTR

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.

Que se passe-t-il en mode quirks ? (traduction) Ce billet est la traduction de l’article « What happens in Quirks mode » de Jukka “Yucca” Korpela initialement paru sur le site du Tampere University of Technologie (Finlande) le 13 avril 2007, dernière modification le 28 février 2008. Le mode quirks est un mode de fonctionnement des navigateurs Web tels qu’Internet Explorer (IE), Firefox et Opera. En gros, le mode quirks (aussi appelé mode compatibilité) signifie qu’un navigateur relativement moderne simule intentionnellement de nombreux bugs des anciens navigateurs, en particulier IE 4 et IE 5. Le mode quirks est déclenché par le doctype sniffing aussi connu sous le nom de doctype switching. Le but du mode quirks est de faire que les vieilles pages s’affichent comme l’a voulu leur auteur. Il n’existe pas de spécification de ce qui se passe en mode Quirks. Lors de la création d’une nouvelle page, vous n’avez pas besoin d’avoir de connaissances sur le mode quirks et ne devriez normalement pas y penser. Démo simple (Mode quirks) stuff

Liste des éléments HTML5 - Guides pour développeurs Web Cette Page n'est pas encore complète. Travail progressif basé sur document de travail en court à Élément racine Les éléments racines définissent la structure d'un document HTML. Ils sont présents dans chacune des pages web et se situent à la suite de la déclaration doctype à la première ligne du document HTML. Métadonnées du document Les méta-données contiennent les informations liées à la page telles que les styles de présentation et les scripts. Gestion des scripts Sections Contenu de type bloc Les sémantiques à un niveau textuel Les éléments d'édition Le contenu inclus Les données tabulaire Les formulaires Les éléments pour l'interactivité Dernière mise à jour par :LiliTha,

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

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

The 2 Principles Of Object Oriented CSS Do our current css practices scale? Are our stylesheets easy to maintain? Can non-css coders quickly and easily to build new web pages with our styles? Object oriented css (OOCSS) is an approach to writing html and css that allows us to answer yes to each of these questions. Over several recent posts I’ve been exploring topics around our approach to writing css. Please know that I haven’t had a chance yet to use oocss concepts in practice to any great degree and so this post is mainly based on research about the subject. What is Object Oriented CSS? CSS is not an object oriented language and the programmer in you might be cringing at the name. A css object is any repeating visual pattern, which can be abstracted into a snippet of html, css, and sometimes javascript. The goal of Object Oriented CSS is to encourage code reuse for faster and more efficient stylesheets that are easier to maintain. Separate structure and skinSeparate container and content Separate Structure and Skin

Raphaël—JavaScript Library 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

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

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

Related: