probleme avec des coins arrondis

**witch** · 14/07/2007, 22h45

salut
voilà je poste après avoir été desespéré par ma première tentative de faire des coins arrondis, sure qu'il ya d'autre façon, mais là j'essaie avec la plus simple, je comprends pas pourquoi ça n'apparaisse pas comme il le faut, au moins toutes les ptits images que j'ai dessiné.
voilà le code de la page html et la feuille de style que je test

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<link rel="stylesheet" type="text/css" href="fcss1.css" />
</head>
<body>
<table width="100%" boreder="0" cellpadding="0" cellspacing="0">
<tr>
<td id="haut_gauche"></td>
<td id="haut"></td>
<td id="haut_droite"></td>
</tr>
<tr>
<td id="gauche">voilà le contenu</td>
<td id="droite"></td>
</tr>
<tr>
<td id="bas_gauche"></td>
<td id="bas"></td>
<td id="bas_droite"></td></tr>
</table>
</body>
</html>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* CSS Document */
#haut_gauche, #haut_droite, #bas_gauche, #bas_droite {
width:20px;
height:20px;
}
#haut_gauche{
background-image:url(haut_gauche.jpg);
background-repeat:no-repeat;
float:top-left;
}
#haut_droite{
background-image:url(haut_droite.jpg);
background-repeat:no-repeat;
float:top-right;
}
#bas_gauche{
background-image:url(bas_gauche.jpg);
background-repeat:no-repeat;
float:bottom-left;
}
#bas_droite{
background-image:url(bas_droite.jpg);
background-repeat:no-repeat;
float:bottom-right;
}
#gauche
{
background-image:url(gauche.jpg);
background-repeat:no-repeat;
}
#droite{
background-image:url(droite.jpg);
}
#haut{
background-image:url(haut.jpg);
 
}
#bas{
background-image:url(bas.jpg);
}

ce qui m'apparaisse c l'image en haut à gauche en haut seulement les autres images n'apparaissent pas

cordialement
witch

**theo7** · 15/07/2007, 15h25

Non mais faire des bords arrondis avec un tableau c'est de la pur barbarie !
Tu peux t'aider de http://www.roundedcornr.com/ .

**witch** · 15/07/2007, 18h20

lol, je vois pas trop la difference entre des td et des div sinon je crois que ça donne le même resultat il faut etre très exacte dans la création des ptit coins de haut_gauche, de haut, de haut_droite ..etc. et je crois que j'étais pas assez doué en utilisant gimp, heureusement que j'ai trouvé un truc en css, et je crois que je vais toujours utiliser tant qu'il s'agit seulement du css et pas de css2.
voilà le script en css compatible IE:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 .un      {
    margin:0 4px;
    height:1px;
    background-color:#BFBFBF;
overflow:hidden;/*necssaire pour IE */
    border:1px solid #BFBFBF;
    border-top:0;border-bottom:0;}
 
.deux {
    margin:0 3px;
    height:1px;
 overflow:hidden;/* necssaire pour IE */
    border:1px solid #BFBFBF;
    border-top:0;border-bottom:0;}
 
.trois{
    margin:0 2px;
    height:2px;
   overflow:hidden;/*necssaire pour IE */
    border:1px solid #BFBFBF;
    border-top:0;border-bottom:0;}
 
.quatre {
    margin:0 1px;
    height:2px;
overflow:hidden; /*necssaire pour IE */
    border:1px solid #BFBFBF;
    border-top:0;border-bottom:0;}
 .centrearrondi {
    border:1px solid #BFBFBF;
    border-top:0;border-bottom:0;
    margin:0 1px;
    padding:0 2em;
    min-height:150px; /* avec eventuellement une hauteur mini */
    height:auto;
    height:150px;
}
 
.conteneur-arrondi{
    padding:0;
    width:47%;/* determine la largeur de la boite contenue */
    float:left;
    margin:1%;
}

et puis la page pour tester:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<link rel="stylesheet" type="text/css" href="fcss2.css">
</head>
<body>
<div class="conteneur-arrondi">
        <div class="un"></div>
        <div class="deux"></div>
        <div class="trois"></div>
        <div class="quatre"></div>
                    <div class="centrearrondi ">
                                    <p>Le contenu prendra place ici.</p>
                        </div>
        <div class="quatre"></div>
        <div class="trois"></div>
        <div class="deux"></div>
        <div class="un"></div>
</div> 
</body>
</html>

merci à ceux qui ont crée ça

a+

**Xann_71** · 18/07/2007, 10h38

Salut
Je peux t'aider moi mais oublie les tableaux et utilise des divs

.
Va dans la partie HTML/... du forum et tu trouvera un sujet codes sources (dans la première partie du forum html).
Un membre avait laisser un code pour faire des coin arrondis et je l'ai modifier de façon a ce que l'on puisse modifier la taille en passant par un css. Tu le ratera pas, c'est le dernier message qui a été laissé^^.Après je suppose que tu t'y connais un peu en css^^ donc tu devrai réussir à le modifier comme tu le souhaite.
A+

probleme avec des coins arrondis

CSS

Discussions similaires

Partager

Partager