Partage

Problème de padding/margin

19 mars 2018 à 2:10:18

Hello!

Je me suis lancé dans le developpement il y'a peu, et je réalise ducoup mon premier site. Après moult essais je ne parviens pas à régler correctement l'espace entre mes images. En effet même si visuellement c'est (à peu près) niquel, j'ai bidouillé, et je n'ai rien trouvé de mieux que de rajouter un padding top et left sur mes images.Ce qui fait que lorsque je rétrécis ma page le padding apparait à gauche.

Apercu Padding

Voici mon code:

@charset "utf-8";

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

body{

font-family: 'gotham';
font-size: 10px;
color: white;
background-color: #192633;
}

a, a:hover { 
	text-decoration: none;
	color: white;
 }
.container-fluid {
	padding: 0%;
	overflow: hidden;
  align-items: center;


	 
}


.header {
	background-color: #0b0d14;
	padding: 5px 0px 5px 0px;
  position: fixed;
  z-index: 1;



}
.menu {
	justify-content: center;
	letter-spacing: 0.45em;
  margin: auto;
  display:flex;
  vertical-align: middle;
  text-align: center;
  align-items: center;
}


.header a{
    padding: 2rem 1.5rem;
}

.header a:hover{
color: #04e762;
text-shadow: 0 0 5px #04e762,
             0 0 10px #04e762,
             0 0 20px #04e762,
             0 0 40px #04e762;
}

.navbar {
padding:0%;

}

/* Banner */

.banner, .ban, .ban img { 
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	padding-top: 28px;
	}





/* Works */




[class*="row"]{
float:  left;
margin: 0 auto;
padding: 0rem;
}

[class*="col-"]{
float:  left;
margin: 0rem;
padding: 0rem;
}

[class*="img"]{
padding: 1rem 0rem  0rem 1rem;
padding-bottom: 0%;
}



/* Transition */

#transition{
  margin: auto;
  display: flex;
  justify-content: center;
  padding-top: -20px
}


/* about */
.about {
  background-color: #0b0d14;
  display: flex;
  vertical-align: middle;
  font-family: 'gotham';
  padding: 5rem 0rem 5rem 0rem;
  margin:0;
  align-items: center;
}
}

.about h1 {
  font-family: 'gotham';
  font-size: 2.2rem;
  font-weight: 500px;
  color: white;
  padding-bottom: 1.5rem;

}
 
.about p {
  font-family: 'gotham';
  font-size: 0.8rem;
  color: white;
}
.about img {
  padding:0%;
}


/* Footer */


.footer {
	background-color: #04e762
}


/* Contact */

