Discussion :

[sims8134]

Bonjour,

je me permet de poster ici car j'ai besoin d'aide.

En effet, je n'arrive pas à mettre mon titre "cours en ligne" au top de la page.

Aussi je souhaiterais que les images et les colonnes soit aligné horizontalement.

Comme vous le voyez , l'image " formation sécurité " et l'image " formation bureautique " ne sont pas aligné à l'image " formation internet".

Voici une image ainsi que mon code :

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
<article class="midpagecours">
      <h2>Cours en ligne :</h2>
 
        <li>
            <img id="img" src="img/bureautiquemoyen.png" alt="formation bureatique" />
          <h3>Microsoft Word:</h3>
          <a href="coursenligne.html">Cours complet au format .pdf</a>
 
 
          <h3>Microsoft Excel:</h3>
          <a href="coursenligne.html">Cours complet au format .pdf</a>
 
 
          <h3>Microsoft Power Point:</h3>
           <a href="coursenligne.html">Cours complet au format .pdf</a>
 
 
          <h3>Microsoft Outlook:</h3>
          <p>Cours complet au format.pdf <a>(Bientot disponible)</a></p>
 
        </li>
        <li>
            <img id="img"
              src="img/formationsinternetmoyen.png"
              alt="formation internet"
            />
            <h3>Initiation Internet:</h3>
            <a href="coursenligne.html">Cours complet au format .pdf</a>
 
 
            <h3>Email:</h3>
            <p>Cours complet au format .pdf <a>(Bientot disponible)</a></p>
 
 
            <h3>Réseaux Sociaux:</h3>
            <p>Cours complet au format.pdf <a>(Bientot disponible)</a></p>
 
 
            <h3>Prévention et Sensibilisation aux risques d'internet:</h3>
           <p>Cours complet au format.pdf <a>(Bientot disponible)</a></p>
 
          </li>
 
        <li>
 
            <img id="img" src="img/sécuritémoyen.png" alt="formation Sécurité" />
            <h3>S'approprier le système d'exploitation Windows :</h3>
            <p>Cours complet au format.pdf <a>(Bientot disponible)</a></p>
 
            <h3>Windows Defender et les autres antivirus:</h3>
            <a href="coursenligne.html">Cours complet au format.pdf</a>
 
 
            <h3>Diagnostiquer et nettoyer son ordinateur:</h3>
           <a href="coursenligne.html">Cours complet au format.pdf</a>
 
 
        </li>
      </ul>
    </article>

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
.midpagecours {
  max-width: 1280px;
  margin: auto;
  display: flex;
  justify-content: center;
  flex-direction: row;
  text-align: center;
}
 
.midpagecours h2 {
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
}
 
.midpagecours ul {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}
 
.midpagecours li {
  padding-bottom: 15px;
  margin: auto;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}
 
.midpagecours a {
  color: rgb(219, 15, 15);
}
 
.midpagecours p {
  color: rgb(15, 105, 219);
}
 
.midpagecours a:hover {
  text-decoration: underline;
}
 
.midpagecours img {
  margin-right: auto;
  margin-left: auto;
}

[NoSmoking]

Bonjour,
il faut commencer par écrire du code HTML valide ce qui n'est pas ton cas.

• éléments <li> non enfant d'un élément <ul> ;
• plusieurs ID identiques.

ensuite tu peux opter pour une construction en colonne, columns, une mise en page en utilisant un modèle de grille, display: grid, ou flexible, display: flex.

Concernant tes listes tu pourrais tirer avantage à utiliser des <dl>, peut-être plus propre sémantiquement parlant.

[sims8134]

Bonsoir,

merci beaucoup pour ton aide précieuse !

Oui je me sens tellement bete je n'avais meme pas vu que je n'avais pas de <ul> !

Merci encore bonne soirée !

[NoSmoking]

Concernant ton code CSS, tu uses et abuses du display:flex là où un seul suffirait sur le conteneur <ul>.

Je te propose de remplacer ton CSS par celui qui 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
24
25
26
27
28
29
30
31
32
33
34
.midpagecours {
  margin: auto;
  max-width: 1280px;
  text-align: center;
  background: #FDE;
}
.midpagecours h2 {
}
.midpagecours ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #DEF;
}
.midpagecours li {
  width: 100%;
  margin: 1em 0;
  background: #EFD;
}
.midpagecours h3 {
}
.midpagecours img {
}
.midpagecours a {
  color: rgb(219,15,15);
}
@media only screen and (min-width:768px) {
  .midpagecours li {
    width: 33%;
  }
}

à toi de voir les ajustements