Se connecter

Informatique

Création de sites web

Sujet : Mettre le bouton en bas de ma barre latérale
1
Lolopy
Niveau 51
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
Niveau 51
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

1
Sujet : Mettre le bouton en bas de ma barre latérale
   Retour haut de page
Consulter la version web de cette page