Le blog de Guillaume Bizet - Xhtml / CSS

La propriété CSS de texte à la loupe

Guillaume BIZET — Wed, 15 Oct 2008 10:32:00 +0200

J'ai découvert hier cette fiche récapitulative de toutes les valeurs et options pour les propriétés font et text en css chez Specky Boy. Je dois dire que je ne les connaissais pas toutes et du coup cela me donne envie de faire des test.

Vous les connaissiez toutes ces valeurs et option, vous ?

[CSS] Enlever les pointillés des liens

Guillaume BIZET — Tue, 29 Jul 2008 14:55:00 +0200

Dans l'optimisation d'un site web ou d'un blog, il faut parfois penser aux petits détails qui font la différence entre les beaux sites et les très beaux. Il en est un qui n'est pas très connu mais qui vaut le détour.

Vous avez surement dû remarquer que quand vous cliquez sur un lien, au moment où vous le cliquez, il s'entoure d'une légère bordure en pointillé (cf l'exemple en image ci dessous avec le menu de ce blog)

Il s'agit de la propriété CSS "Outline" qui est très proche de la propriété border mais qui a l'avantage de ne pas faire partie du fameux "box-model" Pour supprimer ce disgracieux outline au clic sur un lien, il vous suffit simplement d'ajouter l'écriture suivante dans votre fichier CSS

a {   outline: none; }

et voilà le résultat, cf image ci-dessous

Pratique et classe, non ?

Hack de min-height pour IE

Guillaume BIZET — Mon, 16 Jun 2008 09:04:00 +0200

Comme d'habitude c'est sous Internet explorer que je me retrouve confronté à des problème de prise en compte de la hauteur minimum d'un élément.
J'ai enfin réussi à trouver une solution qui me conviens, pour l'instant, et je voulais savoir ce que vous en pensiez

html>body div#machin {
	height: auto;
	min-height: 400px;
	}

div#machin{
	height: 400px;
	}

C'est peut-être du bidouillage mais bon si vous avez mieux je suis preneur
Quelle solution employez vous dans ce genre de cas ?

Table des équivalences pour les polices d'écriture entre pts, px, Em et %

Guillaume BIZET — Mon, 02 Jun 2008 09:49:00 +0200

Un petit tableau ultra simple mais qui m'aide pas mal quand je fais des thèmes pour ne pas m'emmêler les pinceaux dans les équivalences entre les différentes mesures utilisables pour les polices d'écritures :

points
pixels
Em
%

Elle fait partie d'une cheat sheet sur les CSS que j'ai trouvée sur un blog espagnol : ateneupopular

A garder sous le coude

Calculatrice em / px

Guillaume BIZET — Mon, 21 Apr 2008 09:12:00 +0200

Dans la construction d'un site et d'une feuille de style, il est très important de faire attention aux unités employées pour la police d'écriture car cela impacte directement sur les propriétés css enfants de la balise parent.
Je m'explique :


body { font-size : 0.8em; }

p {font-size: 0.6em;}

Ainsi la police d'écriture du paragraphe p est directement liée à celle de body. Par contre il est difficile de savoir, quand on construit sa feuille de style, cmment convertir une police en pixels vers sont équivalent en unité em.

L'Em calculator va vous faciliter le travail. Elle vous permet de faire la conversion entre ces unités et de voir quels seront les conséquences d'un changement de taille au niveau de la balise parent.

Screenshots :

Cliquez sur les images pour les voir en grand

A vos calculettes ...

Rendre le badge GTalk valide XHTML

Guillaume BIZET — Thu, 28 Feb 2008 13:39:00 +0100

Cliquez sur l'image pour la voir en grand

J'ai trouvé le code sur l'excellent blog de Ludovic. Merci à lui d'avoir partagé l'astuce

C'est tout simple. Remplacez

[html4strict]
<iframe src="http://www.google.com/talk/service/badge/Show?tk=votrecodespecifiquedonnepargoogle" frameborder="0" allowtransparency="true" width="200" height="60"></iframe>

par

[html4strict]
<object data="http://www.google.com/talk/service/badge/Show?tk=lememecodespecifiquedonnepargoogle" width="200" height="60" type="text/html">Service indisponible</object>