<!doctype html>
<html>
  <head>
    <meta charset="utf_8">
    <title> RAFU 
    </title>
    <link rel="icon" type="image" href="https://image.noelshack.com/fichiers/2018/11/7/1521344341-favicon2.png" /> 
    <!-- Font -->
    <!-- CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <!-- Contenu du site -->
  <body>
    <!-- Header -->
    <header class="container-fluid header" width="100%">
      <div class="navbar navbar-default navbar-fixed-top">
      </div>
      <div class="container">
        <nav class="menu">
          <a href="#">HOME
          </a>
          <a href="#about"> ABOUT
          </a>
          <div class="d-none d-md-block">
            <a href="index.html">
              <img src="https://image.noelshack.com/fichiers/2018/11/5/1521162688-logo2.png" alt="Logo de Rafu" class="logo" />
            </a>
          </div>
          <a href="#works"> WORKS
          </a>
          <a href="#contact"> CONTACT
          </a>
        </nav>
      </div>
    </header>
    <!-- End Header -->
    <!-- Banner -->
    <section class="container-fluid banner">
      <div class="ban">
        <div class="d-none d-sm-block">
          <img src="https://image.noelshack.com/fichiers/2018/11/5/1521163468-banniere2.png" alt="banniere"  />
        </div>
      </div>
    </section>
    <!-- End Banner -->
    <!-- Works -->
    <!-- Le problème est ICI -->
    <section class="container-fluid works" >
      <div class="container">
        <div class="works">
          <div class="row">
            <div class="col-md-6 col-xl-6 col-lg-6 col-xs-12 col-sm-12">
              <a href="www.Rafu.fr" class="a">
                <img src="https://image.noelshack.com/fichiers/2018/12/1/1521416247-photo1b.png" width="100%" alt="photo1" class="img-fluid"/>
              </a>
              <div class="row">
                <div class="col-md-6 col-xl-6 col-lg-6 col-xs-6 col-sm-6">
                  <a href="www.Rafu.fr" class="c">
                    <img src="https://image.noelshack.com/fichiers/2018/11/5/1521237135-photo3.png" width="100%" alt="photo3" class="img-fluid"/>
                  </a>
                </div>
                <div class="col-md-6 col-xl-6 col-lg-6 col-xs-6 col-sm-6">
                  <a href="www.Rafu.fr" class="d">
                    <img src="https://image.noelshack.com/fichiers/2018/11/5/1521237135-photo4.png" width="100%" alt="photo4" class="img-fluid"/>
                  </a>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xl-6 col-lg-6 col-xs-6 col-sm-12">
              <a href="www.Rafu.fr" class="b">
                <img src="https://image.noelshack.com/fichiers/2018/12/1/1521416247-photo2b.png" width="100%" alt="photo2" class="img-fluid" />
              </a>
            </div>
            <div class="row">
              <div class="col-md-6 col-xl-6 col-lg-6 col-xs-12 col-sm-12">
                <a href="www.Rafu.fr" class="e">
                  <img src="https://image.noelshack.com/fichiers/2018/12/1/1521416247-photo5b.png" width="100%"  alt="photo1" class="img-fluid"/>
                </a>
              </div>
              <div class="col-md-3 col-xl-3 col-lg-3 col-xs-12 col-sm-6">
                <a href="www.Rafu.fr" class="f">
                  <img src="https://image.noelshack.com/fichiers/2018/11/5/1521237135-photo6.png" width="100%" class="img-fluid"/>
                </a>
              </div>
              <div class="col-md-3 col-xl-3 col-lg-3 col-xs-12 col-sm-6">
                <a href="www.Rafu.fr" class="g">
                  <img src="https://image.noelshack.com/fichiers/2018/11/5/1521237135-photo7.png" width="100%"  alt="photo4" class="img-fluid"/>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End Works -->
    <!-- Transition -->
    <div class="transition">
      <div class="d-none d-md-block">
        <img src="https://image.noelshack.com/fichiers/2018/11/4/1521084959-transition4.png" alt="transition" width="100%"/>
      </div>
    </div>
    <!-- About -->
    <!-- Le problème est aussi ICI -->
    <section class="container-fluid about" width="100%">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-xl-5 col-lg-5 col-xs-12 col-sm-12 item-about">
            <h1>About
            </h1>
            <p>This is where it starts to get complicated. You need to calculate column widths differently depending on which method you use.We’ll go through these methods one by one and look at the differences. Take your time as you read through them.This is where it starts to get complicated. You need to calculate column widths differently depending on which method you use.We’ll go through these methods one by one and look at the differences. Take your time as you read through them.This is where it starts to get complicated. You need to calculate column widths differently depending on which method you use.We’ll go through these methods one by one and look at the differences. Take your time as you read through them.This is where it starts to get complicated.  
            </p>
          </div>
          <div class="row">
            <div class="col-md-12 col-xl-12 col-lg-12 col-xs-12 col-sm-12 item-about">
              <img src="https://image.noelshack.com/fichiers/2018/11/4/1521092650-about.png" class="img-fluid" width="100%"/>
            </div>			
          </div>
        </div>
        </section>
      <!-- End About -->
      <!-- footer -->
      <footer class=" container-fluid footer">
        <div class="container">
          <div class="row">
            <div class="col-md-12 col-xl-3 col-lg-4 col-xs-12 col-sm-12 item-">
              <img src="https://image.noelshack.com/fichiers/2018/11/4/1521082946-facebook.png" alt="facebook" class="img-fluid" width="100%"/>
            </div>
            <div class="col-md-12 col-xl-3 col-lg-4 col-xs-12 col-sm-12 item-media">
              <img src="https://image.noelshack.com/fichiers/2018/11/4/1521082946-behance.png" alt="behance" class="img-fluid" width="100%"/>
            </div>
            <div class="col-md-12 col-xl-3 col-lg-4 col-xs-12 col-sm-12 item-media">
              <img src="https://image.noelshack.com/fichiers/2018/11/4/1521082946-instagram.png" alt="instagram" class="img-fluid" width="100%"/>
            </div>
            <div class="col-md-12 col-xl-3 col-lg-4 col-xs-12 col-sm-12 item-media">
              <img src="https://image.noelshack.com/fichiers/2018/11/4/1521082946-twitter.png" alt="twitter" class="img-fluid" width="100%"/>
            </div>
          </div>
        </div>
      </footer>
      <!--contact -->
      <div class="span6">
        <form>
          <div class="controls controls-row">
            <input id="name" name="name" type="text" class="span3" placeholder="Name"> 
            <input id="email" name="email" type="email" class="span3" placeholder="Email address">
          </div>
          <div class="controls">
            <textarea id="message" name="message" class="span6" placeholder="Your Message" rows="5">
            </textarea>
          </div>
          <div class="controls">
            <button id="contact-submit" type="submit" class="btn btn-primary input-medium pull-right">Send
            </button>
          </div>
        </form>
        </body>
      </html>

