Team-Masters.com
Que du Gratuit pour Webmasters
Créez un tableau aux coins arrondis
Donnez plus de style à vos pages en créant des encarts ou des tableaux aux coins arrondis.
Il s’agit en fait de créer un tableau et de lui adjoindre des images de coins arrondis que vous aurez pris le soin de créer graphiquement.
Il y a donc deux étapes à distinguer :
La création des quatre coins arrondis à partir d’un cercle
la création du tableau et l’insertion des coins pré-créés.
La création des quatre quarts de cercle
Il faut pour cela utiliser votre logiciel graphique préféré. L’astuce va consister à créer un cercle que vous découperez afin d’obtenir un quart de cercle. A partir de ce quart de cercle, vous allez générer les trois autres manquants en le dupliquant et en faisant pivoter (rotation horizontale et verticale) les copies obtenues jusqu’à obtention de vos quatre coins arrondis. La création des trois autres quarts par duplication ou copier-coller permet de générer des quarts de cercles aux dimensions identiques les uns aux autres.
Il suffit ensuite de leur attribuer la couleur désirée et de les enregistrer les en les nommant coin1.gif, coin2.gif, coin3.gif et coin4.gif par exemple. Crééz également un pixel d’une taille de 1x1 et transparent que l’on nommera pixel1.gif.
La création d’un tableau avec les coins arrondis
Il suffit ensuite de créer un tableau en HTML de 3 lignes et 3 colonnes, et dans lequel on placera chaque coin correspondant dans la cellule qui convient. Dans les autres cellules, on ajoutera le pixel transparent que l’on aura créé. Attention tout de même à ne pas oublier le cellpadding="0" cellspacing="0" border="0" dans la balise table.
Voici un exemple de code du tableau :
<table width="280" cellpadding="0" cellspacing="0" border="0">
<tr><td width="12"><img src="coin1.gif" border="0" width="12" height="12"></td>
<td width="256" bgcolor="blue"><img src="pixel1.gif" border="0" width="1" height="1"></td>
<td width="12"><img src="coin2.gif" border="0" width="12" height="12"></td>
</tr>
<tr>
<td width="12" bgcolor="blue"><img src="pixel1.gif" border="0" width="1" height="1"></td>
<td width="256" bgcolor="blue" align="center"><font size=2 face="arial, verdana" color="#FFFFFF">Un texte quelconque</font></td>
<td width="12" bgcolor="blue"><img src="pixel1.gif" border="0" width="1" height="1"></td>
</tr>
<tr>
<td width="12"><img src="coin3.gif" border="0" width="12" height="12"></td>
<td width="280" bgcolor="blue"><img src="pixel1.gif" border="0" width="1" height="1"></td>
<td width="12"><img src="coin4.gif" border="0" width="12" height="12"></td>
</tr>
</table>Vous pouvez bien sûr donner à votre tableau les dimensions que vous voulez. N’oubliez pas aussi de fixer le bgcolor des cellules qui contiennent le gif transparent aux mêmes couleurs que vos coins arrondis.
Enfin, sachez qu’il existe d’autres méthodes utilisant les CSS et qui évitent d’utiliser les balises table.
26 avril 2005
Très Bon Plan A NE PAS MANQUER ! Cliquez!!
Des Secrets pour 7€: Un rapport, un script pour réussir à vendre sur Internet. Cliquez!
Un fondu pour vos transitions de page
Liens "Suivant" et "Précédent"
Un bouton pour fermer la fenêtre
Streaming : Son et vidéo avec RealMedia
Intégrer du son ou de la vidéo sur son site Web
L’Icône de votre site dans la barre d’adresse
Eviter la mise en cache des pages HTML dans le navigateur
Des transitions pour vos pages
