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 :

Menu grid 6 lignes séparer en trois colones


Sujet :

Grille CSS (CSS Grid)

  1. #1
    Membre du Club
    Menu grid 6 lignes séparer en trois colones
    Bonjour et merci à ceux qui voudrons bien prendre de leurs temps pour m'aider.

    Je veut faire un menu comme ceci:


    j'ai fait le html suivant:

    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     <section class="grid-item deux grid-container-time">
            <h1 class="title-red">Horraires</h1>
            <section class="bleu">Heure Film Salle</section>
            <section class="white">12h tommy 1</section>
            <section class="gris-f">14h in the wood 1</section>
            <section class="white">14h le chien perdu 2</section>
            <section class="gris-f">18h lavoir et les seins 1</section>
            <section class="white">18h truqueur sur gage 2</section>           
          </section>


    Et le CSS qui va avec:
    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
    .grid-item{	
    	border: 2px solid #222222;	
    }
     
    .grid-container-time {
    	display: grid;
    	grid-template-columns:1fr;    
    	}
    .bleu{ 
    	background-color:#527bea;	
      }
      .white{
    	  background-color: white;
    	}
      .gris-f{
    	  background-color: #858585;
      }


    Évidement ça ne donne pas le résultat attendu.
    SI vous avez une idée ou une solution à me proposé je suis preneuse

  2. #2
    Membre expert
    pourquoi ne pas utiliser les <table> (qui se prete a cette situation) ?

    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <h1>Horaires</h1>
    <table>
      <tr><th>Heure</th><th>Film</th><th>Salle</th></tr>
      <tr><td>12h</td><td>tommy</td><td>1</td></tr>
      <tr><td>14h</td><td>in the wood</td><td>1</td></tr>
      <tr><td>14h</td><td>le chien perdu</td><td>2</td></tr>
      <tr><td>18h</td><td>lavoir et les seins</td><td>1</td></tr>
      <tr><td>18h</td><td>truqueur sur gage</td><td>2</td></tr>
    </table>
    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
    h1 {
      color: white;
      background-color: rgb(193 0 0);
      width: 170px;
      padding: 10px 0;
      text-align: center;
    }
    table {
      width: 100%;
      background-color: white;
      text-align: center;
    }
    table td:first-letter { text-transform: capitalize; }
    table tr:nth-of-type(odd) { background-color: #858585; }
    table tr:nth-of-type(1) { color: white; background-color: #527bea; }
    table tr th:nth-of-type(1){ width: 50px; }
    table tr th:nth-of-type(3){ width: 50px; }
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  3. #3
    Membre du Club
    remerciement Doksuri
    merci de votre aide.
    Sincèrement j’aurais jamais trouver ça.
    plus que quelque souci à régler et tout est bon.

###raw>template_hook.ano_emploi###