background preloader

Mise en page CSS avancée via propriété display

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:

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><!

Maîtriser l'impression CSS Proposer une version imprimable reposant uniquement sur une feuille de style pour le media print appliquée à la page affichée par le navigateur offre plusieurs avantages immédiats : Il n’est plus nécessaire de générer côté serveur une version HTML spécifiquement destinée à l’impression ; La feuille de style pour le média print est généralement rapide à créer, dès lors que les styles pour l’affichage sont réservés à ce dernier par la précision du media screen ; Les possibilités sont variées (toutes les propriétés de positionnement, de bordures, de typographie, etc. sont disponibles) ; Les résultats par défaut sont corrects pour un effort somme toute raisonnable. On rencontre cependant deux sortes de difficultés : certaines parties du contenu affiché peuvent finalement ne pas être imprimées, certaines propriétés des CSS print peuvent ne pas avoir d’effet, selon les navigateurs. Les problèmes d’impression peuvent être classés en deux catégories : Ce qui dépend de la configuration du navigateur

Une «classe conditionnelle» pour IE 6 et 7 - Alsacréations Les cancres du Web, Internet Explorer 6, 7 et parfois 8, nous mènent souvent la vie dure. Même quand on s’abaisse à leur niveau, il leur arrive de ne pas comprendre, ou d’y mettre de la mauvaise volonté. La solution classique (comprendre: à l’ancienne) est d’utiliser des hacks CSS. Ces derniers sont déconseillés car peu fiables; en effet, on ne sait jamais à l’avance quels seront les navigateurs sur le marché dans deux ou cinq ans, et comment ils comprendront ou pas nos hacks CSS. Une deuxième solution, conseillée par Microsoft et Alsacréations (que du beau monde :)), est d’utiliser les commentaires conditionnels. Nous allons voir dans cet article que l’utilisation habituelle des commentaires conditionnels a quelques inconvénients, et proposer une technique qui combine plusieurs avantages : les classes conditionnelles. Le problème des commentaires conditionnels Cependant, dans la pratique, une feuille de style corrective pour Internet Explorer ne suffira pas. Une alternative ?

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

