Partage

créer une ligne verticale de séparation

19 février 2024 à 20:26:44

Bonjour,

En fait, j'ai plusieurs questions.

J'ai un menu à deux boutons qui contiennent des listes de liens sur plusieurs colonnes.

1 - J'aimerais mettre une barre verticale entre les colonnes pour les séparées, ou alors mettre chaque texte dans des box.

2 - j'aimerais avoir un bouton à droite de la barre de menu et l'autre à gauche.

Je vous mets le codeen 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="http://wordpress/Livre-de-jeremie-1/">Livre de Jérémie 1</a>
                <a href="http://wordpress/Livre-de-jeremie-2/">Livre de Jérémie 2</a>
                <a href="http://wordpress/Livre-de-jeremie-3/">Livre de Jérémie 3</a>
                <a href="http://wordpress/Livre-de-jeremie-4/">Livre de Jérémie 4</a>
                <a href="http://wordpress/Livre-de-jeremie-5/">Livre de Jérémie 5</a>
                <a href="http://wordpress/Livre-de-jeremie-6/">Livre de Jérémie 6</a>
                <a href="http://wordpress/Livre-de-jeremie-7/">Livre de Jérémie 7</a>
                <a href="http://wordpress/Livre-de-jeremie-8/">Livre de Jérémie 8</a>
                <a href="http://wordpress/Livre-de-jeremie-9/">Livre de Jérémie 9</a>
                <a href="http://wordpress/Livre-de-jeremie-10/">Livre de Jérémie 10</a>
                <a href="http://wordpress/Livre-de-jeremie-11/">Livre de Jérémie 11</a>
                <a href="http://wordpress/Livre-de-jeremie-12/">Livre de Jérémie 12</a>
                <a href="http://wordpress/Livre-de-jeremie-13/">Livre de Jérémie 13</a>
                <a href="http://wordpress/Livre-de-jeremie-14/">Livre de Jérémie 14</a>
                <a href="http://wordpress/Livre-de-jeremie-15/">Livre de Jérémie 15</a>
                <a href="http://wordpress/Livre-de-jeremie-16/">Livre de Jérémie 16</a>
                <a href="http://wordpress/Livre-de-jeremie-17/">Livre de Jérémie 17</a>


        </div>
        <div class="column">
          
                <a href="http://wordpress/Livre-de-jeremie-18/">Livre de Jérémie 18</a>
                <a href="http://wordpress/Livre-de-jeremie-19/">Livre de Jérémie 19</a>
                <a href="http://wordpress/Livre-de-jeremie-20/">Livre de Jérémie 20</a>
                <a href="http://wordpress/Livre-de-jeremie-21/">Livre de Jérémie 21</a>
                <a href="http://wordpress/Livre-de-jeremie-22/">Livre de Jérémie 22</a>
                <a href="http://wordpress/Livre-de-jeremie-23/">Livre de Jérémie 23</a>
                <a href="http://wordpress/Livre-de-jeremie-24/">Livre de Jérémie 24</a>
                <a href="http://wordpress/Livre-de-jeremie-25/">Livre de Jérémie 25</a>
                <a href="http://wordpress/Livre-de-jeremie-26/">Livre de Jérémie 26</a>
                <a href="http://wordpress/Livre-de-jeremie-27/">Livre de Jérémie 27</a>
                <a href="http://wordpress/Livre-de-jeremie-28/">Livre de Jérémie 28</a>
                <a href="http://wordpress/Livre-de-jeremie-29/">Livre de Jérémie 29</a>
                <a href="http://wordpress/Livre-de-jeremie-30/">Livre de Jérémie 30</a>
                <a href="http://wordpress/Livre-de-jeremie-31/">Livre de Jérémie 31</a>
                <a href="http://wordpress/Livre-de-jeremie-32/">Livre de Jérémie 32</a>
                <a href="http://wordpress/Livre-de-jeremie-33/">Livre de Jérémie 33</a>
                <a href="http://wordpress/Livre-de-jeremie-34/">Livre de Jérémie 34</a>
                <a href="http://wordpress/Livre-de-jeremie-35/">Livre de Jérémie 35</a>
                


        </div>
        <div class="column">
          
                <a href="http://wordpress/Livre-de-jeremie-36/">Livre de Jérémie 36</a>
                <a href="http://wordpress/Livre-de-jeremie-37/">Livre de Jérémie 37</a>
                <a href="http://wordpress/Livre-de-jeremie-38/">Livre de Jérémie 38</a>
                <a href="http://wordpress/Livre-de-jeremie-39/">Livre de Jérémie 39</a>
                <a href="http://wordpress/Livre-de-jeremie-40/">Livre de Jérémie 40</a>
                <a href="http://wordpress/Livre-de-jeremie-41/">Livre de Jérémie 41</a>
                <a href="http://wordpress/Livre-de-jeremie-42/">Livre de Jérémie 42</a>
                <a href="http://wordpress/Livre-de-jeremie-43/">Livre de Jérémie 43</a>
                <a href="http://wordpress/Livre-de-jeremie-44/">Livre de Jérémie 44</a>
                <a href="http://wordpress/Livre-de-jeremie-45/">Livre de Jérémie 45</a>
                <a href="http://wordpress/Livre-de-jeremie-46/">Livre de Jérémie 46</a>
                <a href="http://wordpress/Livre-de-jeremie-47/">Livre de Jérémie 47</a>
                <a href="http://wordpress/Livre-de-jeremie-48/">Livre de Jérémie 48</a>
                <a href="http://wordpress/Livre-de-jeremie-49/">Livre de Jérémie 49</a>
                <a href="http://wordpress/Livre-de-jeremie-50/">Livre de Jérémie 50</a>
                <a href="http://wordpress/Livre-de-jeremie-51/">Livre de Jérémie 51</a>
                <a href="http://wordpress/Livre-de-jeremie-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>

