Discussion :

[Sniper37]

bonjour,

j'ai un menu sous forme d'onglets, les onglets sont en forme de td..
comment faire pour avoir l'angle formé par border top et left par exemple sous forme d'arrondii..??

mercii

[Erwan31]

bonjour,
j'ai un menu sous forme d'onglets, les onglets sont en forme de td..
comment faire pour avoir l'angle formé par border top et left par exemple sous forme d'arrondii..??
mercii

Bonjour,
le plus simple est de passer par une image mais apriori je suis pas certain qu'un tableau soit le plus approprié pour un menu...

[Sniper37]

ouii en effet, le tableau ne prend pas d'images..
j'utilise un composant ajax qui genere des table ..

[Erwan31]

ouii en effet, le tableau ne prend pas d'images..
j'utilise un composant ajax qui genere des table ..

Ben alors change de composant

[Sniper37]

ouii je cherche, mais je ne trouve pas mon bonheur.

j'ai trouvé un truc juste en css un div et à l'interieur des ui/il
mais je n'arrive pas à faire fonctionner le style definit pr ul ou il
voilà le css

Code :

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
 
#header {
  float:left;
  width:500px;
  background:#eee url("/images/menu-onglets/bg3.jpg") repeat-x top;
  line-height:normal;
  }
#header ul {
  margin:0;
  padding:10px 10px 0;
  list-style:none;
  }
#header li {
  float:left;
  background:url("/images/menu-onglets/left3.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 28px;
  }
#header a {
  float:left;
  display:block;
  background:url("/images/menu-onglets/right3.gif") no-repeat right top;
  padding:9px 28px 4px 0px;
  text-decoration:none;
  font-weight:bold;
  color:#92A2AC;
  }
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
  color:#A56060;
  }
#header #current {
  background-image:url("/images/menu-onglets/left3_on.gif");
  }
#header #current a {
  background-image:url("/images/menu-onglets/right3_on.gif");
  color:#A56060;
  }

je ne suis pas bon en css; je ne sais pas si ce code respecte les normes pas,

mercii

[Erwan31]

A vue de nez, ça semble bon. Juste une erreur classique:

Code :

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

1
2
3
4
5
6
7
8
9
#header a {
  float:left;
  display:block;
  background:url("/images/menu-onglets/right3.gif") no-repeat right top;
  padding:9px 28px 4px 0px;
  text-decoration:none;
  font-weight:bold;
  color:#92A2AC;
  }

La propriété float(valeur autre que none) génère une boîte de bloc de manière transparente, c-à-d que la valeur du display passe à block automatiquement, même chose pour position: absolute, donc le display:block est ici inutile

[Sniper37]

l'image du background pour les elements ul et li n'est pas prise.

si j'ajoute

Code :

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

1
2
3
4
5
6
 
#header li {
...
..
text-transform: uppercase;
}

ça fonctionne mais je ne recupere pas l'image..

[Sniper37]

résolu

avec ..

Code :

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

1
2
 
background:url("../images/menu-onglets/right3.gif") no-repeat right top;