Clearing a float container without source markup (This clearing technique was developed by Tony Aslett, of csscreator.com. The earliest known mention of the basic :after idea is found here.) Notice as of March 4th, 2008: The article you are reading is getting a bit old and much new information on the subject of clearing has appeared since it was written. You may find this newer article very interesting. Clearing Floats The Old Fashioned Way When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. This float-enclosing behavior in IE can also be 'toggled' off again just by hovering of links within the container, if that hovering alters either the link background or one of several other CSS properties. The W3C suggests placing a "cleared" element last in the container box, which is then recognized by the container height, forcing the container to enclose the float above that cleared element too. <div><!
Structure HTML et rendu CSS des balises : bloc et en-ligne La compréhension de la structure des éléments HTML est paradoxalement un sujet peu connu des développeurs web. Bien souvent sont évoqués des éléments de type bloc et des éléments de type en-ligne. Il faut savoir que ces désignations sont quelque peu faussées car elles mélangent une partie des spécifications HTML (qui proposent des catégorisations d'éléments) et une partie des spécifications CSS (qui proposent des modèles de rendus). Historiquement, HTML ne proposait que deux catégories d'éléments : les éléments de niveau block et les éléments de niveau inline. Cette catégorisation autorise ou non certaines imbrications (par exemple un niveau inline de peut pas contenir de niveau block). En parallèle, les spécifications CSS proposent un vaste choix de modes de rendu pour les éléments via la propriété display. En HTML5 La catégorisation est améliorée et modifiée depuis HTML5. Emboîtements En HTML4 et XHTML 1.x Chaque élément (balise HTML) se caractérise par une double identité : block inline
La transparence de couleur avec RGBa en CSS3 Le module de couleurs de CSS3 introduit la notion de transparence dans les valeurs associées à une couleur, l'écriture RGBa. Cette composante de la couleur permet de jouer sur les effets d'opacité entre les différentes couches d'éléments HTML. Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity (également CSS3 mais assez ancienne déjà) : cette dernière est une propriété qui s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement. De ce fait, RGBa est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc. Voici une illustration du principe de transparence de la couche Alpha (RGBa) (Voir le résultat (RGBa) sur votre navigateur) : Principe de la notation RGBa <div><h1>Joli titre</h1></div>
La théorie des floats « OnFaitDuWeb.com Les éléments flottants ou floats font partie des outils de positionnement les plus utilisés en CSS et pourtant ils sont souvent une source de tracas majeur pour les développeurs web. Le problème du float est celui de la plupart des autres propriétés de positionnement qui « sortent de l’ordinaire », c’est-à-dire qui ne correspondent pas au positionnement par défaut. Parce qu’il applique de nouvelles règles de positionnement, un élément flottant ne peut pas être manipulé de la même façon qu’un positionnement normal si l’on souhaite avoir le résultat désiré. En clair, vous ne pouvez pas exiger d’une cafetière qu’elle vous fasse un café si vous mettez des feuilles de thé dans le filtre sous prétexte que, ben, cette technique a toujours bien marché dans la théière. Pour que la propriété float fonctionne correctement, il faut l’utiliser avec les bons éléments. Avant de parler de float, parlons de flux. La notion de flux est très importante en CSS. On en vient à la définition… 1. 2. 3. 4. 5. 6.
CSS display: inline-block La propriété display permet d'indiquer explicitement le mode de rendu d'un élément HTML. Les valeurs les plus connues sont none, block et inline. Pourtant il y en a beaucoup d'autres et en particulier la valeur inline-block Block et inline, les basiques Chacune de ces valeurs va avoir une incidence sur la façon de rendre les éléments HTML ciblés. Malheureusement, les normes HTML 4.01 et CSS 2.1 sont assez floues sur ce que sont des éléments de type block ou inline et les futures normes HTML 5 et CSS 3 sont à peines plus loquaces sur le sujet. Les caractéristiques d'un élément de type block : Les caractéristiques d'un élément de type inline : Les éléments de type inline ne peuvent contenir que d'autres éléments de type inline ou du texteIl n'est pas possible de définir une largeur et une hauteur explicite pour ces élémentsPar défaut, leur largeur et leur hauteur dépendent du contenue de l'élémentIls s'écoulent selon le flux du texte HTML inline-block, un mélange des deux ! Cas d'utilisations
Tableaux HTML | CommentCaMarche Mars 2014 Tableaux HTML Il est souvent utile de présenter des informations mieux structurées qu'avec des listes. Les tableaux permettent de les afficher en lignes et en colonnes. Les tableaux sont définis comme étant des suites de lignes. Un tableau doit respecter les quelques règles suivantes : Le tableau est encadré par les balises <TABLE> et </TABLE>. Voici un exemple de tableau HTML : <TABLE BORDER="1"><CAPTION> Voici le titre du tableau </CAPTION><TR><TH> Titre A1 </TH><TH> Titre A2 </TH><TH> Titre A3 </TH><TH> Titre A4 </TH></TR><TR><TH> Titre B1 </TH><TD> Valeur B2 </TD><TD> Valeur B3 </TD><TD> Valeur B4 </TD></TR></TABLE> Ce code donne le résultat suivant : Attributs A voir également Communautés d'assistance et de conseils. Tables Tablas Die Tabellen Le tabelle Os quadros
Les ombrages en CSS3 Grâce à des propriétés telles que box-shadow, text-shadow et border-colors, les feuilles de style offrent la possibilité de créer des ombrages sur les différents éléments de votre page sans nécessiter d'image décorative et de découpes intempestives. Tout n'est pas rose puisque certains navigateurs à la traîne ne reconnaissent pas encore ces différentes propriétés et nécessitent des adaptations personnalisées. Faisons le tour du propriétaire... Box-shadow La propriété CSS box-shadow a été incluse dans le module "borders" de CSS3 et permet de générer une ombre portée sur n'importe quel élément HTML. Parmi les différentes valeurs utilisables, il est possible d'indiquer le décalage vertical et horizontal ainsi que la force du dégradé. En voici une illustration (Voir le résultat sur votre navigateur) : Syntaxe Compatibilité et utilisation concrète Seuls les navigateurs modernes, reconnaissent la propriété box-shadow. Adaptation pour Internet Explorer <9 Le filtre Shadow Le filtre Glow La syntaxe :
Les commentaires conditionnels pour Internet Explorer Les commentaires conditionnels sont un mécanisme propre à Internet Explorer Windows, qui permettent d'inclure dans une page (X)HTML, de manière valide, du code qui ne sera lu et interprété que par Internet Explorer, ou par l'une ou l'autre de ses versions. Techniquement, il s'agit de simples commentaires HTML, qui seront compris comme tels par la plupart des navigateurs. Cependant, le contenu de ces commentaires a une syntaxe spéciale, qui permet à Internet Explorer de savoir s'il doit interpréter le contenu du commentaire ou bien l'ignorer. Les commentaires conditionnels sont compris par Internet Explorer depuis la version 5.0 mais sont officiellement abandonnés à partir d'Internet Explorer 10. Syntaxe de base L'exemple le plus simple de commentaire conditionnel est le suivant: Rappel: un commentaire conditionnel ne peut être inséré que dans un document (X)HTML, et ne peut contenir que des instructions (X)HTML et non CSS. Exemple d'utilisation: Viser une version ou un éventail de versions
Tutoriel sur le sitemap Google pour les images Par Olivier Duffez, Lundi 12 avril 2010 Depuis le temps qu'on attendait un moyen de faciliter le crawl et l'indexation des images, voilà qu'enfin Google rajoute la possibilité d'indiquer des URL de fichiers image dans les sitemaps XML. Explications... Remarque : N'oubliez pas de consulter également le tuto général sur les fichiers sitemaps. Ajouter des images dans un sitemap Google Attention, Google n'a pas créé un nouveau format de fichier sitemap pour les images, mais le support pour les images dans le fichier sitemap Google traditionnel (en version XML). Pour référencer vos images dans un sitemap, vous devez donc commencer par créer un fichier sitemap XML classique, qui liste certaines pages de votre site (par exemple les nouvelles ou celles qui ont été mises à jour ou encore les plus importantes). Ensuite pour chaque page ainsi listée dans votre sitemap (identifiée par son URL), vous pouvez indiquer à Google une liste d'images qui apparaissent sur cette page. Vous devriez lire aussi :
Fixing position:fixed for Windows Internet Explorer STATUS QUO (2006-09-26): Internet Explorer 7 applies its numerous css changes – including support for fixed positioning – only in ‘standards-compliant mode’. Both methods described below should still be ‘safe’ to use (albeit for different reasons). More info about new possibilities and consequences in terms of doctype-sniffing will be added soon. The reason that the initial approach does not work in versions prior to 6 is lacking css support for the root element. There is, however, a trivial workaround: create a dummy element that serves as the document body and move the relevant properties one node down. Absolutely positioned elements outside of div.content will be fixed in respect to the viewport, absolutely positioned elements inside of div.content will behave normally. This makes it mandatory to trigger quirks mode for ie >= 6, e.g. by inserting a comment (accurately: comment declaration; see also: other prolog) before the document type declaration. Complete cruft-free demos:
CSS current work & how to participate Explanation of colors & status codes W3C indicates the maturity of specifications by a status code. The CSS working group uses the following, from least to most stable: The names are defined in sections 7.3 and 7.4 of the W3C process document. The informal stability levels used to group the specs are defined in this 2007 description of CSS stability levels. If you want to help Everybody can take part in the discussions on the archived mailing list www-style@w3.org. On the mailing list, you will be talking to many people, many very busy people. If you are sending comments on a specific CSS module, please prefix the subject of your message with the appropriate spec code (given in the “Status of this document” section) in brackets, e.g. Laurens Holst (a.k.a. If you work for a W3C member organization, you can also join the CSS working group and see drafts before they are published. About the test suites The test suites have their own archived mailing list public-css-testsuite@w3.org.
Crazy Egg – Visualize where your visitors click Over 200,000 businesses Convert Better with Crazy Egg, The Original Heatmapping Technology A heatmap is an easy way to understand what users want, care about and do on your site by visually representing their clicks - which are the strongest indicators of visitor motivation and desire. A Crazy Egg heatmap lets you collect more than 88% of the data you would using a traditional eye-tracking process. At a fraction of the price. With no hardware. Almost no IT involvement. Because Google Analytics & Site Catalyst Leave Questions Unanswered, Trust Crazy Egg Visualizations to Help You Understand Your Users. Wouldn't you like to fill in the gaps left by analytics… without A/B testing every little assumption… and without breaking the bank on in-lab usability studies? Heat Maps: At a glance, see the hotspots on each page - so you know what to change, preserve or delete "Do our users think they can click greyed out buttons?" Click-Tracking Overlays: Find a hot spot? Scroll Maps:
Générer des boutons en CSS Générer des boutons en CSS Si vous développez vos petits sites vous même, sachez qu'il existe un site qui s'appelle Button Maker et qui permet de créer des boutons de toute beauté, entièrement en CSS. Vous spécifiez vos couleurs, votre texte et en cliquant sur le rendu, vous obtiendrez le code CSS qui va bien pour mettre ça sur votre site. Maaaa kéééé c'est beauuuuuu ! Attention quand même sous IE car là, ça coince un peu...pas de dégradé, pas de coins arrondis... [Source] Vous avez aimé cet article ?