Et voilà.
Là je suis content

Un effet gradient sur du texte en CSS

Guillaume BIZET — Fri, 15 Feb 2008 11:19:00 +0100

Je trouve cette solution très ingénieuse pour pouvoir appliquer un effet de gradient sur du texte et en CSS.
Cela peut paraitre compliqué, et pourtant !!! C'est là que l'on voit la puissance des CSS

Voici comme le réaliser.
Code xhtml

[html4strict]
<h1><span></span>CSS Gradient Text</h1>

et code CSS

[html4strict]
h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

la clé du succès se situe dans les paramètres h1 { position: relative } et h1 span { position: absolute }

Si vous le souhaitez vous pouvez très bien adapter ce système pour donner un effet web2.0 à tous vos titres.
Pour cela réalisez le png qui va bien

Les avantages de cette technique :

technique valide pour tous les navigateurs puisqu'elle n'intègre pas de javascript ou de flash
vous pouvez utiliser la police que vous souhaitez

Voir des démonstrations
Télécharger un package de test

Merci WebDesignerWall

101 Techniques CSS

Guillaume BIZET — Fri, 18 Jan 2008 09:07:00 +0100

Le blog noupe a regroupé dans un billet 101 techniques CSS qui méritent d'être mieux connues.
Elle sont classées par catégories :

CSS Sprites
Coins arrondis
Technique de remplacement d'images
Portes coulissantes
Technique d'encadrement d'une image par du texte
Colonnes de même taille
Transformer une liste en barre de navigation
Stylisation des titres
Ombres en CSS
Transparence CSS
Différentes techniques sur les liens

Vous trouverez tout sur ce billet ... en anglais

Si avec ça vous avez pas des sites/blogs au cordeau !!!

Validez html et css en même temps

Guillaume BIZET — Wed, 19 Dec 2007 09:07:00 +0100

Vous connaissez bien sur les sites officiels pour faire valider la sémantique de votre site web :

validator.w3.org pour contrôler la partie HTML de votre site/blog
et jigsaw.w3.org/css-validator/ pour contrôler la partie CSS

et bien le site Xhtml CSS validator va vous faciliter la tâche puisqu'il fait les 2 validations en même temps.

Cliquez sur l'image pour la voir en grand

J'ai fait le test pour mon blog et voici le résultat

Cliquez sur l'image pour la voir en grand

Au passage si quelqu'un peut m'expliquer cette erreur CSS qui me fait ch***, je serai ravi de comprendre d'où elle vient puisque je ne trouve pas cette ligne dans mes fichiers CSS !!!

Vous pourrez même trouver sur ce site une extension pour firefox appelée BeValid! spécialement développée pour vérifier la validité Xhtml et CSS de l'url dans la barre d'adresse.

Alors, pratique non ?

Avec Simple CSS construisez vos fichiers CSS facilement

Guillaume BIZET — Tue, 27 Nov 2007 09:08:00 +0100

Simple CSS est un petit logiciel hyper sympa et très pratique qui va vous permettre de construire vos fichiers CSS. Ce logiciel est totalement gratuit et est disponible pour windows et pour mac.

Simple CSS vous permet deux choses :

créer un projet a partir de rien
importer un fichier CSS que vous pouvez modifier par la suite

L'interface est dépouillée mais très complète et les options sont nombreuses. Un encart de prévisualisation,présent en bas de la fenêtre, vous affiche le rendu final de votre feuille de style.
Simple CSS intègre un gestionnaire de projets qui va vous permettre d'organiser vos différentes feuilles de style en cours de développement.

Les liens :

Simple CSS, le site
Téléchargez le logiciel
La documentation

Quand on débute, qu'on ne sait pas trop comment créer des fichiers css ou alors que l'on a du mal à gérer correctement des feuilles CSS, c'est assez idéal comme solution je trouve

CSS Type : testez le rendu de votre police de caractère

Guillaume BIZET — Thu, 22 Nov 2007 09:09:00 +0100

CSS Type est un outil très pratique qui vous permet de tester le rendu de votre police de caractères avec différentes configurations.

