Vérification d'un code

Vérification d'un code - HTML/CSS - Programmation

Marsh Posté le 04-09-2015 à 16:21:24    

Bonjour, je débute depuis pas très très longtemps le langage HTML/CSS.  
Pour explication : j'ai été embauché dans une boîte (il y a peu de temps) ou ils cherchaient quelqu'un qui fesait double emploi :  
   -Une partie qui représente ma formation, et ce dans quoi je suis "bon"
   -Une partie informatique, chose qui me passionne, mais qui n'est pas mon domaine de formation du tout.
 
Donc j'ai récupéré le site internet tel qu'il a été crée, et j'ai du apprendre les base du langage HTML/CSS pour faire évoluer le site. Mais là je bloque sur un menu déroulant à 3 niveaux. car comme vous pourrez le voir avec le lien, l'onglet EEQ et vraiment trop long donc je veux regrouper pour faire un autre menu deroulant qui s'ouvrirai sur la droite.
 
voici le site : http://www.probioqual.com/index.php
 
voici le code que j'ai fait, pourriez vous me dire toutes les erreurs de ce code car je suis sur qu'il y en a, et, si possible, me renvoyer le code sans erreur :
 
Je vous en serai VRAIMENT reconnaissant car ça fait environ 1 semaine que je planche dessus sans succès
 
<ul>
  <li>Titre 1
    <ul>
      <li><a href="#">Sous Titre 1</a></li>
      <li><a href="#">Sous Titre 2</a></li>
      <li><a href="#">Sous Titre 3</a></li>
      <li><a href="#">Sous Titre 4</a></li>
    </ul>
  </li>
  <li>Titre 2
    <ul>
      <li><a href="#">Sous Titre 1</a></li>
      <li>Sous Titre 2</li>
        <ul>
          <li><a href="#">Sous Sous Titre 1</a></li>
          <li><a href="#">Sous Sous Titre 2</a></li>
          <li><a href="#">Sous Sous Titre 3</a></li>
          <li><a href="#">Sous Sous Titre 4</a></li>
          <li><a href="#">Sous Sous Titre 5</a></li>
          <li><a href="#">Sous Sous Titre 6</a></li>
          <li><a href="#">Sous Sous Titre 7</a></li>
          <li><a href="#">Sous Sous Titre 8</a></li>
          <li><a href="#">Sous Sous Titre 9</a></li>
          <li><a href="#">Sous Sous Titre 10</a></li>
          <li><a href="#">Sous Sous Titre 11</a></li>
          <li><a href="#">Sous Sous Titre 12</a></li>
          <li><a href="#">Sous Sous Titre 13</a></li>
        </ul>
      <li>Sous Titre 3</li>
        <ul>
          <li><a href="#">Sous Sous Titre 1</a></li>
          <li><a href="#">Sous Sous Titre 2</a></li>
          <li><a href="#">Sous Sous Titre 3</a></li>
          <li><a href="#">Sous Sous Titre 4</a></li>
          <li><a href="#">Sous Sous Titre 5</a></li>
        </ul>  
      <li>Sous Titre 4</li>
        <ul>
          <li><a href="#">Sous Sous Titre 1</a></li>
          <li><a href="#">Sous Sous Titre 2</a></li>
          <li><a href="#">Sous Sous Titre 3</a></li>
          <li><a href="#">Sous Sous Titre 4</a></li>
        </ul>
      <li>Sous Titre 5</li>
        <ul>
          <li><a href="#">Sous Sous Titre 1</a></li>
          <li><a href="#">Sous Sous Titre 2</a></li>
          <li><a href="#">Sous Sous Titre 3</a></li>
          <li><a href="#">Sous Sous Titre 4</a></li>
          <li><a href="#">Sous Sous Titre 5</a></li>
        </ul>
      <li>Sous Titre 6</li>
        <ul>
          <li><a href="#">Sous Sous Titre 1</a></li>
          <li><a href="#">Sous Sous Titre 2</a></li>
          <li><a href="#">Sous Sous Titre 3</a></li>
        </ul>
      <li>Sous Titre 7</li>
        <ul>
          <li><a href="#">Sous Sous Titre 1</a></li>      
        </ul>
     </ul>  
  </li>
  <li>Titre 3</li>
    <ul>
      <li><a href="#">Sous Titre 1</a></li>
      <li><a href="#">Sous Titre 2</a></li>
      <li><a href="#">Sous Titre 3</a></li>
      <li><a href="#">Sous Titre 4</a></li>
      <li><a href="#">Sous Titre 5</a></li>
      <li><a href="#">Sous Titre 6</a></li>
      <li><a href="#">Sous Titre 7</a></li>
    </ul>
     
  <li>Titre 4</li>
    <ul>
      <li><a href="#">Sous Titre 1</a></li>
      <li><a href="#">Sous Titre 2</a></li>
      <li><a href="#">Sous Titre 3</a></li>
      <li><a href="#">Sous Titre 4</a></li>
      <li><a href="#">Sous Titre 5</a></li>
    </ul>
     
  <li>Titre 5</li>
    <ul>
      <li><a href="#">Sous Titre 1</a></li>
      <li><a href="#">Sous Titre 2</a></li>
      <li><a href="#">Sous Titre 3</a></li>
      <li><a href="#">Sous Titre 4</a></li>
      <li><a href="#">Sous Titre 5</a></li>
    </ul>
 
  <li>Titre 6</li>
    <ul>
      <li><a href="#">Sous Titre 1</a></li>
    </ul>
   
  <li>Titre 7</li>
    <ul>
      <li><a href="#">Sous Titre 1</a></li>
      <li><a href="#">Sous Titre 2</a></li>
      <li><a href="#">Sous Titre 3</a></li>
      <li><a href="#">Sous Titre 4</a></li>
      <li><a href="#">Sous Titre 5</a></li>
    </ul>    
