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

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

Les microformats et microdata apportés par HTML5 Microformats, microdata, nouvelle sémantique, nouveaux éléments HTML… Tant de nouveautés qui perturbent les intégrateurs web soucieux de se mettre à jour dans leurs compétences ou curieux de savoir ce dont ils peuvent déjà faire usage dans leurs intégrations. Bien que les microformats existent depuis 5 ou 6 ans, ce n’est qu’avec l’arrivée de HTML5 que la profession et les outils sont suffisamment mûres pour commencer à les exploiter réellement. Nous allons essayer de nous concentrer sur les microformats et, surtout, les microdata apportées par HTML5. Cet article a été rédigé par Geoffrey Crofte, intégrateur et designer web chez Alsacréations et pour son petit studio Creative Juiz. Présentation Faisons les présentations avant de nous attaquer à du code. HTML5 apporte de nombreux nouveaux éléments qui viennent renforcer le sens des composants de votre page. Fil d’ariane et note transportés par microdonnées Les microformats Voici un exemple de code un peu plus parlant : Les microdonnées Rendu :

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

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

Vidéo Succès Systématique | Tests-Marketing.com Cliquez maintenant sur le bouton ci-dessous : Oui, je veux accéder immédiatement à la formation "Tester, Savoir & Réussir" et aux nombreux bonus, et mettre en place un processus de réussite systématique sur mon site Internet : Valeur réelle de l’ensemble : 1'129 € Prix habituel : 194 € (2x97) Aujourd’hui : 97 € Une fois 97€ 2 mensualités de 48,5€ (sans frais) Paiement sécurisé géré par Paypal.

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: