CONNEXION
  • RetourJeux
    • Tests
    • Soluces
    • Previews
    • Sorties
    • Hit Parade
    • Les + attendus
    • Tous les Jeux
  • RetourActu
    • Culture Geek
    • Astuces
    • Réalité Virtuelle
    • Rétrogaming
    • Toutes les actus
  • RetourHigh-Tech
    • Actus JVTECH
    • Bons plans
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTECH
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch
    • Xbox Series
    • Overwatch 2
    • FUT 23
    • League of Legends
    • Genshin Impact
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • PS4
  • One
  • Switch
  • Wii U
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Etoile Abonnement RSS

Sujet : Mettre le bouton en bas de ma barre latérale

DébutPage précedente
1
Page suivantePage suivante
Lolopy Lolopy
MP
Niveau 53
15 janvier 2019 à 22:28:04

Bonjour, je veux mettre le bouton en bas de ma barre latérale. C'est une barre latérale fixe.

<div class="wrapper">
 
      <nav id="sidebar" class="scrollbar-deep-purple bordered-deep-purple thin">
 
        <div class="sidebar-header text-center">
          <a class="navbar-brand animated fadeInDown m-0" href="/">
            <img src="/public/assets/image/paladins-challenge.png" width="156" height="66" alt="Paladins Challenge Logo">
          </a>
        </div>
 
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link" href="/roadmap.php">Roadmap</a>
          </li>
 
          <li class="nav-item">
            <a class="nav-link" href="/team-directory.php">Team Directory</a>
          </li>
 
          <li class="nav-item">
            <a class="nav-link" href="/user-directory.php">User Directory</a>
          </li>
 
          <li class="nav-item">
            <a class="nav-link" href="/forums">Forums</a>
          </li>
 
          <li class="nav-item">
            <a class="nav-link" href="/tournaments.php">Tournaments</a>
          </li>
 
          <li class="nav-item">
            <a class="nav-link" href="https://battlefy.com/paladins-challenge" target="_blank" rel="noopener noreferrer nofollow">Battlefy tournaments</a>
          </li>
 
          <li class="nav-item">
            <a class="nav-link" href="/giveaways.php">Giveaways</a>
          </li>
        </ul>
 
        <ul class="list-unstyled m-0" style="padding: 20px 15px;">
          <button type="button" class="btn btn-info btn-rounded btn-block sidebarCollapse m-0">
              <i class="fas fa-align-left"></i>
              <span>Close Sidebar</span>
          </button>
        </ul>
 
      </nav>
 
      <div id="content">
 
        <section>
          <div class="container">
 
            <div class="row my-3">
              <div class="col-md-12">
                <h1 class="text-center top-header">Paladins Challenge Terms of Service</h1>
              </div>
            </div>
 
            <div class="row">
              <div class="col-md-12">
                <h3>1. Terms</h3>
                <p class="mb-3">By accessing the website at <a href="https://www.paladinschallenge.com">https://www.paladinschallenge.com</a>, you are agreeing to be bound by these terms of service, all applicable laws and regulations, and agree that you are responsible for compliance with any applicable local laws. If you do not agree with any of these terms, you are prohibited from using or accessing this site. The materials contained in this website are protected by applicable copyright and trademark law.</p>
                <h3>2. Use License</h3>
                <ol type="a">
                   <li>Permission is granted to temporarily download one copy of the materials (information or software) on Paladins Challenge's website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title, and under this license you may not:
                   <ol type="i">
                       <li>modify or copy the materials;</li>
                       <li>use the materials for any commercial purpose, or for any public display (commercial or non-commercial);</li>
                       <li>attempt to decompile or reverse engineer any software contained on Paladins Challenge's website;</li>
                       <li>remove any copyright or other proprietary notations from the materials; or</li>
                       <li>transfer the materials to another person or "mirror" the materials on any other server.</li>
                   </ol>
                    </li>
                   <li>This license shall automatically terminate if you violate any of these restrictions and may be terminated by Paladins Challenge at any time. Upon terminating your viewing of these materials or upon the termination of this license, you must destroy any downloaded materials in your possession whether in electronic or printed format.</li>
                </ol>
                <h3>3. Disclaimer</h3>
                <ol type="a">
                   <li>The materials on Paladins Challenge's website are provided on an 'as is' basis. Paladins Challenge makes no warranties, expressed or implied, and hereby disclaims and negates all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.</li>
                   <li>Further, Paladins Challenge does not warrant or make any representations concerning the accuracy, likely results, or reliability of the use of the materials on its website or otherwise relating to such materials or on any sites linked to this site.</li>
                </ol>
                <h3>4. Limitations</h3>
                <p class="mb-3">In no event shall Paladins Challenge or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on Paladins Challenge's website, even if Paladins Challenge or a Paladins Challenge authorized representative has been notified orally or in writing of the possibility of such damage. Because some jurisdictions do not allow limitations on implied warranties, or limitations of liability for consequential or incidental damages, these limitations may not apply to you.</p>
                <h3>5. Accuracy of materials</h3>
                <p class="mb-3">The materials appearing on Paladins Challenge's website could include technical, typographical, or photographic errors. Paladins Challenge does not warrant that any of the materials on its website are accurate, complete or current. Paladins Challenge may make changes to the materials contained on its website at any time without notice. However Paladins Challenge does not make any commitment to update the materials.</p>
                <h3>6. Links</h3>
                <p class="mb-3">Paladins Challenge has not reviewed all of the sites linked to its website and is not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement by Paladins Challenge of the site. Use of any such linked website is at the user's own risk.</p>
                <h3>7. Modifications</h3>
                <p class="mb-3">Paladins Challenge may revise these terms of service for its website at any time without notice. By using this website you are agreeing to be bound by the then current version of these terms of service.</p>
                <h3>8. Governing Law</h3>
                <p>These terms and conditions are governed by and construed in accordance with the laws of France and you irrevocably submit to the exclusive jurisdiction of the courts in that State or location.</p>
              </div>
            </div>
 
          </div>
        </section>
 
      </div>