Tout d'abord vous pouvez soit écrire un texte de test, soit choisir parmi les 5 textes enregistrés sur le site. C'est sur ce texte que seront appliqué les changements effectués par la suite
Choix de la police : 11 polices différentes
Choix de la taille de la police
Choix de la "décoration" du texte
Choix de l'espacement des mots
Choix de la hauteur de ligne
Choix de l'espacement des lettres
Choix de l'alignement du texte
Choix de la couleur du texte
Choix de la couleur du background
Choix de la taille de bloc
Choix de la taille du padding de ce bloc
Choix pour le retrait de texte en début de paragraphe
Choix du texte à afficher dans les boutons

Enfin, une fois que vous avez fait tous ces réglages, vous pouvez générer une feuille de style qu'il vous suffira alors de copier coller pour avoir le rendu souhaité sur vos pages

Ce système est surtout pratique pour ceux qui débutent avec les css

Screenshots :

Cliquez pour voir en grand

Afficher grace aux CSS une icone en fonction du type de fichier lié

Guillaume BIZET — Thu, 18 Oct 2007 09:02:00 +0200

Je continue avec les promesses, dans le billet de présentation de mon nouveau thème je vous expliquais que j'avais réussi à trouver le moyen d'identifier le type de fichier d'un lien et à en afficher l'icone correspondante.

Cette technique que j'ai découverte en surfant sur le web est simple mais ... ne fonctionne pas sous la version Internet Explorer 6. Allez je vous ressort ma petite phrase habituelle.
Je ne saurais que trop vous conseiller de naviguer sur internet avec un navigateur respectueux des standards tel que Firefox
Ca, c'est fait

Voilà ce que cela peut donner

et voici le code css qui permet de réaliser cela

[css]
a[href $='.pdf'] { padding-left: 22px; background: transparent url(img/pdf.png) no-repeat center left;}
a[href $='.gif'] { padding-left: 22px; background: transparent url(img/image.png) no-repeat center left;}
a[href $='.png'] { padding-left: 22px; background: transparent url(img/image.png) no-repeat center left;}
a[href $='.jpg'] { padding-left: 22px; background: transparent url(img/image.png) no-repeat center left;}
a[href $='.doc'] { padding-left: 22px; background: transparent url(img/word.png) no-repeat center left;}
a[href $='.xls'] { padding-left: 22px; background: transparent url(img/excel.png) no-repeat center left;}
a[href $='.css'] { padding-left: 22px; background: transparent url(img/texte.png) no-repeat center left;}
a[href $='.txt'] { padding-left: 22px; background: transparent url(img/texte.png) no-repeat center left;}
a[href $='.php'] { padding-left: 22px; background: transparent url(img/php.png) no-repeat center left;}
a[href $='.zip'] { padding-left: 22px; background: transparent url(img/compress.png) no-repeat center left;}
a[href $='.rar'] { padding-left: 22px; background: transparent url(img/compress.png) no-repeat center left;}
a[href $='.tar.gz'] { padding-left: 22px; background: transparent url(img/package.png) no-repeat center left;}
a[href $='.pkg.gz'] { padding-left: 22px; background: transparent url(img/package.png) no-repeat center left;}
etc ...

Mais cela fonctionne aussi pour identifier des services de messagerie tels que Aim, Msn, Yahoo messenger, ICQ, etc ...

[css]
a[href ^="aim:"]  { padding-left: 22px; background: transparent url(img/aim.png) no-repeat center left;}
a[href ^="msnim:"] { padding-left: 22px; background: transparent url(img/msn.png) no-repeat center left;}
a[href ^="xmpp:"] { padding-left: 22px; background: transparent url(img/jabber.png) no-repeat center left;}
a[href *="icq.com"]  { padding-left: 22px; background: transparent url(img/icq.gif) no-repeat center left;}
a[href *="edit.yahoo.com/config/send_webmesg?"]  { padding-left: 22px; background: transparent url(img/yahoo.gif) no-repeat center left;}
a[href ^="skype:"]  { padding-left: 22px; background: transparent url(img/skype.png) no-repeat center left;}

