[Résolu] Bootstrap positionnement par -Jules- - page 1

Bonjours les zeros,

J'ai actuellement un problème récurrent en codant avec bootstrap, le positionnement.

Voici les 2 questions que je me pose:

-1* Pourquoi mon button de connexion n'est-il pas situé dans mon header.

-2* Comment centrer ma pagination et modifier son apparence

Voici mon code:

HTML

<!DOCTYPE html>

<html>

	  <!-- Entête de la page -->
    <head>
		  <title>Project</title>
		  <meta charset="utf-8" />
      <!-- css -->
      <link rel="stylesheet" href="Biodiversité/css/bootstrap.min.css" />
      <link rel="stylesheet" href="Biodiversité/css/Style.css" />
      <!-- js -->
		  <script src="https://use.fontawesome.com/c96a742a90.js"></script>
      <!-- mobile -->
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <!-- Fin entête -->

    <body>

      <!-- Menu -->
      <header class="container-fluid header">
        <div class="container">
          <a href="#" class="logo">Project</a>
            <nav class="menu">
              <a href="#">Acceuil</a>
              <a href="Biodiversité.html">Biodiversité</a>
              <a href="#">Ressources</a>
            </nav>
          <button class="btn ghost-btn">Connexion</button>
        </div>
      </header>
      <!-- Fin du menu -->

      <!-- Corps de la page -->
        <div class="container-fluid biodiversité">
          <div class="container">
            <!-- *Moteur de recherche a incrémentation -->
            <form class="form-inline">
              <button class="btn btn-search" type="submit">
                <i class="fa fa-search fa-flip-horizontal"></i>
              </button>
              <input class="form-control" type="text" placeholder="Search...">
              <button class="btn btn-cross " type="reset">
                	<i class="fa fa-times" aria-hidden="true"></i>
              </button>
            </form>
            <!-- *Les fiches -->
            <div class="Fiches">
                <article class="F col-xs-4 col-sm-4 col-md-2 col-lg-2">
                  <img src="css/img">
                </article>
                <article class="F col-xs-4 col-sm-4 col-md-2 col-lg-2">
                  <img src="css/img">
                </article>
                <article class="F col-xs-4 col-sm-4 col-md-2 col-lg-2">
                  <img src="css/img">
                </article>
                <article class="F col-xs-4 col-sm-4 col-md-2 col-lg-2">
                  <img src="css/img">
                </article>
                <article class="F col-xs-4 col-sm-4 col-md-2 col-lg-2">
                  <img src="css/img">
                </article>
                <article class="F col-xs-4 col-sm-4 col-md-2 col-lg-2">
                  <img src="css/img">
                </article>
              <!-- 2ème ligne -->
                <article class="F col-xs-4 col-sm-4 col-md-2 col-lg-2">
                  <img src="css/img">
                </article>
                <article class="F col-xs-4 col-sm-4 col-md-2 col-lg-2">
                  <img src="css/img">
                </article>
                <article class="F col-xs-4 col-sm-4 col-md-2 col-lg-2">
                  <img src="css/img">
                </article>
                <article class="F col-xs-4 col-sm-4 col-md-2 col-lg-2">
                  <img src="css/img">
                </article>
                <article class="F col-xs-4 col-sm-4 col-md-2 col-lg-2">
                  <img src="css/img">
                </article>
                <article class="F col-xs-4 col-sm-4 col-md-2 col-lg-2">
                  <img src="css/img">
                </article>
              <!-- *Fin fiches -->
                <!-- Pagination -->
                <nav aria-label="Pagination">
                  <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                      <a class="page-link" href="#" tabindex="-1">Previous</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                      <a class="page-link" href="#">Next</a>
                    </li>
                  </ul>
                </nav>
            </div>
          </div>
        </div>
      <!-- Fin du corps de la page -->

      <!-- Pied de page -->
      <footer class="container-fluid footer">
          <div class="container">
            <div class="row">
              <article class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <h2>Partenaires</h2>
                  <p>............</p>
              </article>
              <article class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <h2>Menu</h2>
                  <nav class="menu-f">
                    <a href="#">Acceuil</a>
                    <a href="#">Biodiversité</a>
                    <a href="#">Ressources</a>
                  </nav>
              </article>
              <article class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <h2>Réseaux sociaux:</h2>
                  <i class="fa fa-twitter fa-3x fa-inverse"></i>
              </article>
            </div>
          </div>
          		<div id="copyright">&copy;  2017 All Rights Reserved</div>
      </footer>
      <!-- Fin du pied de page -->
    </body>
</html>
<!-- Fin du script -->

CSS

@charset "UTF-8";

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

