Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Mise en page de titre avec colonne


Sujet :

Tableau en CSS

  1. #1
    Nouveau Candidat au Club
    Mise en page de titre avec colonne
    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;
    }

  2. #2
    Modérateur

    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.

  3. #3
    Nouveau Candidat au Club
    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 !

  4. #4
    Modérateur

    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

###raw>template_hook.ano_emploi###