Partage

Modifier position élements dans cover bootstrap

14 juin 2018 à 15:42:30

Bonjour,

Je tente de créer un site portfolio de musique avec Bootstrap, mais je ne parviens pas à placer correctement les élements au sein de la cover, notamment le H1, et le button.

Avant toute chose, je précise que je ne dispose que de quelques notions de bases en html et css. Je comprends le principe de grille 12x12 de Bootstrap, mais comment dire à tel élement "va entre col 9 et 12, ou "prend 70% de la grille sur le row 3 en partant de la droite"?

En l'occurence, je me retrouve ici avec un h1 incapable d'aller s'aligner à droite sous le "t" du "contact" de la navbar malgré un padding forcé, mon <p class="lead"> a trop d'espace sous le h1, je ne peux pas changer la taille de la police du button, et celui-ci refuse d'ailleurs de bouger.

Avez-vous quelques idées sur ce que j'ai fait de mal? Voici mon "code" html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="style.css" type="text/css" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <title>Artist name</title>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link href="style.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet">
</head>
<body>

<!--Navigation-->

<section class="cover">
  <nav class="navbar navbar-expand-md navbar-dark sticky-top">
<div class="container-fluid">
  <a class="navbar-brand" href="#"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
    <span class="navbar-toggler-icon"></span>
  </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#about">ABOUT</a></li>
          <li class="nav-item active">
            <a class="nav-link" href="#services">SERVICES</a></li>
          <li class="nav-item active">
            <a class="nav-link" href="#work">WORK</a></li>
          <li class="nav-item active">
            <a class="nav-link" href="#contact">CONTACT</a></li>
          </ul>
      </div>
</div>
</nav>

<!--Cover-->

<div class="cover-container pb-5">
				<div class="cover-inner container">
          <h1>NAME ARTISTENAME</h1>
          <p class="lead">Description de la personne en deux lignes</p>
            <a href="#work" class="btn btn-primary btn-lg mb-2 mr-2 ml-2">Listen</a>
				</div>
			</div>
		</section>

<!--About-->

<!--Services-->

<!--Work-->

<!--Contact-->



</body>
</html>

Et le CSS:

/* General css */

body {
  font-family: "Impact", sans-serif;
  font-size: 16px;
  background-color: #ffffff;
  color: white;
}

h1 {
  font-family: "Impact", sans-serif;
  font-size: 4rem;
  font-weight: 600;
}

h2 {
  font-family: "Impact", sans-serif;
  font-size: 2.8rem;
  font-weight: 500;
}

p {
  color: #696b6e;
  font-size: .9rem;
}


/* Navbar css */

.navbar-dark {
  background: transparent;
}

.nav-link a:hover {
    box-shadow: 0 0 11px rgba(33,33,33,.2);
  }

/* Main Image css */

.cover .cover-container {
  display: table;
  height: 100%;
  min-height: 44rem;
  margin: 0 auto; }

.cover {
  background: url("https://ccpopculture.files.wordpress.com/2014/09/sin-city-2-joseph-gordon-levitt-e1410053120361.jpg") center;
  background-size: cover;
  min-height: 50rem;
  height: auto;
  border-radius: 0;
  width: 100%;
  color: #fff;
  padding-top: 1rem;
}

.cover h1 {
  font-weight: 200;
  font-size: 95px;
  padding-top: 100px;
  padding-left: 400px;
  float: right;
}

.cover p.lead {
  margin: 2rem auto;
  text-align: left;
  color: #fff;
  padding-left: 550px; }

.btn-primary {
 font-size: 150px;
 text-transform: uppercase;
 font-weight: 700;
 border-radius: .3rem;
 background-color: #59a0d7;
 border-color: black;
 border-width: medium;
 padding-left: 400px;}

.btn-primary a {
 font-size: 60px;
}

.btn-lg {
 padding: 1.1rem 2.5rem;
 font-size: .9rem; }

.btn-primary:hover {
}

Merci pour votre aide, j'ai honte du résultat^^!

-
Edité par DoneDeal 14 juin 2018 à 15:44:47

EmmanuelBeziat

14 juin 2018 à 16:11:58

Salut,

Alors d'abord :

<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Ces éléments ne doivent pas être en double.

<link href="style.css" type="text/css" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

Charge ton CSS après celui de bootstrap, pas avant.

Ensuite, concernant ton problème : déjà, évite les float et les padding démesurés. Si tu veux aligner du texte à droite, c'est text-align qu'il te faut.

Sauf que le problème vient surtout de ta structure : tu as mis cet élément dans un .container. Et .container fait ce qu'on lui dit : il fait maximum 1140px de large, et s'aligne au milieu. Donc tu peux aligner tes éléments à droite autant que tu veux, ils seront restreints à ce conteneur. Et ce .container, tu l'as lui-même mis dans un .cover-container que tu as défini comme un tableau, qui par défaut ne prend jamais toute la largeur mais juste la largeur nécessaire à son contenu.

Du coup oui, ton texte ne peut pas être tout à droite du viewport.

Question : avais-tu réellement besoin de bootstrap pour ce projet ?

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

DoneDeal

14 juin 2018 à 19:27:45

Bonjour,

Merci d'avoir pointé les doublons dans le <head>. Je n'ai pas particulièrement besoin de Bootstrap, mais quand je me contente d'un html/css simple, j'ai toujours un rendu catastrophique, avec une cover qui fait à peine 5 centimètres de haut, des logos qui s'affichent je ne sais où, et ne parlons pas de la gestion du responsive. Or, en regardant quelques tutoriaux youtube sur Bootstrap, je suis vite parvenu à pondre une navbar sympa et surtout responsive, avec les trois petites barres qui apparaissent sur le mobile. Cela m'a incité à continuer avec ce framework, surtout que la doc officielle fournit des codes pré-remplis.