Je pense même que l'on peut détourner l'identification des vidéos pour identifier les services web où sont hébergés ces vidéos. Ainsi vous pourriez mettre une icône qui identifie une vidéo de youtube, de Dailymotion ou bien encore une image de Flickr, etc ...
Je l'ai testé et ça fonctionne parfaitement

[css]
a[href *="youtube.com/"] { padding-left: 22px; background: transparent url(img/youtube.png) no-repeat center left;}
a[href *="metacafe.com/"] { padding-left: 22px; background: transparent url(img/metacafe.png) no-repeat center left;}
a[href *="flickr.com"] { padding-left: 22px; background: transparent url(img/flickr.png) no-repeat center left;}
a[href *="zooomr.com"] { padding-left: 22px; background: transparent url(img/zooomr.png) no-repeat center left;}
a[href *="imageshack.us"] { padding-left: 22px; background: transparent url(img/imageshack.png) no-repeat center left;}
a[href *="bubbleshare.com"] { padding-left: 22px; background: transparent url(img/bubbleshare.png) no-repeat center left;}

Tous les exemples que je vous ai mis quelques exemples, mais il en existe bien d'autres, sont extraits de ce site : pooliestudios. Vous y trouverez tous les exemples en image ainsi quun package à télécharger comprenant :

un fichier html
un fichier css
un dossier avec les icônes correspondantes

Alors à vos fichiers CSS

Enjoy ...

CSS Menu Generator : des menus en CSS a customizer

Guillaume BIZET — Thu, 11 Oct 2007 14:07:00 +0200

Je vous avais déjà parlé de menus Xhtml / CSS très bien fait et gratuits, et bien CSS Menu Generator fait le même chose, mais va encore plus loin puisqu'il vous propose de construire directement votre menu et d'en télécharger le code complet.
Ainsi vous serez sûr d'avoir un menu 100% valide W3C

Vous avez le choix entre :

11 menus horizontaux
6 menus verticaux

Dernière chose si vous êtes un as des CSS, proposez leur un menu avant le 17/10/2007 et vous participerez à un tirage au sort pour gagner un Iphone

Screenshots :

YAML Builder : créez vos layouts online

Guillaume BIZET — Fri, 14 Sep 2007 09:15:00 +0200

Vous ne savez pas créer des layouts de blogs/sites, ou alors vous trouvez ça pénible !!!
Alors YAML Builder est fait pour vous !

Le fonctionnement de YAML Builder est ultra simple.
Vous avez une box déplaçable qui vous permettra de faire tous les réglages nécessaires à la construction de vos layouts.

Cliquez pour voir en grand

Voici les différentes option mises à votre disposition

Onglet HTML
- Choix du doctype :
- Choix des éléments de base
Onglet CSS
- Propriété du layout : largeur, centrage
- Propriétés des zones :organisation, taille
Onglet AddElements
- Éléments de contenus (h1, h2, p, ul, etc ...)
- Zones à ajouter dans les colonnes

En même temps que vous choisissez vos options, vous pouvez voir directement les effets de votre chois sur la maquette du layout qui se trouve en arrière plan.
Pour construire vos layouts , utilisez le drag and drop et c'est tout !!!
L'avantage de cet outil c'est qu'il pense même à faire des feuilles de styles optimisées pour Internet Explorer qui fait toujours des siennes en dne respectant pas les standards

Dorénavant vous ne pourrez plus dire que c'est compliqué.

Des styles pour votre pagination

Guillaume BIZET — Tue, 04 Sep 2007 17:51:00 +0200

A la recherche de styles pour la pagination de mon futur thème, je suis tombé sur cet article très intéressant qui détaille les styles de pagination des grands sites tels que : flickr, digg, yahoo, technorati, youtube, etc ... et qui vous permets de télécharger le fichier css correspondant.

Cliquez pour agrandir

en tout 22 styles de pagination en exemple et à votre disposition en téléchargement

11 beaux menus en CSS

Guillaume BIZET — Thu, 19 Jul 2007 09:31:00 +0200

13styles.com vous propose 11 menu construits avec des CSS

Cliquez pour voir en grand

