Set and align to the left an anchor tag after a JavaScript code

Issue

I try to indent correctly different anchors after especially an anchor located just after a <script type="text/javascript" ...></script>.

You can see the current page that I get on this link.

and the following figure :

As you can notice, the second anchor (2.Pistes d'optimisation) is not left aligned like the first one (1.Canvas game) and moreover, it is too vertically closed relatively to the canvas.

I think this is due to the fact that I include the JavaScript tag just after the last external <div> containing the canvas.

For example, I have :

<div>
... <canvas>
</div>
<script type="text/javascript" src="game_css_and_js/game.js"></script>
<h4><a name="optimization">2.Pistes d'optimisation :</a></h4>

How can I have right margins for this second anchor (2.Pistes d'optimisation) to get a left aligning and a correct vertical space compared to the canvas (like the first anchor) ?

Solution

You issue is that You have the <h4><a name="optimization">2.Pistes d'optimisation :</a></h4> inside <div id="main-wrapper"> and the <h4><a name="canvas">1.Canvas game :</a></h4> is outside the <div id="main-wrapper">. Just put the second link outside to resolve your issue as follows:

<td class="body_content">
                  <br>
                  <ul>
                     <li><a class="bottom_link" href="index.html#canvas">1.Jeu game</a></li>
                     <li><a class="bottom_link" href="index.html#optimization">2.Pistes d'optimisation</a></li>
                  </ul>
                  <h4><a name="canvas">1.Canvas game :</a></h4>
                  <div id="main-wrapper">
                  <div id="game-wrapper">
                     <canvas id="game-canvas" width="501" height="501"></canvas>
                  </div>
                  <div id="score-zone-wrapper">
                     <table id="score-zone">
                        <tbody><tr>
                           <td id="score-zone-white" colspan="2" style="padding: 5px;">White Score</td>
                        </tr>
                        <tr>
                           <td id="score-white"></td>
                           <td align="center" style="float: right; padding-top: 5px; padding-right: 30px;">
                              <svg height="54" width="54">
                                 <circle cx="27" cy="27" r="26" stroke="black" stroke-width="1" fill="white"></circle>
                              </svg>
                           </td>
                        </tr>
                        <tr>
                           <td id="score-zone-black" colspan="2" style="padding: 5px;">Black Score</td>
                        </tr>
                        <tr>
                           <td id="score-black"></td>
                           <td align="center" style="float: right; margin-top: 5px; padding-right: 30px;">
                              <svg height="54" width="54">
                                 <circle cx="27" cy="27" r="26" stroke="white" stroke-width="1" fill="black"></circle>
                              </svg>
                           </td>
                        </tr>
                     </tbody></table>
                  </div>
                  <div id="messaging"></div>
                  <div id="paramStart">
                     <div id="gameType">
                        <form id="formGame">
                           <div id="PlayerVsComputer" class="checkbox">
                              <label>
                                 <input type="checkbox" class="game">
                                 <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-inverse btn-xs">Player</button>
                                    <button type="button" class="btn btn-classic btn-xs">Computer</button>
                                 </div>
                              </label>
                           </div>
                           <div id="Player1VsPlayer2" class="checkbox">
                              <label>
                                 <input type="checkbox" class="game">
                                 <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-inverse btn-xs">Player 1</button>
                                    <button type="button" class="btn btn-classic btn-xs">Player 2</button>
                                 </div>
                              </label>
                           </div>
                        </form>
                        <div id="PlayableHits" class="checkbox">
                           <div class="btn-group" role="group">
                              <button type="button" class="btn btn-primary btn-xs">Show playable hits</button>
                           </div>
                        </div>
                        <div id="ButtonNewGame">
                           <div class="btn-group" role="group">
                              <button type="button" class="btn btn-primary btn-xs">Start Game</button>
                           </div>
                        </div>
                     </div>
                  </div>   
                  <script type="text/javascript" src="game_css_and_js/game.js"></script>                                 

              </div>
<h4><a name="optimization">2.Pistes d'optimisation :</a></h4></td>

Answered By - Yasir