a {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
.container-fluid {
	padding: 0;
}

/* Header */
.header {
	background-color: rgba(64,64,64);
	height: 70px;
	line-height: 70px;
}
.logo {
	color: white;
	font-size: 25px;
	float: left;
}
.menu {
	text-align: center;
}
.menu a {
	color: white;
	margin-right: 20px;
}
.menu a:hover {
	color: grey;
}
.ghost-btn {
	float: right;
}
/* Header fin */

/* Background */
.background {
	background-color: red;
	width: 100%;
	max-width: 100%;
}
.backg {
	width: 100%;
	max-width: 100%;
}
.backg img {
	width: 100%;
	max-width: 100%;
}
/* Background fin */

/* Footer */
.footer {
	background-color: rgba(64,64,64);
	text-align: center;
}
.footer h2{
	color: white;
}
.menu-f {
	padding-top: 15px;
}
.menu-f a {
	color: white;
	display: block;
	font-size: 15px;
	padding: 2px;
}
.menu-f a:hover {
	color: grey;
}
.fa {
	padding-top: 20px;
}
#copyright {
	color: white;
	text-align: center;
	background-color: rgba(32,32,32);

}
/* copyright */
/* Footer fin */

/* Page: Biodiversité (style non pris en charge pars la première partie) */
.biodiversité {
	background-color: grey;
	width: 100%;
	min-width: 100%;
}
.form-inline {
	background: grey;
	border-bottom: 1px solid white;
	text-align: center;
}
.form-control {
	border: none;
	box-shadow: none;
	color: black;
}
.form-control:focus{
	box-shadow: none;
	border: none;
}
.btn-search {
	background: transparent;
}
.btn-cross {
	background: transparent;
}
.F {
	background-color: black;
	width: 150px;
	height: 150px;
	margin: 20px;
}
.Pagination:hover {
	text-align: center;
}

Cordialement Necro;

Bon j'ai fini par résoudre mon problème de pagination voici la version corrigées pour ce que sa intéresras.

HTML

  <!-- *Pagination -->
                <div class="container">
                  <div class="example">
                    <nav>
                      <ul class="pagination">
                        <li class="disabled">
                          <a href="#" aria-label="Previous">
                            <span aria-hidden="true">«</span>
                          </a>
                        </li>
                        <li><a href="le-nom-de-votre-page">1</a>
                        </li>
                        <li class="active"><a href="#">2</a>
                        </li>
                        <li><a href="#">3</a>
                        </li>
                        <li><a href="#">4</a>
                        </li>
                        <li><a href="#">5</a>
                        </li>
                        <li>
                          <a href="#" aria-label="Next">
                            <span aria-hidden="true">»</span>
                          </a>
                        </li>
                      </ul>
                    </nav>
                  </div>
                </div>
                <!-- Fin *pagination -->

CSS

.example {
	text-align: center;
}
.example .pagination li a {
	border: none;
	background-color: rgba(64,64,64)
}
.pagination li.active a {
	background-color: rgba(48,48,48);
}
.pagination li.active a:focus {
	background-color: rgba(48,48,48);
}
.example .pagination li:hover a:hover {
	color: rgba(128,128,128);
	background-color: white;
}
.example .pagination a {
	color: white;
}
.example .pagination a:focus {
	color: white;
}

A savoir que le css est un exemple, c'est celui que j'ai utilisé pour mon site. Libre a vous de le modifier a votre guise.

Fonctionnement de la pagination:

(active) permet d'indiquer la page sur la quelle vous vous trouvez ici la page 2 et les li son les liens de vos autres pages. Je pense que vous avez compris comment le modifier du coup.

Cordialement;

-Jules-

19 juillet 2017 à 12:59:53

Cbourree

19 juillet 2017 à 13:47:14

Ok alors pourquoi ne pas utiliser les menus bootstrap afin qu'il soit directement responsive ?

https://getbootstrap.com/components/#navbar

Après c'est difficile de t'aider car quand on copie colle ton code, il manque les images et même boostrap.

Tu pourrais par exemple fournir un JsFiddle ou une archive pour nous faciliter ton aide ?

Sinon pour information la balise nav est de type display block. Le bouton connexion qui est donc juste après ce retrouve à la ligne. C'est peut être pour ça que tu as l'impression qu'il est hors du header...

-
Edité par Cbourree 19 juillet 2017 à 13:50:30

19 juillet 2017 à 17:17:04

Bonjour,

voici le jsfiddle: https://jsfiddle.net/Lhvgngyc/

très bonne idée je ni avait pas pensée

Du coup comment pourrais-je le mettre sur la meme ligne?

20 juillet 2017 à 17:37:07

Bootstrap positionnement

Bootstrap positionnement

Supprimer

Modérer

Signaler le message aux modérateurs