comment on realise des coins arrondis sur un site ?

[j-mi]

j'aimerais realiser un tableau et y avoir les 4 coins arondis

comment on fais ?

 

[Mumuri]

4 images de coins dans un tableau standard de 6 cases, aprés ca doit pouvoir se faire avec des div et du CSS, mais je sais pas comment

voila un exemple

<table border="0" cellpadding="0" cellspacing="0" width=90%>
    <tbody><tr>
        <td>
            <img src="http://topflood.free.fr/themes/floodZine/images/streifer_bloc2_01.gif" height="32" width="30"></td>

        <td background="http://topflood.free.fr/themes/floodZine/images/streifer_bloc2_02.gif" height="32" ></td>
        <td>
            <img src="http://topflood.free.fr/themes/floodZine/images/streifer_bloc2_03.gif" height="32" width="29"></td>
    </tr>
    <tr>
        <td background="http://topflood.free.fr/themes/floodZine/images/streifer_bloc2_04.gif" width="30"></td>
        <td background="http://topflood.free.fr/themes/floodZine/images/streifer_bloc2_05.jpg"  >    <!--  texte ici --></td>

        <td background="http://topflood.free.fr/themes/floodZine/images/streifer_bloc2_06.gif"  width="29"></td>
    </tr>
    <tr>
        <td>
            <img src="http://topflood.free.fr/themes/floodZine/images/streifer_bloc2_07.gif" height="34" width="30"></td>
        <td background="http://topflood.free.fr/themes/floodZine/images/streifer_bloc2_08.gif" height="34" ></td>
        <td>
            <img src="http://topflood.free.fr/themes/floodZine/images/streifer_bloc2_09.gif" height="34" width="29"></td>
    </tr>

</tbody></table>

 

[ZoRRo75]

une possibilité est de mettre dans chaque coin une image que tu as créee pour cet effet (via photoshop ou autre)

tu entoures ton tableau d'un autre tableau de 3x3 et dans chaque coin tu mets une image appropriée

 

[tom_sawyer]

une image de fond dans le header avec les deux bords supérieurs arrondis et une image de fond dans le footer avec les deux bords inférieurs arrondis.

 

[j-mi]

donc en bref c'est avec des images que l'on realise les arondis

 

[leffroyable]

une image de fond dans le header avec les deux bords supérieurs arrondis et une image de fond dans le footer avec les deux bords inférieurs arrondis.

une variante pour un tableau à largeur élastique :
une image de fond coin gauche calé à gauche dans le header
+ une image calée à droite
une image de fond coin gauche célé à gauche dans le footer
+ une image calée à droite

(le tableau ne fera que 3 lignes et une colonne)

 

[tom_pascal]

Ou une méthode "amusante" en CSS et javascript, mais SANS aucune image, avec nifty corners : http://pro.html.it/esempio/nifty/

 

[arizona_dream]

facile

drawRect(x, y, largeur, hauteur, Rayonarrondi)

oui c'est du flash... ok je sors...

 

[SIBELIUS]

Un petit récapitulatif comparatif : http://articles.e-t172.net/round/

 

[Photoshop user]

va voir sur http://www.alsacreations.com/

 

[e-kiwi]

apres quelques bieres, moi je vois les coins arrondis sur tes tableaux

 

[tanguy]

La propriété border-radius du CSS3 permet de faire des bords arrondis sous Firefox mais malheureusement I.E ne reconnait pas cette propriété.

Il faut donc faire 2 images, l'une pour le haut de la page et l'autre pour le bas.

 

[BloO]

photoshop -----> rectangle
Fireworks -------> découpe
^^

 

[e-kiwi]

ca veut pas dire grand chose ton message BloO

 

[BloO]

ca veut pas dire grand chose ton message BloO

lol dsl ben en fait tu fais ton image via photoshop (carré avec de jolie angle arrondi)
Ensuite tu te sert de fireworks pour faire la découpe de ton tableau avec l'outil découpe. voila c fini apres tu gere l'html pour le rendre dynamique ...

 

[SIBELIUS]

apres tu gere l'html pour le rendre dynamique ...

Oui, je crois que c'était ça la question en fait

 

[Photoshop user]

y a un outil découpe dans photoshop aussi non mé

 

[e-kiwi]

oui, c'est bien ce que je voulais dire, aucun interet de passer par fireworks

 

[BloO]

apres tu gere l'html pour le rendre dynamique ...

Oui, je crois que c'était ça la question en fait

alors moi ma solution apres c de mettre les lignes haut droite gauche bas en background de cellule ...