a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}
 
/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
 
.wrapper {
  display: flex;
  width: 100%;
}
 
#sidebar {
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 999;
  background: #7386D5;
  color: #fff;
  transition: all 0.3s;
  overflow: auto;
}
 
.scrollbar-deep-purple::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #F5F5F5;
  border-radius: 10px;
}
 
.scrollbar-deep-purple::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}
 
.scrollbar-deep-purple::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #512da8;
}
 
.bordered-deep-purple::-webkit-scrollbar-track {
  -webkit-box-shadow: none;
  border: 1px solid #512da8;
}
 
.bordered-deep-purple::-webkit-scrollbar-thumb {
  -webkit-box-shadow: none;
}
 
.thin::-webkit-scrollbar {
  width: 6px;
}
 
#sidebar.active {
  margin-left: -250px;
}
 
#sidebar .sidebar-header {
  padding: 20px;
  background: #6d7fcc;
}
 
#sidebar ul.components {
  padding: 20px 0;
  border-bottom: 1px solid #47748b;
}
 
#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
}
 
#sidebar ul li a:hover {
  color: #7386D5;
  background: #fff;
}
 
a[data-toggle="collapse"] {
  position: relative;
}
 
.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
 
/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
 
#content {
  width: calc(100% - 250px);
  padding: 40px;
  min-height: 100vh;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 0;
}
 
#content.active {
  width: 100%;
}
 
/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
 
@media (max-width: 768px) {
  #sidebar {
    margin-left: -250px;
  }
  #sidebar.active {
    margin-left: 0;
  }
  #content {
    width: 100%;
  }
  #content.active {
    width: calc(100% - 250px);
  }
  #sidebarCollapse span {
    display: none;
  }
}
Lolopy Lolopy
MP
Niveau 53
15 janvier 2019 à 22:28:52

J'ai essayé position fixed mais du coup après ca se superpose avec le reste de mon menu quand ya plus la place

DébutPage précedente
1
Page suivantePage suivante
Répondre
Prévisu
?
Victime de harcèlement en ligne : comment réagir ?
Infos 0 connecté(s)

Gestion du forum

Modérateurs : Thymotep
Contacter les modérateurs - Règles du forum

Sujets à ne pas manquer

La vidéo du moment