Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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>

avatar

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