A garder sous le coude car les menus sont déjà bien jolis à la base. Directement installables

Google autorise officielement la stylisation des annonces adsense via CSS

Guillaume BIZET — Mon, 02 Jul 2007 16:13:00 +0200

Suite à mon billet d'il y a quelques jours et à 2 commentaires de (Ze)Franck et de lebazzar , j'avais envoyé un mail à Google Adsense pour connaitre leur avis sur la question.

En voici le contenu

Bonjour,

J'ai récemment découvert ce blog qui propose des styles via les CSS (http://web2magazine.blogspot.com/2007/06/29-different-google-ads-style.html) pour les annonces Adsense. Ma question est de savoir si cela est autorisé ou non car je voudrais éventuellement remettre en place adsense sur mon blog mais plutot stylisé. Le but étant plutôt d'intégrer les annonces Adsense dans le design du blog.

Merci de votre réponse

Cordialement

Guillaume BIZET

AdSenseLocale: fr
Language: fr
origin: helpcenter
topic: other
name: Guillaume BIZET
ctx:
url:
topic_subject: Aucune des catégories ci-dessus
subject2: Other: user_typed_subject

et je viens de recevoir la réponse

Bonjour Guillaume,

Merci d’avoir pris le temps de nous consulter. Veuillez nous excuser pour le délai de cette réponse.

Conformément au règlement du programme AdSense, les éditeurs ne sont pas autorisés à modifier le code des annonces AdSense pour quelque raison que ce soit. Une fois que vous avez généré le code d'annonce dans vos pages de contenu AdSense, vous n'êtes pas autorisé à modifier des parties du code ou à changer manuellement la disposition des annonces. Par exemple, les éditeurs ne sont pas autorisés à modifier la variable de hauteur de l'annonce pour masquer le titre Annonces Google.

Si l'utilisation de votre feuille CSS n'interfère pas avec le code généré dans votre compte, vous pouvez l'utiliser. Nous vous remercions de votre coopération.

Pour toute autre question, nous vous invitons à consulter le Centre d'assistance AdSense à l'adresse http://www.google.com/adsense_help . Si vous ne trouvez pas la réponse à votre question sur ce site, n'hésitez pas à la poster dans le Forum d’Aide AdSense à l’adresse http://groups.google.com/group/adsense-help-fr . Ce forum permet aux éditeurs de partager leurs propres connaissances et expériences.

Cordialement,

Mathilde
L'équipe Google AdSense

Google Ireland Ltd.
Gordon House
Barrow Street
Dublin 4
Ireland

Registered in Dublin, Ireland
Registration Number: 368047

Google Adsense autorise donc la stylisation des annonces via les CSS, alors à vos pinceaux CSS et que ça saute ...

Stylez vos annonces Adsense avec les CSS

Guillaume BIZET — Fri, 29 Jun 2007 09:13:00 +0200

Les annonces fournies par Google Adsense n'ont pas un design très agréable. On pourrait même plutôt dire qu'elle ne sont pas belles

et cassent parfois des design de blogs ou de sites qui eux sont jolis.
Or il est tout à fait possible de les styler facilement via les CSS

Prenons pra exemple 2 types différents d'annonce Adsense.

Une bannière de 2 annonces horizontale

Voici le code à insérer dans votre site/blog

 [html4strict]
<div id="ad_code">
      <!-- REMPLACER CETTE LIGNE AVEC VOTRE CODE POUR L'ANNONCE -->
</div>

et le code CSS

 [CSS]
#ad_code {
width:487px;
padding:11px 10px 10px 9px;
background :#FFFFFF url(VOTRE_REPERTOIRE/css-glow.png) no-repeat center center;
text-align:center;
}

Et bien sur il vous faudra utiliser cette image

Une seule annonces type bouton

Voici le code à insérer dans votre site/blog

 [html4strict]
<div id="ad_code">
      <!-- REMPLACER CETTE LIGNE AVEC VOTRE CODE POUR L'ANNONCE -->
</div>

et le code CSS

 [CSS]
#ad_code {
width:163px;
height:166px;
padding-top:15px;
background:#ffffff url(VOTRE_REPERTOIRE/blackquare.png) no-repeat center center;
text-align:center;
}