Hélas, la fonction jumbotron n'affiche pas une image en plein écran, et quand je tente de modifier quoi que ce soit, mon h1 et le button apparaissent systématiquement sous ladite cover. Un peu désespéré, je suis donc allé chercher un code opensource sur un site du type codepen pour l'injecter éhontémment dans mon projet.

Je cherche à obtenir le template suivant (les rectangles bleus étant évidemment remplacés par des images):

Ca ne me parait pas ultra sorcier, et pourtant, c'est une galère sans nom, surtout pour la presentation des services. Il faut trois colonnes en bordure séparées harmonieusement, avec un titre, une image, et surtout un logo de contact un peu remonté par rapport à la petite barre noire de fin histoire de faire sympa. Le template termine avec un formulaire de contact (mais pour ça, il y a des codes open sources partout), et un footer light noir à la fin qui propose l'option "back to top". Je pensais très franchement trouver des templates déjà faits ou au moins me débrouiller moi-même pour un truc aussi basique, mais j'ai visiblement présumé de mes compétences^^.

Tant qu'on y est, j'essaie de modifier le code de W3School pour les trois colonnes de la partie service (https://www.w3schools.com/bootstrap/trybs_theme_company_full.htm voir partie "pricing") , mais c'est encore n'importe quoi, l'image prend tout l'écran, le rectangle noir n'apparait pas, le paragraphe de texte sort de la colonne... Bon. Si vous avez un code de base à partager, je suis preneur.

-
Edité par DoneDeal 14 juin 2018 à 20:44:21

EmmanuelBeziat

14 juin 2018 à 22:22:28

Exemple : https://codepen.io/EmmanuelBeziat/pen/oyeQBr

-
Edité par EmmanuelBeziat 14 juin 2018 à 22:22:42

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

DoneDeal

15 juin 2018 à 11:16:29

Merci beaucoup pour votre aide et votre temps Emmanuel! Hélas, je ne parviens pas à correctement utiliser votre template dans mon projet. J'ai ainsi simplement gardé la fameuse navbar transparente responsive de Bootstrap pour ensuite appliquer tout votre code, mais toute modification de ma part le fait partir en vrille (en particulier les colonnes de la partie "services").

J'ai donc essayé de refaire par moi même un code épuré au possible pour au moins obtenir un rendu navbar + grosse cover décent, mais ça ne rend que deux titres et un bouton perdus sur une page blanche... Mon code a beau me sembler parfaitement cohérent et logique, ça ne rend à chaque fois que de la m*rde absolue. C'est très frustrant^^.

Le dernier test en date:

<!--Navbar-->
<section class="cover">
    <nav class="navbar navbar-expand-md navbar-dark sticky-top">
          <div class="container-fluid">
              <a class="navbar-brand" href="#"></a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
              <span class="navbar-toggler-icon"></span>
              </button>
                    <div class="collapse navbar-collapse" id="navbarResponsive">
                        <ul class="navbar-nav ml-auto">
                              <li class="nav-item active">
                              <a class="nav-link" href="#about">ABOUT</a></li>
                              <li class="nav-item active">
                              <a class="nav-link" href="#services">SERVICES</a></li>
                              <li class="nav-item active">
                              <a class="nav-link" href="#work">WORK</a></li>
                              <li class="nav-item active">
                              <a class="nav-link" href="#contact">CONTACT</a></li>
                        </ul>
                    </div>
          </div>
    </nav>
<!--Titres-->
    <div class="cover titles">
          <h1>ARTIST NAME</h1h>
              <h2>DESCRIPTION ARTISTE</h2>
                <button type="button" class="btn btn-outline-primary">Primary</button>
    </div>
</section>
<!-- ABOUT -->

h1 {
  font-family: Arial-Black;
  font-size: 95px;
  text-align: center;
}

h2 {
  font-family: Arial-Black;
  font-size: 55px;
  text-align: center;
}


.navbar {
  background: transparent;
}

.nav-link:hover {
    opacity: 0.3!important;
  }

.cover {
  background: url("https://ccpopculture.files.wordpress.com/2014/09/sin-city-2-joseph-gordon-levitt-e1410053120361.jpg") center no-repeat fixed;
  width: 100%;
  height: 100%;
}

.cover h1 {
  color: white;
}

.cover h2 {
  color: white;
}

.cover btn {
  background-color: black;
  border: white;
}

.cover btn:hover {
  opacity:0.5!important;
}

Qu'est-ce qui ne colle pas là-dedans? Ça semble pourtant fonctionnel?

-
Edité par DoneDeal 15 juin 2018 à 11:23:40

EmmanuelBeziat

15 juin 2018 à 13:45:31

Parce que width: 100% ne sert à rien, parce que height 100% ne peut pas fonctionner, et parce que tu appliques la classe cover à la fois sur le conteneur, et le titre.

Regarde bien ce que j'ai fait dans l'exemple, analyse le code. Essaies d'enlever et remettre une par une des propriétés du code d'exemple pour voir ce que ça change. Si tu te demandes à quoi sert telle ou telle propriété ou comment elle fonctionne, fais une recherche à ce sujet. C'est comme ça que tu pourras progresser.

En analysant le code, tu devrais d'abord te demander ce que sont les unités "vh", et comment utiliser flexbox.

Au passage, là :

.cover btn { }

Tu cherches un élément html "btn" qui se trouverait dans .cover ; or, c'est une classe que tu es sensé chercher. Donc :

.cover .btn { }

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !