Coins arrondis dans un tableau

[jujuanimaux]

Salut à tous !

Alors voilà, j'ai essayé le code pour mettre des coins arrondis dans un tableau ( ici > https://forum.forumactif.com/t224148-coins-arrondis-dans-un-tableau ) mais ça ne fonctionne pas... J'ai suivis le tutoriel à la lettre, et voyez par vous-même le résultat : http://resident-evil.keuf.net/
Il n'y a aucun coin arrondi, en fait, il n'y a pas de coins du tout...
Le code en question >

Code:

















[table style="font-family: georgia;" cellpadding="0" cellspacing="0"][tr height="4px"][td width="6px" background="http://illiweb.com/fa/pbucket.gif"][/td][td width="10px" background="http://illiweb.com/fa/pbucket.gif"][/td][td width="6px" background="http://illiweb.com/fa/pbucket.gif"][/td][/tr][tr][td background="http://illiweb.com/fa/pbucket.gif"][/td][td background="http://illiweb.com/fa/pbucket.gif"]Votre Texte[/td][td background="http://illiweb.com/fa/pbucket.gif"][/td][/tr][tr height="4px"][td background="http://illiweb.com/fa/pbucket.gif"][/td][td background="http://illiweb.com/fa/pbucket.gif"][/td][td background="http://illiweb.com/fa/pbucket.gif"][/td][/tr][/table]

Merci d'avance pour votre aide.

[Ea]

Bonjour,


La note "Pour l'image de remplissage, un gif de 1/1pixel à la couleur souhaitée suffit." concerne juste les trucs où il est mis "Image de remplissage".

Pour le reste il faut des images de rond supérieur gauche etcétéra ( du style ceci ou autre chose suivant le fond l'intérieur et la sorte de bord que vous souhaitez ^^ ).

Mais de nos jours habituellement on utilise juste une propriété CSS pour faire un bord arrondi et on ne s'encombre pas d'image.

Vous voulez juste un bord blanc arrondi ?

Cordialement.

[jujuanimaux]

Bonjour,

Merci d'avoir répondu si vite ^^ En effet, j'ai dû mal comprendre.
Oui, ce que je veux, c'est un simple bord blanc arrondi. Vous savez comment le faire avec du CSS ?

[Ea]

Si vous voulez 20 pixels d'arrondis vous pouvez mettre :

Code:

<div style="-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; border: 5px solid #FFF;">Contenu</div>

Les -webkit-border-radius et -moz-border-radius en plus de border-radius servent juste à faire fonctionner le bords arrondis sur de vieilles versions de navigateur également.

Vous pouvez changer le 20 qui modifiera le "rayon" de l'arrondi, le 5 est la "grosseur" du bord le #FFF la couleur ^^

Pour plus d'info sur les propriétés et les valeurs possibles :

- http://www.google.fr/search?q=border%20radius%20css
- http://www.google.fr/search?q=border%20css

Sinon vous pouvez très bien mettre :

Code:

<div class="testarr"></div>

Et puis mettre dans le CSS personnalisé ( PA > Affichage > Couleurs > Feuille de style ) :

Code:

.testarr {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   border: 5px solid #FFF;
}

Pour finir pour ce cas d'autres propriétés intéressantes seraient par exemple :

• background ( le fond : http://www.google.fr/search?q=background%20css )
  
• width ( la largeur : http://www.google.fr/search?q=width%20css )
  
• height ( la hauteur : http://www.google.fr/search?q=height%20css )
  
• margin ( la marge ( en mettant margin: auto le block se centrera ) : http://www.google.fr/search?q=margin%20css )
  
• text-align ( l'alignement du texte ( centré par exemple ) : http://www.google.fr/search?q=text-align%20css )
  
• color ( la couleur du texte : http://www.google.fr/search?q=color%20css )
  
• box-shadow ( l'ombre du bord : http://www.google.fr/search?q=box-shadow%20css )
  
• padding ( la "marge" intérieur : http://www.google.fr/search?q=padding%20css )

Cordialement.

[jujuanimaux]

Merci ! Ça fonctionne maintenant ^^
Et merci pour ces liens, ça me sera sûrement utile =)
Problème résolu.