comment simplifier ce code ?

**laurentSc** · 09/09/2013, 17h02

Bonjour,

j'ai récupéré un code que je dois un peu modifier, mais ça me semble mal codé et du coup très difficile à modifier ; qu'en pensent les experts ? (Et ont-ils des idées de simplification ?)

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
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
69
70
71
72
73
74
75
76
77
78
79
80
81
 
    <script>
// COLONNE 1 : USER CENTRIC
var titre_1="USERS CENTRIC";
etc...
</script>
<table style="border:1px solid white" class="siteMap2" cellpadding="0" cellspacing="0"
 
      width="790">
      <tbody>
        <tr>
          <td style="border:1px solid white" width="135">&nbsp;</td>
          <td style="border:1px solid white" width="3"> &nbsp; </td>
          <td style="border:1px solid white" width="135">&nbsp;</td>
          <td style="border:1px solid white" width="3">&nbsp;</td>
          <td style="border:1px solid white" width="135">&nbsp;</td>
          <td style="border:1px solid white" width="3">&nbsp;</td>
          <td style="border:1px solid white" width="135">&nbsp;</td>
          <td style="border:1px solid white" width="3">&nbsp;</td>
          <td style="border:1px solid white" width="135">&nbsp;</td>
          <td style="border:1px solid white" width="3">&nbsp;</td>
          <td style="border:1px solid white" width="135">&nbsp;</td>
        </tr>
        <tr>
          <td>
            <table class="Menu1" id="Menu1" border="0" cellpadding="0" cellspacing="0"
 
              width="100%">
              <tbody>
                <tr>
                  <td>
                    <table class="level1" cellpadding="0" cellspacing="0">
                      <tbody>
                        <tr>
                          <td>
                            <div class="board">
                              <a href="#" target="_self">
                                <script>document.write(titre_1);</script></a>
                            </div>
                            <br>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
          <td><br>
          </td>
          <td>
            <table class="Menu1" id="Menu1" border="0" cellpadding="0" cellspacing="0"
 
              width="100%">
              <tbody>
                <tr>
                  <td>
                    <table class="level1" cellpadding="0" cellspacing="0">
                      <tbody>
                        <tr>
                          <td>
                            <div class="board">
                              <a href="#" target="_self">
                                <script>document.write(titre_2);</script></a>
                            </div>
                            <br>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
          <td><br>
          </td>
etc...
</tr>
</table>

et code 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
.siteMap2 .normal,
.siteMap2 .selected{cursor:pointer;}
.siteMap2{width:790px;}
.siteMap2 a{color:inherit;font-family:inherit;font-size:inherit;margin:0;padding:0;}
.siteMap2 .normal *{font-weight:bold;color:white;}
.siteMap2 *{margin:0;padding:0;font:bold 13px arial;font-style:normal;text-decoration:none;color:#626469;}
.siteMap2 .Menu1{height:40px;}
.siteMap2 .Menu1 .Separator{width:5px;height:40px;}
.siteMap2 .Menu1 *{width:125px;font-weight:normal;}
.siteMap2 .Menu1 a{width:100%;font-weight:inherit;color:#626469;}
.siteMap2 .Menu1_roundTop .top{height:5px;background-color:transparent;line-height:0;background-image:url("http://www.schneider-electric.fr/gc_1_0/images/structure/roundCorner_greytop.gif");}
.siteMap2 .Menu1_content{width:100%;background-color:#EAEAEA;height:25px;}
.siteMap2 .Menu1_content td{width:115px;}
.siteMap2 .Menu1_content td.padding{width:7px;}
.siteMap2 .Menu1 .normal *{font-weight:bold;color:#626469;}
.siteMap2 .Menu1 .selected .Menu1_roundTop .top{background-image:url("http://www.schneider-electric.fr/gc_1_0/images/structure/roundCorner_greentop.gif");}
.siteMap2 .Menu1 .selected *{font-weight:bold;color:white;}
.siteMap2 .Menu1 .selected a{width:115px;font-weight:bold;color:white;}
.siteMap2 .selected .Menu1_content{background-color:#87D300;height:35px;}
.siteMap2 .Menu1_rollover .Menu1_roundTop .top{background-image:url("http://www.schneider-electric.fr/gc_1_0/images/structure/roundCorner_greentop.gif");}
.siteMap2 .Menu1_rollover .Menu1_content{background-color:#87D300;height:35px;}
.siteMap2 .board{background-color:#eaeaea;width:100%;color:#626469;margin-bottom:2px!important;margin-bottom:6px;}
.siteMap2 .board a{font-family:Arial;font-size:11px;padding:1px 0;}
.siteMap2 .topLeftCorner,
.siteMap2 .topRightCorner,
.siteMap2 .bottomLeftCorner,
.siteMap2 .bottomRightCorner{width:2px;height:2px;background-repeat:no-repeat;font-size:0;}
.siteMap2 .topLeftCorner{background:url("http://www.schneider-electric.fr/gc_1_0/images/structure/bg_vertNav_top_left.gif");}
.siteMap2 .topRightCorner{background:url("http://www.schneider-electric.fr/gc_1_0/images/structure/bg_vertNav_top_right.gif");float:right;}
.siteMap2 .bottomLeftCorner{background:url("http://www.schneider-electric.fr/gc_1_0/images/structure/bg_vertNav_bottom_left.gif");}
.siteMap2 .bottomRightCorner{background:url("http://www.schneider-electric.fr/gc_1_0/images/structure/bg_vertNav_bottom_right.gif");float:right;}
.siteMap2 .level1 a,
.siteMap2 .level1 a:link,
.siteMap2 .level1 a:visited{display:block;text-decoration:none;color:#626469;font:bold Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;line-height:12px;padding-left:10px;width:auto;}
.siteMap2 .level1 .level2{margin-top:2px!important;margin-top:-2px;margin-bottom:16px;}
.siteMap2 .board{background-color:#eaeaea;width:100%;color:#626469;margin-bottom:2px!important;margin-bottom:6px;}
.siteMap2 .board a{font-family:Arial;font-size:11px;padding:1px 0;}

et encore, ceci n'est qu'une petite partie du code, mais si déjà, on peut simplifier cela...

(pas la peine de regarder les URLs du code ; c'est de l'intranet)

**Torgar** · 09/09/2013, 17h26

Alors :
1 - Arrêter de pomper des bouts de code par-ci par-là !!! Ça n'aide pas, la preuve.
2 - Arrêter la mise en page en <table>.
3 - Arrêter d'utiliser document.write() pour insérer du texte (sorti d'on ne sais où en plus). Si c'est un affichage dynamique, préfère l'usage de PHP ou d'une autre langage serveur.
4 - Arrêter les déclarations CSS avec la propriété HTML style. Ça disperse les styles et la lecture de ton code.
5 - Arrêter d'utiliser la propriété HTML width au profit de CSS.
6 - Pourquoi préfixer tout les styles CSS par la classe .siteMap2. Est-ce vraiment utile ?
7 - Arrêter d'utiliser   pour créer des espaces vides. Préfère un padding ou margin CSS
8 - Arrêter de pomper des bouts de code par-ci par-là !!!

Je dois sûrement en oublier.

**nathieb** · 09/09/2013, 17h38

Bonjour,

C'est pas bien de pomper, ou alors on fait disparaître les traces, ces jeunes ... en plus les URLs sont accessibles, paf l'intranet.

le jugement "est mal codé" est pas correct, qui vous permet de juger une simple page ??

Olivier

**laurentSc** · 09/09/2013, 17h50

Je suis d'accord avec l'ensemble de tes remarques (Torgar) ; mais mon souci, c'est que je dois respecter une spécification qui existe sur internet : http://www.schneider-electric.fr/sit...n-du-site.page et que le bout de code (fortement répréhensible ; je suis d'accord) y répond ; donc selon toi (Torgar), vaut-il mieux pomper un code (moche mais qui marche) et le modifier pour obtenir ce que je souhaite ou tout faire de A à Z (sauf que je suis démuni...) ?

le jugement "est mal codé" est pas correct, qui vous permet de juger une simple page ??

Je m'étais fait la plupart des remarques de Torgar ; c'est pour ça...

EDIT : je réécrirais bien le html, sans toucher au CSS, mais j'ai déjà échoué en faisant un essai...

**Torgar** · 09/09/2013, 17h57

Si c'est ça que tu souhaites obtenir, t'as absolument pas besoin de passer par un tableau. Et puis même du point de vue sémantique, c'est faux d'utiliser un tableau pour afficher ce type de donnée.

Tu as les listes ordonnées pour faire ça. Ou des <div>. Mais pas de tableau.

Si tu trouves que c'est mal codé, tu l'utilises pas, point. L'inconvénient de reprendre un code existant c'est qu'on le comprend qu'à moitié et on se retrouve coincé quand on doit le modifier.

Donc le mieux c'est de le faire soi-même pour apprendre.

**laurentSc** · 09/09/2013, 19h38

OK pour une mise en page sans table html ; je pense avoir surtout des soucis pour le CSS ; si j'ai un problème, je posterai sur le forum CSS...

comment simplifier ce code ?

HTML

Vue hybride

Discussions similaires

Partager

Partager