créer une ligne verticale dans un sous menu

xmfrance
Les bases HTML/CSS

Bonjour,
Ceci est mon premier post sur ce forum
Je suis entrain de mettre en place un menu a deux boutons, sur toute la largeur de la page ou du block.
Voici mon code html et css ensemble.

"<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#scrollUp
{
position: fixed;
bottom : 10px;
right: -100px;
opacity: 0.5;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script>
            jQuery(function(){
                $(function () {
                    $(window).scroll(function () {
                        if ($(this).scrollTop() > 200 ) { 
                            $('#scrollUp').css('right','10px');
                        } else { 
                            $('#scrollUp').removeAttr( 'style' );
                        }

                    });
                });
            });
</script>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: #ff7643;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 12px;
  color: white;
  text-align: center;
  padding: 14px 12px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: ;
}

.dropdown .dropbtn {
  font-size: 12px;  
  border: none;
  outline: none;
  color: #f9f9f9;
  padding: 14px 12px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: ;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ccc;
  width: 400px;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content .header {
  background: ;
  padding: ;
  color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */

.row {
    height: 300px;
    overflow:auto;
}

.column {
  float: left;
  width: 120px;
  padding: ;
  background-color: #ccc;
  height: ;
}

.column a {
  float: none;
  color: black;
  padding: 5px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 120px;
    height: 25%;
  }
}
</style>
</head>
<body style="background-color:white;">

<div class="navbar">

  <div class="dropdown">
    <button class="dropbtn">Chapitres 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">

      <div class="row">
        <div class="column">

                <a href="#1/">Livre de Jérémie 1</a>
                <a href="#2/">Livre de Jérémie 2</a>
                <a href="#3/">Livre de Jérémie 3</a>
                <a href="#4/">Livre de Jérémie 4</a>
                <a href="#5/">Livre de Jérémie 5</a>
                <a href="#6/">Livre de Jérémie 6</a>
                <a href="#7/">Livre de Jérémie 7</a>
                <a href="#8/">Livre de Jérémie 8</a>
                <a href="#9/">Livre de Jérémie 9</a>
                <a href="#10/">Livre de Jérémie 10</a>
                <a href="#11/">Livre de Jérémie 11</a>
                <a href="#12/">Livre de Jérémie 12</a>
                <a href="#13/">Livre de Jérémie 13</a>
                <a href="#14/">Livre de Jérémie 14</a>
                <a href="#15/">Livre de Jérémie 15</a>
                <a href="#16/">Livre de Jérémie 16</a>
                <a href="#17/">Livre de Jérémie 17</a>

        </div>
        <div class="column">

                <a href="#18/">Livre de Jérémie 18</a>
                <a href="#19/">Livre de Jérémie 19</a>
                <a href="#20/">Livre de Jérémie 20</a>
                <a href="#21/">Livre de Jérémie 21</a>
                <a href="#22/">Livre de Jérémie 22</a>
                <a href="#23/">Livre de Jérémie 23</a>
                <a href="#24/">Livre de Jérémie 24</a>
                <a href="#25/">Livre de Jérémie 25</a>
                <a href="#26/">Livre de Jérémie 26</a>
                <a href="#27/">Livre de Jérémie 27</a>
                <a href="#28/">Livre de Jérémie 28</a>
                <a href="#29/">Livre de Jérémie 29</a>
                <a href="#30/">Livre de Jérémie 30</a>
                <a href="#31/">Livre de Jérémie 31</a>
                <a href="#32/">Livre de Jérémie 32</a>
                <a href="#33/">Livre de Jérémie 33</a>
                <a href="#34/">Livre de Jérémie 34</a>
                <a href="#35/">Livre de Jérémie 35</a>

        </div>
        <div class="column">

                <a href="#36/">Livre de Jérémie 36</a>
                <a href="#37/">Livre de Jérémie 37</a>
                <a href="#38/">Livre de Jérémie 38</a>
                <a href="#39/">Livre de Jérémie 39</a>
                <a href="#40/">Livre de Jérémie 40</a>
                <a href="#41/">Livre de Jérémie 41</a>
                <a href="#42/">Livre de Jérémie 42</a>
                <a href="#43/">Livre de Jérémie 43</a>
                <a href="#44/">Livre de Jérémie 44</a>
                <a href="#45/">Livre de Jérémie 45</a>
                <a href="#46/">Livre de Jérémie 46</a>
                <a href="#47/">Livre de Jérémie 47</a>
                <a href="#48/">Livre de Jérémie 48</a>
                <a href="#49/">Livre de Jérémie 49</a>
                <a href="#50/">Livre de Jérémie 50</a>
                <a href="#51/">Livre de Jérémie 51</a>
                <a href="#52/">Livre de Jérémie 52</a>
        </div>
      </div>
    </div>
  </div> 
  <div class="dropdown">
    <button class="dropbtn">Catégories 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
                        <h2><center>Listes des Catégories</h2></center>

      <div class="row">
        <div class="column">

                <a href="#">Livre de la Genèse</a>
                <a href="#">Livre de l'Éxode</a>
                <a href="#">Livre du Lévitique</a>
                <a href="#">Livre des Nombres</a>
                <a href="#">Livre du Deutéronome</a>
                <a href="#">Livre de Josué</a>
                <a href="#">Livre des Juges</a>
                <a href="#">Livre de Ruth</a>
                <a href="#">Premier Livre de Samuel</a>
                <a href="#">Deuxième Livre de Samuel</a>
                <a href="#">Premier Livre des Rois</a>
                <a href="#">Deuxième Livre des Rois</a>
                <a href="#">Premier Livre des Chroniques</a>
                <a href="#">Deuxième Livre des Chroniques</a>
                <a href="#">Livre d'Esdras</a>
                <a href="#">Livre de Néhémie</a>

        </div>
        <div class="column">

                <a href="#">Livre de Tobie</a>
                <a href="#">Livre de Judith</a>
                <a href="#">Livre d'Esther</a>
                <a href="#">Premier Livre des Martyrs d'Israël</a>
                <a href="#">Deuxième Livre des Martyrs d'Israël</a>
                <a href="#">Livre de Job</a>
                <a href="#">Livre des Proverbes</a>
                <a href="#">L'ecclésiaste</a>
                <a href="#">Cantique des cantiques</a>
                <a href="#">Livre de la Sagesse</a>
                <a href="#">Livre de Ben Sira le Sage</a>
                <a href="#">Livre d'Isaïe</a>
                <a href="#">Livre de Jérémie</a>
                <a href="#">Livre des lamentations de Jérémie</a>
                <a href="#">Livre de Baruch</a>

        </div>
        <div class="column">

                <a href="#">Lettre de Jérémie</a>
                <a href="#">Livre d'Ezekiel</a>
                <a href="#">Livre de Daniel</a>
                <a href="#">Livre d'Osée</a>
                <a href="#">Livre d'Osée</a>
                <a href="#">Livre d'Amos</a>
                <a href="#">Livre d'Abdias</a>
                <a href="#">Livre de Jonas</a>
                <a href="#">Livre de Michée</a>
                <a href="#">Livre de Nahum</a>
                <a href="#">Livre d'Habaquc</a>
                <a href="#">Livre de Sophonie</a>
                <a href="#">Livre d'Aggée</a>
                <a href="#">Livre de Zacharie</a>
                <a href="#">Livre de Malachie</a>

        </div>
      </div>
    </div>
  </div> 
</div>

<div id="scrollUp">
<a href="#top"><img src="http://wordpress/wp-content/uploads/2024/01/haut-e1707818845630.png"/></a>
</div>

</body>
</html>
"

Ce que je veux

Je cherche à mettre le bouton "Chapitre" à gauche et le bouton "Catégories" à droite ou au centre.
ensuite, comme dit le titre, dans le menu, chaque bouton au passage, ouvre le sous lien qui sont à plusieurs colonnes, et j'aimerais mettre une barre verticale pour séparer les colonnes, ou alors de mettre chaques liens dans une greybox, mais je ne saispas faire.

Ce que j'obtiens

Sur le principe du positionnement des boutons, j'ai réussi mais le block du bouton de droite reste à gauche donc soucis.

Pour la séparation des colonnes, j'ai trouvé pas mal d'infos, mais cela ne donne rien.

Merci pour votre aide

3 réponses

gena

Bonjour à toi j'ai cette solution à te proposer, ;)

.navbar {
overflow: hidden;
background-color: #ff7643;
font-family: Arial, Helvetica, sans-serif;
/ ---------------------------------------------------------------------------- /
/ Pour les mettre à l'opposé avec une espace que tu peut reduir eà l'aide des padding si tu souhaite les avoir à des distance différentes /
justify-content: space-between;
/ton display flex important /
display: flex;
padding-left: 10rem;
padding-right: 10rem;
/ --------------------------------------------------------------------------- /
/ pour centrer le text et mettr eun espcae egale a partir du centre /
gap: 20rem;
justify-content: center;
/ --------------------------------------------------------------------------- /
}

    Je te laisse donc choisir le plus judicieux en fonction de se que tu souhaite, n'hésite pas à les tester et jouer avec le gpa et le padding .
xmfrance
Auteur

Merci, je vais tester et faire les modifs

gena

si cdela à pu t'aider np ;)