Google's 174 web fonts in one convenient downloadable tarball for your Photoshopping enjoyment - Axon Flux // A Ruby on Rails Blog Google’s Font Directory and API for web fonts could have a transformative effect on how we read the web. The only problem is, Google has made it very difficult to download all of the actual font files.Web designers must be free to experiment with these new fonts, to sketch, comp and get to know these typefaces in browser and non-browser applications. This is why I’m providing this archive. You can use it in web pages, but until I found this, I couldn't design with it. I found the packaging still vaguely annoying since each ttf file was in a separate directory, so I ran this on the command line (cd to the untarballed directory first): mkdir all; find . Then I had all the ttf files in one directory at the root (.

HasLayout et bugs de rendu dans Internet Explorer 6-7 - Alsacréations Le HasLayout, dont vous avez sans doute entendu parler au détour d'un tutoriel ou sur un forum, est une spécificité du navigateur Internet Explorer pour Windows, qui affecte les versions 5 à 7 incluses. Il s'agit d'un mécanisme interne du moteur de rendu d'Internet Explorer. Le HasLayout intervient dans le positionnement des éléments et plus généralement dans le calcul de l'affichage des pages web. Bref, c'est une question de cuisine interne. Pourquoi s'en occuper, s'il s'agit de cuisine interne ? Eh bien parce que cette cuisine-là n'est pas invisible, et que ses conséquences se font sentir dans nos pages web. Concrètement, qu'est-ce-que c'est? Les explications détaillées sur le HasLayout peuvent être trouvées dans l'article On Having Layout. On retiendra surtout que, pour Internet Explorer, tout élément d'une page HTML peut avoir deux états: soit il a le layout, soit il ne l'a pas. Mais qui a le layout? Un exemple de différence de rendu lié au layout On pourrait multiplier les exemples.

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 :

WebKit Radial Gradients (Circle gradient) « Jukka-Pekka Keisala WebKit in January 2011 released new gradient syntax that is closer to w3c recommendation and Mozilla implementation. The new syntax has four gradient functions: linear-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() Using CSS gradients in a background lets you display smooth transitions between two or more specified colors; this lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. A gradient specified using circles is called a . -webkit-radial-gradient(circle, white, black); -webkit-radial-gradient(center, 20px 20px, white, black); -webkit-repeating-radial-gradient(left, red 10%, green 20%, blue 30%); -webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px); -webkit-repeating-linear-gradient(top left, red, red 5px, white 5px, white 10px); -webkit-repeating-linear-gradient(-5px -5px, circle, #bfeeff, #bfeeff 15px, #fff 15px, #fff 30px, #bfeeff 30px, #bfeeff 40px); References

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 ?

Les fonctionnalités CSS3 avec Internet Explorer L’utilisation du CSS3 est probablement une des tendances les plus fortes actuellement dans la conception web, permettant ainsi d’implémenter des solutions à des sites web en éliminant l’utilisation de certaines images ou de code JavaScript. Malheureusement, il n’est pas surprenant de voir qu’Internet Explorer, même dans la version 8 du fureteur, ne supporte toujours pas la majorité des nouvelles fonctionnalités qu’offre le CSS3. Vous trouverez, dans le billet suivant, des solutions afin de rendre plusieurs des nouvelles fonctionnalités compatibles avec les différentes versions d’Internet Explorer (6,7 et 8). «Le billet suivant est une traduction d’un article paru sur le site web de SmashingMagazine.com écrit par Louis Lazaris». Opacité/Transparence Même si la propriété d’opacité CSS3 n’est pas compatible dans IE, nous pouvons utiliser un paramètre appelé filter afin d’arriver au même résultat. La syntaxe Démonstration Les Inconvénients Coins ronds (border-radius) N.B. La Syntaxe La syntaxe CSS3:

Gérer les débordements de contenu grâce à CSS - Alsacréations Sommaire Précision : cet article se limite volontairement au dépassement de contenus et non à d'éventuelles erreurs de conception de design, de mauvaise gestion de la fluidité, ou à des débordements de blocs flottants. Préambule J'ai une mauvaise nouvelle pour vous : le Web n'est pas un média figé ou paginé tel que le média d'impression. Puisque - heureusement - il n'est plus possible de fixer la taille, voici un point sur les différentes techniques modernes permettant de canaliser les caprices de vos contributeurs… overflow: hidden : circulez, y'a rien à voir ! La propriété CSS2 overflow a été conçue pour administrer les débordements d'éléments au sein d'un bloc. A l'heure actuelle, le peu de valeurs prises en charge par cette propriété la rend quelque peu abrupte : soit le contenu est tronqué et masqué (valeur hidden), soit de laides barres de défilement apparaissent (valeur scroll ou auto). Voici comment mettre en œuvre cette propriété : Exemple (HTML) : Partie CSS : Compatibilité Conclusion

Osez HTML5 et CSS3 ! - Alsacréations Un site perso en fil rouge Pour étayer cet article, nous allons nous servir d'un fil rouge : mon site personnel Goetter.fr dont l'intégration a été réalisée en plusieurs étapes, et destiné à servir de passerelle entre mes différentes activités. Puisqu'il s'agit d'un site sans grande portée médiatique ni contraintes, j'ai pu en profiter pour tester HTML5 et moult règles CSS2 et CSS3 (border-radius, rgba, inline-block, transitions, rotations, @font-face, text-shadow, opacity, :before/:after et autres joyeusetés...). Voyons en détails le cheminement et les écueils de cette intégration... Les Grands Anciens Rappel historique Avant de nous lancer dans le vif du sujet, rappelons certains points essentiels. Fort heureusement, cela n'empêche pas les navigateurs récents de se lancer dans l'aventure en proposant des implémentations de propriétés considérées comme "sûres". A l'heure actuelle, quasiment tous les navigateurs modernes reconnaissent les propriétés CSS3 ou HTML5 employées dans 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. De tête, le seul site connu qui l’utilise est Wikipédia au sein des articles et à l’aide d’une petite icône : 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 :

Related: