Arrondir les angles d'un tableau

Voir le sujet précédent Voir le sujet suivant Aller en bas

Astuce Arrondir les angles d'un tableau

Message par Isolde le Jeu 1 Sep 2011 - 14:08

Coins arrondis


Introduction

Quelles différences voit-on entre ces 2 zones de texte?

A priori, aucune, mais avec certains vieux navigateurs, le résultat est différent:


Les arrondis en CSS

La première zone est réalisée avec un tableau utilisant la propriété CSS border-radius, qui permet d'arrondir les angles. Le code est donc fait comme ceci:
<table style="-moz-border-radius: 35px; -webkit-border-radius: 35px; border-radius: 35px; background-color: #00ccff; height: 82px; width: 135px;text-align: center;"><tr><td> Votre Texte</td></tr></table>

Les arrondis à l'aide d'images

Il est possible de procéder autrement pour éviter les variations de design pour des vieux navigateurs ( ou bien afin de pouvoir mettre un bord plus complexe qu'une simple couleur ).

Pour cela, il faut :

  • Soit 5 images pour si on veut faire un bord simple : Une pour chaque coin et une pour le remplissage ( du centre et des bords latéraux et horizontaux ).

  • Soit 9 images pour un bord complexe : Une pour chaque coin, une pour chaque bord latéral et horizontal et une pour le remplissag du centre.

Le code est alors fait comme ceci :

Code:
<table cellspacing="0" cellpadding="0">
<tr height="Hauteur de toute la bordure supérieur">
   <td width="Largeur de toute la bordure de gauche" background="Image du coin supérieur gauche"></td>
   <td width="Largeur du tableau" background="Image de remplissage"></td>
   <td width="Largeur de toute la bordure droite" background="Image supérieure droite"></td>
</tr>
<tr>
   <td background="image de remplissage"></td>
   <td background="image de remplissage">Votre Texte</td>
   <td background="image de remplissage"></td>
</tr>
<tr height="Hauteur de la bordure inférieure">
   <td background="image coin inférieur gauche"></td>
   <td background="image de remplissage"></td>
   <td background="image coin inférieur droite"></td>
</tr>
</table>

►Exemple

Prenons les images nécessaires pour réaliser le cadre bleu du départ. On va utiliser ces images:

Le code devient donc:

Code:
<table cellspacing="0" cellpadding="0">
<tr height="35px">
   <td width="35px" background="http://i42.servimg.com/u/f42/16/82/22/15/hautga10.gif"></td>
   <td width="150px" background="http://i42.servimg.com/u/f42/16/82/22/15/centre10.gif"></td>
   <td width="35px" background="http://i42.servimg.com/u/f42/16/82/22/15/hautdr10.gif"></td>
</tr>
<tr>
   <td background="http://i42.servimg.com/u/f42/16/82/22/15/centre10.gif"></td>
   <td background="http://i42.servimg.com/u/f42/16/82/22/15/centre10.gif">Votre Texte</td>
   <td background="http://i42.servimg.com/u/f42/16/82/22/15/centre10.gif"></td>
</tr>
<tr height="35px">
   <td background="http://i42.servimg.com/u/f42/16/82/22/15/basgau10.gif"></td>
   <td background="http://i42.servimg.com/u/f42/16/82/22/15/centre10.gif"></td>
   <td background="http://i42.servimg.com/u/f42/16/82/22/15/basdro10.gif"></td>
</tr>
</table>


Isolde
Invité


Isolde a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum