Discussion :

[Armagnak]

Bonjour,

J'ai realise un bouton et j'aimerais le dupliquer.
Voici le bouton :

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
#bouton_vert{
background: url("/images/Bouton_vert.gif") ;
height:24px;
width:170px;
margin: 50px 0 0 0px;
padding: 0;
border: 0;
display: block;
float:left;
}
 
#bouton_vert_begin{
background: url("/images/Bouton_vert_begin.gif") no-repeat;
height:24px;
width:5px;
margin: 50px 0 0 0px;
padding: 0;
border: 0;
display: block;
float:left;
}
 
#bouton_vert_end{
background: url("/images/Bouton_vert_end.gif") no-repeat;
height:24px;
width:5px;
margin: 50px 0 0 0px;
padding: 0;
border: 0;
display: block;
float:left;
}

J'aimerais remplacer le "50" par un X et faire plein de bouton partout
L'idee etant de ne pas surcharger la feuille CSS.

Je pense que ca doit etrre faisable voire basique,
mais je ne sais pas a quel chapitre des cours de CSS me referer.

Armagnak

[Orgied]

La solution n'est pas dans les CSS mais dans un langage comme Javascript ou PHP.

A la base, tu élabores une CSS avec des class et pas des ids pour pouvoir les employer plusieurs fois. Ensuite, tu réalises un script pour dupliquer les boutons et tu modifies la propriété margin à l'aide du langage de ton choix (php, javascript, asp, etc.).

En parlant de surcharger la feuille, tu la soulagerais largement en modifiant celle-ci comme suit :

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
 
a {
height:24px;
padding: 0;
border: 0;
display: block;
float:left;
margin: 50px 0 0 0px;
}
.bouton_vert{
background: url("/images/Bouton_vert.gif") ;
width:170px;
}
 
.bouton_vert_begin{
background: url("/images/Bouton_vert_begin.gif") no-repeat;
width:5px;
}
 
.bouton_vert_end{
background: url("/images/Bouton_vert_end.gif") no-repeat;
width:5px;
}

[Armagnak]

Ok

Merci bien !

Je commence a bien aimer le CSS !