Nouveauté CSS et codage. Organiser des boutons radio et des divs pour une galerie de débutants

Le problème que je n'arrive pas à résoudre est de savoir comment déplacer les divs masqués sous les boutons radio + label.Nouveauté CSS et codage. Organiser des boutons radio et des divs pour une galerie de débutants

My Html

My CSS

/*color palette: abls 
 
    [lightest to darkest] 
 
    #eeeeee 
 
    #eaffc4 
 
    #b6c399 
 
    #6a856a 
 
    #333333 
 
    */ 
 
    
 
    body { 
 
     background-color: #333333; 
 
     font-family: monospace; 
 
     display: flex; 
 
     justify-content: center; 
 
    } 
 
    
 
    div { 
 
     /*background-color: red;*/ 
 
     width: 100%; 
 
     height: 100%; 
 
     justify-content: center; 
 
    } 
 
    
 
    /*aesthetics for header*/ 
 
    .Ghead { 
 
     font-size: 250%; 
 
     color: #eeeeee; 
 
     font-weight: lighter; 
 
     text-align: center; 
 
     border-color: red; 
 
    } 
 
    
 
    /*color for the 3 lines*/ 
 
    hr:nth-child(1) { 
 
     border-color: #eaffc4; 
 
     max-width: 20%; 
 
    } 
 
    
 
    hr:nth-child(2) { 
 
     border-color: #b6c399; 
 
     max-width: 25%; 
 
    } 
 
    
 
    hr:nth-child(3) { 
 
     border-color: #6a856a; 
 
     max-width: 30%; 
 
    } 
 
    
 
    /*style for radio button container*/ 
 
    .mGalD { 
 
     position: relative; 
 
     /*background-color: blue;*/ 
 
     display: flex; 
 
    } 
 
    
 
    input[type=radio] { 
 
     display:none; 
 
    } 
 
    
 
    /*handles aesthetics of active buttons*/ 
 
    label { 
 
     padding: 5px 7px; 
 
     border-radius: 5px; 
 
     display: inline-block; 
 
     font-size: 14px; 
 
     color: #6a856a; 
 
    } 
 
    
 
    input:checked + label { 
 
     background-color: #eaffc4; 
 
    } 
 
    
 
    /*handles the appearance of active divs in the display area*/ 
 
    label + div { 
 
     position: relative; 
 
     color: red; 
 
     border: 2pt solid #eaffc4; 
 
     border-radius: 5px; 
 
     margin: 5px 0 0 0; 
 
     display: none; 
 
     max-width: 50%; 
 
    } 
 
    
 
    input:checked + label + div { 
 
     display: block; 
 
    }

<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
     <meta charset="UTF-8"> 
 
     <link href="./NewbTests.css" rel="stylesheet" type="text/css"> 
 
     <link rel="shortcut icon" type="image/png" href="./Assets/SumisoulLogo.png"> 
 
     <title>Viewport</title> 
 
     </head> 
 
    
 
     <body> 
 
     <div> 
 
      <h1> 
 
      <!--title and aesthetics for the head of the page--> 
 
      <div class="Ghead"> 
 
       Viewport 
 
       <hr> 
 
       <hr> 
 
       <hr> 
 
      </div> 
 
      </h1> 
 
    
 
      <!--Labeled Radio buttons which activate css to reveal divs--> 
 
      <div class="mGalD"> 
 
       <input type="radio" name="gal" id="g1" value="1"> 
 
       <label for="g1">gallery 1</label><div>one</div> 
 
       <input type="radio" name="gal" id="g2" value="2"> 
 
       <label for="g2">gallery 2</label><div>two</div> 
 
       <input type="radio" name="gal" id="g3" value="3"> 
 
       <label for="g3">gallery 3</label><div>three</div> 
 
      </div> 
 
    
 
     </div> 
 
     </body> 
 
    </html>

j'aurais lié quelques images pour illustrer ce qui se passe mais je suis limité dans les liens.

En substance; Avant: (touche 1) (touche 2) (touche 3)

En cliquant sur un bouton: (touche 1) [_______________________] (touche 2) (touche 3)

Le div apparaît sur le côté du bouton correspondant. Je ne sais pas vraiment quoi faire pour avoir aligner dans une colonne sans séparer tous les divs et briser le style en ligne des boutons

Source

2017-07-22 Sumisoul

Je ne comprends pas, ce que vous voulez réaliser ici? Votre résultat attendu? –

s'il vous plaît être clair sur ce que vous essayez d'atteindre exactement. –

Je voudrais simplement que l'ensemble des divs apparaisse sous le label inline + boutons radio combo. Alors que lorsque je clique sur chaque bouton, il n'affiche que le contenu correspondant que j'ai affecté à chaque div, qui est à son tour affecté à ces boutons – Sumisoul

Hope this fonctionne

body, html { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background: linear-gradient(top left, red, orange); 
 
} 
 

 
span { 
 
    display: none; 
 
    position: absolute; 
 
    max-width: 450px; 
 
    left: 17px; 
 
    top: 48px; 
 
    padding: 3px; 
 
    min-height: 30px; 
 
    border-top: 1px solid #d3d3d3; 
 
} 
 

 
label { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 10px 0 0 0; 
 
    background: #e0e0e0; 
 
    color: black; 
 
} 
 
label:first-child { 
 
    margin-left: 10px; 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 
input:checked + span { 
 
    display: initial; 
 
} 
 

 
h3 { 
 
    border-top: 1px solid; 
 
    padding-top: 5px; 
 
    position: absolute; 
 
    top: 150px; 
 
    left: 15px; 
 
}

<label for="btn_one">Gallery 1</label> 
 
<input type="radio" id="btn_one" name="nesto" checked="checked"/> 
 
<span class="tab1">Gallery One</span> 
 
<label for="btd_two">Gallery 2</label> 
 
<input type="radio" id="btd_two" name="nesto"/> 
 
<span class="tab2">Gallery two</span> 
 
<label for="btd_tree">Gallery 3</label> 
 
<input type="radio" id="btd_tree" name="nesto"/> 
 
<span class="tab2">Gallery Three</span>

Source

2017-07-22 06:03:40

Merci, Dhruvang. Je vais essayer. J'apprécie l'effort. – Sumisoul

wc. S'il vous plaît accepter ma réponse en vérifiant le signe de vérité @Sumisoul –

sûr. Je suis encore en train de passer par ATM pour comprendre les choses. Puisque je ne sais pas si je l'applique correctement car je n'obtiens pas le résultat que je veux. Mais cela m'a au moins donné quelques idées – Sumisoul

Nouveauté CSS et codage. Organiser des boutons radio et des divs pour une galerie de débutants

Répondre

Questions connexes