Discussion :

[dragonno]

Bonjour,

Je viens de me faire un groupe de panels (des panneaux de menu) sélectionnables par onglets.

Le menu des panels fonctionne impeccable chez moi, il sert à faire apparaître un panneau DIV dans lequel vous aurez mis ce que vous voulez, et avec les onglets vous choisissez le panneau que vous voulez, il prend la place du précédent et l'onglet du panneau sélectionné reste actif.

Je n'ai pas cherché à le rendre compatible IE, et toutes mes contributions ne le seront jamais, à bas IE.

Donc comme j'aime partager mes bons trucs, je vous offre le code :

Dans le Body :

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
<!-- Onglets des items -->
<span id="onglets">
        <div class="onglet" id="A" onclick="affiche(this.id)">Sols</div>
        <div class="onglet" id="B" onclick="affiche(this.id)">Batiments</div>
        <div class="onglet" id="C" onclick="affiche(this.id)">Arbres</div>
        <div class="onglet" id="D" onclick="affiche(this.id)">Plantes</div>
        <div class="onglet" id="E" onclick="affiche(this.id)">Objets</div>
        <div class="onglet" id="F" onclick="affiche(this.id)">Persos</div>
</span>
 
<!-- Panneaux des items -->
<div id="cadrepanels">
<div class="panel" id="Apanel">Sols</div>
<div class="panel" id="Bpanel">Batiments</div>
<div class="panel" id="Cpanel">Arbres</div>
<div class="panel" id="Dpanel">Plantes</div>
<div class="panel" id="Epanel">Objets</div>
<div class="panel" id="Fpanel">Persos</div>
</div>

Dans le CSS :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
#onglets
{
padding:0px;
margin:0px;
position: relative;
float:left;
top:10px;
width:420px;
height:22px;
margin-left:5px;
border: 1px solid #9EA0A1;
background-color:blue;
font: bold 11px Arial;
list-style-type: none;
text-align:center;
z-index:0;
}
 
.onglet
{
position: relative;
float: left;
width:60px;
height: 18px;
left:0px;
top:-10px;
background-color:lime;
margin: 2px;
padding:2px;
border: 1px solid blue;
cursor:url('main.png'),auto;
}
 
#A
{
background-color:yellow;
}
 
.onglet:hover
{
background-color: yellow;
}
 
#cadrepanels
{
margin-top:0px;
float:left;
width:420px;
height:200px;
background-color:red;
margin-left:5px;
}
 
.panel
{
position: relative;
left:0px;
top:0px;
width:420px;
height:200px;
background-color:yellow;
display:none;
}
 
#Apanel
{
display:block;
}

Dans le javascript :

Code javascript :

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
function affiche(id)
{
// Cache tous les panneaux du menu.
var choix=document.getElementsByClassName("panel");
for (i=0;i<choix.length;i++)
  {
   choix[i].style.display="none";
  }
 
// Colore en vert clair tous les onglets du menu.
var choix=document.getElementsByClassName("onglet");
for (i=0;i<choix.length;i++)
  {
   choix[i].style.backgroundColor="lime";
  }
 
// Colore en jaune le premier onglet du menu (=actif)  
document.getElementById(id).style.backgroundColor='yellow';
// Rend visible le panneau du menu qui a été choisi.
document.getElementById(id+"panel").style.display="block";
 
}

Pour le positionnement c'est chacun qui se le fera car ça dépend des DIV qui sont présent avant ce menu dans la page perso de chacun de nous.

Les couleurs que j'ai choisi c'est pour bien montrer les différences entre les options, vous mettrez vos propres couleurs.


Aperçu :
Voici un aperçu de ce que ça donne, on y voit que j'ai sélectionné le panel "plantes" :

[IMG]

[Auteur]

un span qui contient des div !

A propos de la balise span :
http://www.w3.org/wiki/Generic_conta...e_versus_block

[B]The span element is the inline level generic container. It also helps to inform the structure of document, but it is used to group or wrap other inline elements and/or text, rather than block level elements.

Je n'ai pas cherché à le rendre compatible IE, et toutes mes contributions ne le seront jamais, à bas IE.

Une belle erreur :
http://blog.artenet.fr/2013/01/27/ba...igateurs-2013/

[dragonno]

N'empêche, c'est la solution qui fonctionne bien pour le positionnement des onglets, car avec les DIV c'est très difficile dans ce cas précis.

Tu me cites en anglais ce qu'est un span, merci...
Comme si je ne le savais pas, si je l'utilise c'est qu'il y a une raison.
Le positionnement était trop compliqué avec les div, et superbe avec les span, si tu le fais avec100% DIV tant mieux pour toi, je ne suis pas contre.

PS :C'est un topic de contribution pas de salissure de topic.
(Tu as fais ça dans tous mes topics, est-ce à cause de ma discussion dans le forum politique ?)

[Auteur]

PS :C'est un topic de contribution pas de salissure de topic.

Je te fais part de mes remarques. Un span est un élément inline et ne doit pas contenir d'éléments de type block comme le div, p etc.
Ton code n'est pas valide W3C.

(Tu as fais ça dans tous mes topics, est-ce à cause de ma discussion dans le forum politique ?)

- et d'1 tu as posté dans le forum contribution JS et j'ai tout à fait le droit de poser un commentaire sur les codes que tu proposes ;
- et de 2 "tous tes topics" ? Tu exagères, j'ai réagi à deux des sujets que tu as ouvert ;
- et de 3, je ne consulte pas le forum politique je ne sais donc pas de quoi tu parles.

[dragonno]

Je ne refuse pas ta remarque sur le span mais tu pouvais me faire celle sur IE en mp.
Et en te parlant de remarques je ne pensais pas au fait que ce soit un span mais au fait que je n'aime pas IE.
Désolé de m'être mal exprimé.

Je parlais de mes topics contributions.

Concernant le barometre des navigateurs, je ne my fie pas, IE est distribué avec les PC familiaux, et donc se distribue plus facilement auprès du public, en plus Microsoft en fait une pub forcenée de IE.
Et pourtant il emmerde tous les développeurs de sites web qui sont obligés de s’embêter pour arriver à contourner les non standards de IE.

Concernant le DIV à la place du Span, je tenterais de le faire quand j'aurais du temps, pour proposer un truc plus strict (à la W3C) mais avec les div c'est chiant à positionner dans ce cas précis.

[Bovino]

Bah oui mais une contribution qui ne prend pas en compte IE, ça n'est pas très utile...
C'est comme construire une maison sans toit sous prétexte que tu n'aimes pas la pluie... C'est peut-être vrai, mais la pluie existe, tu n'as pas le choix...

Ceci dit, tu sembles être resté figé à IE6 dans tes arguments.
Pour des raisons historiques, IE6 obéissait effectivement aux normes édictées par Microsoft, mais depuis la version 7, ils ont commencé à rendre leur navigateur plus conforme, IE8 a aussi été une version de transition à ce niveau mais avec IE9 puis IE10, ils mettent à disposition un navigateur tout à fait correct.
Pour rappel, cela n'a pas été aussi simple de s'adapter aux nouveaux standards puisque contrairement aux autres navigateurs, chez eux, JScript est partagé avec d'autres applicatifs, du coup, tu ne bouleverses pas le comportement aussi facilement que ça !

Concernant le barometre des navigateurs, je ne my fie pas, IE est distribué avec les PC familiaux, et donc se distribue plus facilement auprès du public, en plus Microsoft en fait une pub forcenée de IE.

Les baromètres tels que celui mentionné par Auteur se basent sur l'utilisation, par sur le fait qu'il soit installé...