Je ne sais pas si je suis clair, n'hesitez pas à me le dire si vous voulez d'autres infos

-
Edité par Rafuone 19 mars 2018 à 2:51:07

philiga

19 mars 2018 à 11:03:00

Bonjour,

Tout d'abord, il y a 2 div non fermées dans ton code html: div.container et div.span6.

Pour repérer et corriger ce type d'erreur, je te recommande cet outil génial: jsbin.com

Si tu crées un compte (gratuit), tu peux dans les paramètres de ce compte régler les options pour afficher les N° de ligne et avoir de petites flèches en début de lignes permettant de replier par module structurel tes éléments.

Tu repères ainsi beaucoup plus facilement avec cette vision modulaire les endroits signalés en rouge où il y a une faute de syntaxe.

Ci-dessous </section> est rouge puisqu'il apparaît alors que <div class="container"> n'est pas fermée.

Idem pour div.span6

Il y a aussi un } en trop ligne 124 dans ton CSS et ligne 98 une erreur plus difficile à voir puisqu'il s'agit d'une espace insécable après le 1er 0rem.

(Au passage, quand la valeur est 0, ne pas mettre l'unité (px, rem,%...) derrière )

En utilisant ce beautifier, on voit ton caractère insécable marqué par un point rouge et en le copiant collant dans cet autre outil, (boite Caractères puis Tabuler), on affiche l'identité du coupable: U+00A0 ESPACE INSÉCABLE

Et il te fait remarquer aussi:

As-tu vraiment besoin d'une selection aussi compliquée, ne peux-tu viser tes images par "img" plus simplement, par exemple

.container img {

Autre point, je te recommande de travailler en border-box en ajoutant en haut de ton css:

*, *:before, *:after {
  box-sizing: border-box;
}

Ainsi, si tu mets des bordures, elles ne se décaleront pas vers la droite avec la hiérarchie

(cf. https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing).

Enfin, dans ton code

[class*="img"]{
     padding: 1rem 0rem 0rem 1rem;
     padding-bottom: 0%;
}

tu peux supprimer la 2ème ligne inutile et écrire la première : padding 1rem 0 0 1rem;

Tu auras déjà moins de chance de laisser trainer des espaces insécables.

Et pourquoi appliquer des padding aux images elles-mêmes ? Drôle d'idée que d'étrangler ces pauvres images sur elles-mêmes!

Le padding se met plutôt sur le parent en général.

Mais au final, pourquoi mets-tu un padding qui te gêne?

Je n'ai pas trop creusé la logique de ta construction, mais appliques déjà ces correctifs et évite de faire du positionnement bricolé en ajustant provisoirement à coups de paddings unilatéraux.

Si tu veux que ta structure soit homogène dans toutes les tailles d'écrans, il ne faut pas décaler tes éléments unilatéralement ainsi.

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Rafuone

19 mars 2018 à 14:21:24

Waouh!

Bah déjà un grand merci a toi pour tout ça! Ça me permet de progresser et d'avoir du recul sur des éléments que je n'avais pas forcément vus!En ce qui concerne la verification de mon html, j'avais utilisé le site https://ctrlq.org/beautifier/ qui a du certainement ce contenté de l'indentation.

Très bonne remarque concernant ma sélection compliquée, au moment où je l'ai faite je n'arrivais pas sélectionner mon contenu, entre-temps j'y ai rajouté la div Works qui rend les choses plus simple, mais j'ai oublié de changer mon CSS par la suite.Idem pour le padding sur les images, j'en suis arrivé à cette triste solution car lorsque je mettais un padding sur le parent, Div Works par exemple, ils s'additionnaient, je me retrouvais donc parfois avec un double padding entre les photos (Oula je ne sais pas si c'est très compréhensible, ce que je dis!). Mais tu as raison mon bricolage n'est pas une solution.

Du coup j'ai fais les correctifs que tu me recommandais, le code est plus propre. J'ai donc rajouté un padding à tout ça:

*, *:before, *:after {
  box-sizing: border-box;
  padding: 0.5rem;
}

Seulement voila ce que ça m'affiche :

Au lieu de :

-
Edité par Rafuone 19 mars 2018 à 14:28:00

philiga

19 mars 2018 à 14:45:10

Ouh là, jamais ça !

N'ajoutes rien à ceci:

*, *:before, *:after {
  box-sizing: border-box;
}

Tu sais que * signifie "tous les éléments" ?

Box-sizing est la seule instruction pour laquelle on est obligé de le faire puisque malheureusement le mode par défaut choisi pour les navigateurs n'est pas le bon (à mon sens et à celui d'autres : cf. cette Journée internationale de sensibilisation au box-sizing) !

Pour le reste, rester plus spécifique, ce qui évite de faire ramer le processeur à balayer tous les éléments pour rien et de s'enfermer avec une définition appliquée partout alors qu'elle n'est pertinente que pour un élément.

Ton padding doit être appliqué au 1er conteneur parent de ce que tu veux restreindre.

PS: Et je pense que ta div.span6 devrait être DANS le <footer>, élément sémantique qui, comme son nom l'indique est le bas de page.

-
Edité par philiga 19 mars 2018 à 14:59:34

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Rafuone

19 mars 2018 à 15:10:49

Effectivement!

Comme je disais plus haut, lorsque j'applique le padding au parent, cela ne fonctionne pas comme ça devrait, il est justement la le soucis. D'ou mon padding images cra cra.

Je pense que le soucis viens de mon Html, pas du css. Mais je me trompe peut être.

/* Works */


.works {
padding: 1rem ;
}

-
Edité par Rafuone 19 mars 2018 à 15:33:24

philiga

19 mars 2018 à 15:46:06

Sur jsbin, on voit bien le changement pourtant si l'on applique

.works {
border:2px solid blue;
padding: 1rem ;
}

Je met des bordures pour visualiser tes blocs, mais je n'ai encore rien compris à la construction d'ensemble.
Je vois des floats ; n'aurais-tu pas intérêt à construire ta structure centrale avec display:flex (voire display:grid)?

PS: N'y a-t-il pas un problème du fait d'avoir attribué la classe .works à ces 2 éléments bien différents ?

-
Edité par philiga 19 mars 2018 à 16:02:52

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Rafuone

19 mars 2018 à 16:11:56

Entretemps j'ai supprimé :

[class*="row"]{
float:  left;
margin: 0 auto;
padding: 0rem;
}
 
[class*="col-"]{
float:  left;
margin: 0rem;
padding: 0rem;
}

Car, comme tu me disais plus haut, cette selection est compliquée et donc pas idéale.

Le seul CSS présent pour toute la structure des mes photos est celui que je t'ai envoyé précedemment.

Je vais essayer d'expliquer ce que j'ai voulu faire.

J'aimerais faire donc 3 row de 4 col.

Avec 3 tailles distinctes.

ps: Bien vu pour les deux classes, je suis un boulet je ne les avait pas vus.

Avec ce genre de bêtises j'ai vraiment l'impression de te faire perdre ton temps.

Je vais vérifier si je n'ai pas fait la même bêtise ailleurs.

-
Edité par Rafuone 19 mars 2018 à 16:17:18

Mewen_bzh

19 mars 2018 à 16:17:39

Bonjour,

Si ce schéma représente bien ce que tu veux réaliser alors je te conseille d'utiliser le module CSS Grid.

Je ne réponds pas aux messages privés.

Rafuone

19 mars 2018 à 16:18:41

Hello!

Auparavant,je l'avais faite assez facilement d'ailleurs via un GRID.

Le hic c'est que le tout n'était pas dutout responsive.

D'ou ma démarche de tout refaire avec bootstrap.Est-il possible de cumuler les deux?

-
Edité par Rafuone 19 mars 2018 à 16:21:54

philiga

19 mars 2018 à 16:24:11

J'avoue que je ne sais pas ; je n'ai jamais utilisé bootstrap qui me semble compliquer les choses.

Avec display:flex; ou grid et des media queries au besoin, je ne vois pas trop l'intérêt de ces usines à gaz qui surchargent le code.

-
Edité par philiga 19 mars 2018 à 16:26:19

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Rafuone

19 mars 2018 à 16:26:29

Comme dit plus haut,bien vu! il s'agissait bien d'une erreur de ma part.Je l'ai donc corrigé ! Je vous remercie quand même de m'avoir aidé.

Je vais insister encore et essayer de trouver une solution

-
Edité par Rafuone 20 mars 2018 à 0:42:07