Et bien sur il vous faudra utiliser cette image

Le blog Web2Magazine vous propose 29 exemples d'annonces Google adsense classées en plusieurs catégories. Pour chacuns des types d'annonce, vous est fourni :

un exemple du rendu obtenu
le code Html à insérer dans votre site / blog
le code CSS à utiliser dans le fichier CSS de votre site / blog
un color scheme
l'image utilisée pour le background à télécharger

Amusez vous bien, et que je ne vois plus que des annonce Adsense stylisées dorénavant !

Edit : Devant vos questions sur l'autorisation par Google de ce genre de pratique, j'ai envoyé un mail via le formulaire de contact d'Adsense et j'attends leur réponse. Je vous tiendrais au courant de celle-ci

CSS : l'ensemble des propriétés

Guillaume BIZET — Wed, 20 Jun 2007 12:59:00 +0200

Qui n'a pas à un moment douté de la manière dont il devait écrire telle ou telle propriété CSS, ou bien encore dans quel ordre les présenter. Alors le site

sera votre référence et votre guide. Toutes les propriétés dans leur intégralité y sont documentées avec des exemples concrets !!!
Les propriétés CSS n'auront bientôt plus de secret pour vous.

Vous retrouverez donc sur la documentation CSS de Médiabox

Les sélecteurs
Les unités de mesures
Pseudo-élements et Pseudo-classes
Les propriétés
- Propriétés des polices
- Propriétés de couleur et de fond
- Propriétés du texte
- Propriétés de boîte
- Effets visuels
- Propriétés de positionnement
- Propriétés des listes
- Propriétés de génération de contenu
- Propriétés d'impression
- Propriétés des tables
- Propriétés de l'interface utilisateur
- Propriétés auditives
Les propriétés non-standards
- Les filtres de Internet Explorer
- Les scrollbar de Internet Explorer

Le meilleur résumé en image reste quand même celui là

Cliquez pour voir en grand

que vous pouvez télécharger ici

Très important aussi, les hack css dont vous pourrez trouver la majorité sur ce site

Avec ces informations, vous n'avez plus aucune raison de vous tromper ou de rater une mise en page CSS, d'autant plus que le site médiabox vous propose de télécharger un petit logiciel en flash (qui ne nécessite pas d'installation) qui vous permet d'accéder directement à la propriété voulue sur le site en cliquant directement sur la propriété désirée

Cliquez pour voir en grand

version windows : télécharger ici
version mac : télécharger ici

Enfin vous pourrez remarquer que Médiabox propose aussi des documentations en français pour :

Styler correctement les blockquotes avec des images

Guillaume BIZET — Tue, 19 Jun 2007 15:31:00 +0200

Souvent les bloc de citation <blockquote> ne sont pas complètement et correctement stylisé via les CSS + images.
Je m'explique. On voit régulièrement sur les sites et autres blog les guillemets de départ mais rarement ceux de fin de phrase (exemple ci-dessous)

Cliquez pour voir en grand

Voici donc une technique complètement valide Xhtml et CSS qui permets de le faire, que je viens de mettre en place sur ce blog

Tout simplement reprennont la construction sémantique d'un blockquote.

 [html]
<blockquote><p>ceci est le contenu de la citation</p></blockquote>

Comme vous pouvez vous rendre compte le un paragraphe p est forcément est inclu entre les balises blockquote ouvrante et fermantes et c'est grace à cela que nous allons pouvoir faire ce que l'on veut soit ceci :

Cliquez pour voir en grand

Voici donc le code à insérer dans votre fichier css

 [css]
blockquote {
text-indent: 25px;
background: url(quotes1.png);
background-position: 0 2px;
background-repeat: no-repeat;
}

blockquote p {
display: inline;
margin: 0;
padding-right: 24px;
background: url(quotes2.png);
background-position: bottom right;
background-repeat: no-repeat;
 }

Notez que le display: inline; sur le paragraphe permets que l'image avec les guillemets fermants suive exactement la fin du texte du paragraphe en transformant la définition display:block; par défaut des paragraphes