Je vous remercie pour votre aide précieuse

Domi65

20 février 2024 à 12:21:06

Bonjour.

D'après ce que je vois, tu as trois div "en float:left" qui font office de colonnes.

Une bordure côté gauche sur les deux premiers remplirait le rôle de ta demande.

Le problème de ta solution est que si les "colonnes" n'ont pas la même hauteur, les bordures ne seront pas forcément de la hauteur de la colonne la plus grande. Cela peut être résolu en utilisant les propriétés CSS frex voire columns (que je connais mal).

ThierryMadar

20 février 2024 à 18:27:18

Merci pour ta réponse,

En fait, à force de bidouiller, j'ai trouvé certaines infos.

Je vous met le code

"<!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>
#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: left;
  padding: 14px 12px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: ;
}

.dropdown .dropbtn {
  font-size: 12px;  
  border: 2px;
  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: 500px;
  left: ;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100;
}

.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: 150px;
  padding: ;
  background-color: #ccc;
  height: ;
}

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

.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: 33%;
    height: 50%;
  }
}

/* 2eme bouton*/

.dropdown2 {
  float: center;
  overflow: ;
}

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

.navbar a:hover, .dropdown2:hover .dropbtn2 {
  background-color: ;
}

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

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

.dropdown2:hover .dropdown-content2 {
  display: block;
}

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

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

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

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

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

/* Clear floats after the columns */
.row2: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: 700px) {
  .column2 {
    width: 50%;
    height: ;
  }
}


</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="dropdown2">
    <button class="dropbtn2">Catégories 
      <i class="fa fa-caret-down2"></i>
    </button>
    <div class="dropdown-content2">
                        <h2><center>Listes des Catégories</h2></center>

      <div class="row2">
        <div class="column2">

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



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


        </div>
        <div class="column2">
          
          
                <a href="#">Livre d'Ezekiel</a><HR ALIGN=CENTER WIDTH="120"> 
                <a href="#">Livre de Daniel</a><HR ALIGN=CENTER WIDTH="120"> 
                <a href="#">Livre d'Osée</a><HR ALIGN=CENTER WIDTH="120"> 
                <a href="#">Livre d'Osée</a><HR ALIGN=CENTER WIDTH="120"> 
                <a href="#">Livre d'Amos</a><HR ALIGN=CENTER WIDTH="120"> 
                <a href="#">Livre d'Abdias</a><HR ALIGN=CENTER WIDTH="120"> 
                <a href="#">Livre de Jonas</a><HR ALIGN=CENTER WIDTH="120"> 
                <a href="#">Livre de Michée</a><HR ALIGN=CENTER WIDTH="120"> 
                <a href="#">Livre de Nahum</a><HR ALIGN=CENTER WIDTH="120"> 
                <a href="#">Livre d'Habaquc</a><HR ALIGN=CENTER WIDTH="120"> 
                <a href="#">Livre de Sophonie</a><HR ALIGN=CENTER WIDTH="120"> 
                <a href="#">Livre d'Aggée</a><HR ALIGN=CENTER WIDTH="120"> 
                <a href="#">Livre de Zacharie</a><HR ALIGN=CENTER WIDTH="120"> 
                <a href="#">Livre de Malachie</a><HR ALIGN=CENTER WIDTH="120"> 

        </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>
"

Bon, maintenant, il serait sympa de mettre des greybox dans le sous menu catégories, comme a;

Merci à tous

-
Edité par ThierryMadar 20 février 2024 à 18:28:46