Aller au contenu

« Modèle:Pays test » : différence entre les versions

De Wikiquestia
Aucun résumé des modifications
Aucun résumé des modifications
Ligne 1 : Ligne 1 :
<div style="text-align:center;">
/* Hide radio buttons */
  <input type="radio" id="panel1" name="infobox" checked />
.infobox-radio {
  <label for="panel1" class="infobox-label">Panel 1</label>
    display: none;
}


  <input type="radio" id="panel2" name="infobox" />
/* Style labels as buttons */
  <label for="panel2" class="infobox-label">Panel 2</label>
.infobox-label {
    cursor: pointer;
    padding: 5px 15px;
    border: 1px solid #ccc;
    background: #eee;
    margin-right: 5px;
    display: inline-block;
}


  <div class="infobox-container">
/* Style the container */
     <div class="infobox-panel" id="content1">
.infobox-container {
      [[File:Image1.jpg|250px|alt=Description of Image 1]] 
    border: 1px solid #ccc;
      <p>Description for Image 1</p>
    padding: 10px;
    </div>
     margin-top: 10px;
    <div class="infobox-panel" id="content2">
    background: #f9f9f9;
      [[File:Image2.jpg|250px|alt=Description of Image 2]] 
    text-align: center;
      <p>Description for Image 2</p>
}
     </div>
 
  </div>
/* Hide both panels by default */
</div>
.infobox-panel {
    display: none;
}
 
/* Show the selected panel */
#panel1:checked ~ .infobox-container #content1,
#panel2:checked ~ .infobox-container #content2 {
     display: block;
}

Version du 2 avril 2025 à 10:52

/* Hide radio buttons */ .infobox-radio {

   display: none;

}

/* Style labels as buttons */ .infobox-label {

   cursor: pointer;
   padding: 5px 15px;
   border: 1px solid #ccc;
   background: #eee;
   margin-right: 5px;
   display: inline-block;

}

/* Style the container */ .infobox-container {

   border: 1px solid #ccc;
   padding: 10px;
   margin-top: 10px;
   background: #f9f9f9;
   text-align: center;

}

/* Hide both panels by default */ .infobox-panel {

   display: none;

}

/* Show the selected panel */

  1. panel1:checked ~ .infobox-container #content1,
  2. panel2:checked ~ .infobox-container #content2 {
   display: block;

}