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 ! [Source] Vous avez aimé cet article ?
Signaler les liens externes via CSS
Les liens externes, c’est-à-dire les liens qui pointent vers des sites différents du site actuel, doivent être signalés selon les recommandations du W3C. Cela apporte une petite information très utile aux visiteurs lors de la lecture d’un article. Malheureusement ce système est très rarement mis en place. Cette petite astuce est facilement mise en application à l’aide de règles CSS. Rien de plus simple, nous ajoutons ici une icône « external.png » en arrière plan à tous les liens. Il suffit maintenant d’annuler cette même règle pour les liens qui ne sont effectivement pas des liens externes en utilisant les sélecteurs d’attributs en CSS : La seconde règle permet de préciser de nouvelles propriétés pour les liens qui contiennent dans l’attribut href le nom de domaine de notre site. Cela donnera ceci : Ici, le lien « Readability » fait référence à un article du blog donc pas d’icône !
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. 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><! Problems With The Method Using :after Toggle Trouble
Mise en page CSS avancée via propriété display
L'abandon par de plus en plus d'intégrateurs de l'utilisation de tableaux pour l'élaboration de mises en page a indiscutablement apporté de nombreux avantages, mais également son lot d'inconvénients. Parmi ceux-ci, un majeur: le centrage vertical simple et automatisé du contenu d'un objet. Les habitudes de plusieurs années de développement par tables ont laissé des traces, des habitudes ancrées de manière indélébile qui ne sont pas systématiquement préjudiciables; c'est entre autres le cas du recours à la propriété vertical-align. Fort de ce constat, et vu la puissance qu'offre les cellules de tableaux en terme d'alignement vertical de leurs contenus, la spécification CSS admet logiquement l'attribution de ce comportement à tout élément qui en nécessiterait. Prenons un exemple simple de disposition d'un texte scindé en trois paragraphes que l'on souhaite agencer en drapeau: Logiquement, ma structure HTML sera des plus simplistes:
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. Les caractéristiques d'un élément de type block : Les éléments de type block peuvent contenir à la fois d'autres éléments de type block, des éléments de type inline ou du texte1.Il est possible de fixer une largeur et une hauteur à ces élémentsPar défaut, la largeur d'un élément de type block est aussi grande que celle de son conteneurIls s'empilent naturellement les uns au-dessus des autres, dans l'ordre du flux HTML (Dans un flux de texte, ils passent à la ligne et forcent le retour à la ligne des éléments qui les suivent, les caractères invisibles présents avant et après sont ignorés) Les caractéristiques d'un élément de type inline :
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 :
Les sprites CSS - Alsacréations
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). Les avantages des sprites CSS sont multiples : Des sites à fort trafic (Youtube, Google, Facebook, Amazon, ...) exploitent cette technique sur des pages que vous consultez tous les jours : Inconvénients
About rel="canonical" - Webmaster Tools Help
If you have a single page that's accessible by multiple URLs, or different pages with similar content (for example, a page with both a mobile and a desktop version), Google sees these as duplicate versions of the same page. Google will choose one URL as the canonical version and crawl that, and all other URLs will be considered duplicate URLs and crawled less often. If you don't explicitly tell Google which URL is canonical, Google will make the choice for you, or might consider them both of equal weight, which might lead to unwanted behavior, as explained in Reasons to choose a canonical URL. How Googlebot indexes and chooses the canonical URL When Googlebot indexes a site, it tries to determine the primary content of each page. Google chooses the canonical page based on a number of factors (or signals), such as whether the page is served via HTTP or HTTPS, page quality, presence of the URL in a sitemap, and any rel=canonical labeling. Valid reasons for keeping similar or duplicate pages
