Hennes Hervé Développeur Web

Un petit tip que je partage avec vous aujourd’hui car j’ai pas mal cherché sur internet une solution qui me convenait.

Le problème que j’ai rencontré est le suivant :
Sous Google Chrome et Safari, l’image de fond attribuée à ma ligne de tableau <tr> ne s’affichait pas correctement, et était reprise par chaque cellule du tableau.

Voici l’aperçu problématique :

Voici le code html du tableau

<table border="0" cellspacing="1" cellpadding="1">
<tbody>
<tr class="bg_realisation_small">
<td class="bg_realisation_gauche_chrome">
<h3>AVANT</h3>
<img style="width: 260px; height: 195px;" src="realisations-5.jpg" alt="" /></td>
<td class="bg_realisation_droite_chrome">
<h3>APRES</h3>
<img style="width: 260px; height: 195px;" src="realisations-4.jpg" alt="" /></td>
</tr>
</tbody>
</table>

Le principe du hack constiste à supprimer le fond de la balise tr et à l’appliquer aux éléments td en spécifiant la position du fond.

Voici le Css du correctif :

tr.bg_realisation_small

Avec la nouvelle version de facebook, il est désormais possible de personnaliser son apparence en jouant sur les tags.

Dans cet article je vais vous expliquer comment arriver au résultat ci-dessous.

Et comme je suis sympa je vous fournis même le psd pour réaliser la manipulation encore plus rapidement !
( Il est donc nécessaire d’avoir Adobe Photoshop, si vous le possédez pas vous pouvez télécharger une version d’évaluation depuis la page suivante : https://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop&loc=fr_fr )

Télécharger le psd

Voici maintenant la procédure à suivre dans Adobe Photoshop

• Ouvrez le fichier profil-facebook.psd
• Ouvrez l’image que vous souhaitez insérer comme profil facebook
• Importez la dans le fichier facebook, en plaçant le calque en 2ème position
• Disposez l’image comme vous le souhaitez

Voici l’apperçu dans photoshop

• Une fois que le rendu vous satisfait, faites « enregistrer pour le web » (Raccourci : Maj+Ctlr+Alt+S) ou via le menu Fichier/Enregistrer pour le web.
• Dans les options d’enregistrement, prenez le format JPG, et cliquez sur enregistrer.

Tout comme moi vous ne parvenez pas à saisir l’intérêt du site de micro-Blogging Twitter ?
Rendez vous sur le blog du modérateur qui nous propose un e-book complet sur le sujet !

http://moderateur.blog.regionsjob.com/index.php/post/Ebook-Tirer-le-meilleur-parti-de-Twitter-2eme-edition

Après cela vous n’aurez-plus aucune excuse pour ne plus utiliser twitter ! ^^

(Pour ma part je l’utilise uniquement comme outil de suivi d’actualité, je ne poste quasiment jamais d’informations)…

Dans le cadre de l’intégration du nouveau design sur le site et le blog, je suis comment souvent confronté aux spécificités d’Internet Explorer qui ne fait jamais rien comme tout le monde.

Dans le cas présent je souhaitais importer une police spécifique pour les menus du haut et du bas.
Pas de problèmes sous Firefox et Google Chrome, j’ai récupéré la police souhaitée dans le dossier des polices de Windows (Windows/Fonts/) et je l’ai importé dans mon fichier de style via le code suivant  et le tour est joué.

@font-face {
font-family: « Segoe » ;
src: url(« ../font/segoeprb.ttf ») format(‘opentype’);
}

Après plusieurs recherches sur Internet je comprends que pour Internet Explorer il sera nécessaire de convertir cette police au format « .eot » afin de pouvoir réaliser cet import.
Un logiciel windows « archaïque » est disponible pour réaliser cette manipulation : WEFT (Web Embedding Fonts Tool), mais son fonctionnement est difficile à comprendre et il a été réalisé pour Windows 98 !!…