</ul>

Reply

Marsh Posté le 04-09-2015 à 16:21:24   

Reply

Marsh Posté le 05-09-2015 à 14:45:29    

Mauvaise imbriquation, au début c'était bien parti mais à partir de sous titre 2 ta sous liste non ordonné (ul) doit être imbriqué, pareil jusqu'à la fin.
 
 


<ul>
  <li>Titre 1
    <ul>
      <li><a href="#">Sous Titre 1</a></li>
      <li><a href="#">Sous Titre 2</a></li>
      <li><a href="#">Sous Titre 3</a></li>
      <li><a href="#">Sous Titre 4</a></li>
    </ul>
  </li>
  <li>Titre 2
    <ul>
      <li><a href="#">Sous Titre 1</a></li>
      <li>Sous Titre 2
        <ul>
          <li><a href="#">Sous Sous Titre 1</a></li>
          <li><a href="#">Sous Sous Titre 2</a></li>
          <li><a href="#">Sous Sous Titre 3</a></li>
          <li><a href="#">Sous Sous Titre 4</a></li>
          <li><a href="#">Sous Sous Titre 5</a></li>
          <li><a href="#">Sous Sous Titre 6</a></li>
          <li><a href="#">Sous Sous Titre 7</a></li>
          <li><a href="#">Sous Sous Titre 8</a></li>
          <li><a href="#">Sous Sous Titre 9</a></li>
          <li><a href="#">Sous Sous Titre 10</a></li>
          <li><a href="#">Sous Sous Titre 11</a></li>
          <li><a href="#">Sous Sous Titre 12</a></li>
          <li><a href="#">Sous Sous Titre 13</a></li>
        </ul>
      </li>
      <li>Sous Titre 3
        <ul>
          <li><a href="#">Sous Sous Titre 1</a></li>
          <li><a href="#">Sous Sous Titre 2</a></li>
          <li><a href="#">Sous Sous Titre 3</a></li>
          <li><a href="#">Sous Sous Titre 4</a></li>
          <li><a href="#">Sous Sous Titre 5</a></li>
        </ul>
      </li>  
      <li>Sous Titre 4
        <ul>
          <li><a href="#">Sous Sous Titre 1</a></li>
          <li><a href="#">Sous Sous Titre 2</a></li>
          <li><a href="#">Sous Sous Titre 3</a></li>
          <li><a href="#">Sous Sous Titre 4</a></li>
        </ul>
      </li>
      <li>Sous Titre 5
        <ul>
          <li><a href="#">Sous Sous Titre 1</a></li>
          <li><a href="#">Sous Sous Titre 2</a></li>
          <li><a href="#">Sous Sous Titre 3</a></li>
          <li><a href="#">Sous Sous Titre 4</a></li>
          <li><a href="#">Sous Sous Titre 5</a></li>
        </ul>
      </li>
      <li>Sous Titre 6
        <ul>
          <li><a href="#">Sous Sous Titre 1</a></li>
          <li><a href="#">Sous Sous Titre 2</a></li>
          <li><a href="#">Sous Sous Titre 3</a></li>
        </ul>
      </li>
      <li>Sous Titre 7
        <ul>
          <li><a href="#">Sous Sous Titre 1</a></li>      
        </ul>
      </li>
    </ul>  
  </li>
  <li>Titre 3
    <ul>
      <li><a href="#">Sous Titre 1</a></li>
      <li><a href="#">Sous Titre 2</a></li>
      <li><a href="#">Sous Titre 3</a></li>
      <li><a href="#">Sous Titre 4</a></li>
      <li><a href="#">Sous Titre 5</a></li>
      <li><a href="#">Sous Titre 6</a></li>
      <li><a href="#">Sous Titre 7</a></li>
    </ul>
  </li>
  <li>Titre 4
    <ul>
      <li><a href="#">Sous Titre 1</a></li>
      <li><a href="#">Sous Titre 2</a></li>
      <li><a href="#">Sous Titre 3</a></li>
      <li><a href="#">Sous Titre 4</a></li>
      <li><a href="#">Sous Titre 5</a></li>
    </ul>
  </li>
  <li>Titre 5
    <ul>
      <li><a href="#">Sous Titre 1</a></li>
      <li><a href="#">Sous Titre 2</a></li>
      <li><a href="#">Sous Titre 3</a></li>
      <li><a href="#">Sous Titre 4</a></li>
      <li><a href="#">Sous Titre 5</a></li>
    </ul>
  </li>
  <li>Titre 6
    <ul>
      <li><a href="#">Sous Titre 1</a></li>
    </ul>
  </li>
  <li>Titre 7
    <ul>
      <li><a href="#">Sous Titre 1</a></li>
      <li><a href="#">Sous Titre 2</a></li>
      <li><a href="#">Sous Titre 3</a></li>
      <li><a href="#">Sous Titre 4</a></li>
      <li><a href="#">Sous Titre 5</a></li>
    </ul>    
  </li>
</ul>


 
Ce genre de menu est largement documenté sur le web voila un exemple html/css sur codepen
http://codepen.io/Aidewebmaster/pen/KezcF
 
Bon courage.


Message édité par FBZ le 05-09-2015 à 14:46:02
Reply

Marsh Posté le 10-09-2015 à 16:09:56    

Merci beeaucoup. Je viens de finir mon menu déroulant avec le code css qui va avec :love: :love:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed