Formulaire d'authentification et image de fond d'écran pas assez large

**laurentSc** · 20/11/2016, 13h46

Bonjour,

d'abord, j'expose mon problème dans ce forum car je pense qu'il y a plutôt un problème de CSS.

Le problème dont je parle est visible si je mets le fichier en local, mais pas si le code est dans codepen : http://codepen.io/jreaux62/pen/bBVZJE

En local :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="fr">
<head>
     <meta charset="UTF-8" />
     <title></title>
 
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
</head>
<body>
 
 
<main>
  <section>
    <form id="authform">
      <h2><i class="fa fa-user-o" aria-hidden="true"></i>
 LOGIN</h2>
      <p>
        <label for="login2">Username</label>
        <input id="login2" type="text" size="30" value="" name="login2" />
      </p>
      <p>
        <label for="pwd2">Password</label>
        <input class="btsubmit" id="pwd2" type="password" size="30" value="" name="pwd2" />
      </p>
      <p>
        <input type="submit" value="Log In" name="goAuth" />
      </p>
    </form>
  </section>
 
 
</main>
 
</body>
</html>

styles.css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
html,
body {
  font-size: 100%;
}
 
#authform {
  max-width: 600px;
  width: 100%;
  padding: 30px;
  margin: 20px auto;
  background: url(http://www.quebecwoodexport.com/images/stories/slideshow/resineux/cedre/_ccedre.jpg) no-repeat;
  font-family: Arial, sans-serif;
  color: #6f5430;/*marron*/
  border-radius:10px;
  box-shadow:5px 10px 10px #999;
}
 
#authform h2 {
  font-size: 160%;
  font-weight: bold;
  text-shadow: 2px 2px 0px #decfbb;/*beige clair*/
}
 
#authform h2 i.fa {
  font-size: 140%;
}
 
#authform label {
  position: relative;
  display: inline-block;
  width: 30%;
  font-weight: bold;
  text-shadow: 2px 2px 0px #decfbb;/*beige clair*/
  padding-left: 20px;
}
 
#authform label:before {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  margin-top: -6px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 12px;
  border-color: transparent transparent transparent #6f5430;/*marron*/
}
 
#authform input {
  display: inline-block;
  border-radius: 50px;
  background: transparent;
}
 
#authform input:not([type=submit]) {
  width: 60%;
  padding: 6px 20px;
  border: 1px inset #decfbb;/*beige clair*/
  box-shadow: 0 10px 10px #6f5430 inset;/*marron*/
}
 
#authform input[type=submit] {
  max-width: 100px;
  border: 1px inset #decfbb;/*beige clair*/
  box-shadow: 0 1px 2px #6f5430 inset;/*marron*/
  font-weight: bold;
  color: #6f5430;/*marron*/
  text-shadow: 1px 1px 0px #decfbb;/*beige clair*/
  padding: 5px 15px;
  margin: 0 75%;
  cursor: pointer;
}
 
#authform input[type=submit]:hover {
  color: #553b18;/*marron fonce*/
  box-shadow: 0 1px 20px #6f5430 inset;/*marron*/
}

et en local, voici un aperçu de la page :
Nom : login.GIF
Affichages : 1251
Taille : 81,6 Ko

Il y a clairement un souci sur la droite...Je ne vois pas d'où ça peut venir...

**NoSmoking** · 20/11/2016, 16h00

Bonjour,
dans l'exemple du codePen le fichier CSS boostrap est également chargée ce qui n'est pas ton cas.

Par défaut la largeur rendue d'un élément = largeur + padding +bordure.

Dans ton cas si tu souhaites avoir réellement 600px de largeur il te faut ajouter à ton élément authform la déclaration box-sizing : border-box.

**laurentSc** · 20/11/2016, 16h35

Merci, comme je ne connaissais cette propriété, j'ai trouvé des explications ici : https://la-cascade.io/box-sizing-pour-les-nuls/ (vu le titre, c'est bon pour moi

). J'ai vu sur cette page que pour Firefox, il fallait préfixer (-moz-box-sizing). Or ça fonctionne même sans le préfixe ; pourquoi ?

Ce chargement du CSS de Bootstrap, il est où ? D'après moi, le seul CSS est "http://fontawesome.io/assets/font-awesome/css/font-awesome.css" et je le charge aussi ...

EDIT : petit souci : c'est résolu pour la largeur mais plus pour la hauteur :
Nom : login2.GIF
Affichages : 1037
Taille : 94,7 Ko

Nom : login2.GIF
Affichages : 1037
Taille : 94,7 Ko

**laurentSc** · 20/11/2016, 18h40

Un indice qui peut aider à trouver : le problème n'existe qu'avec IE (pas avec Firefox ou Chrome). D'autre part avec l'outil de développement de IE (Firebug like), si je désactive la propriété box-shadow dans authform, c'est moche mais ça supprime le problème.

**NoSmoking** · 20/11/2016, 18h47

Maintenant tu as un problème de « fusion de marges » lié à l'ajout d'un élément Hx.

Pour résoudre cela « reset » les margins de tes éléments Hx.

[EDIT]

si je désactive la propriété box-shadow dans authform, c'est moche mais ça supprime le problème.

non le problème persiste, regarde en modifiant la couleur de fond de ton <form>.

Il semblerait bien qu'il y ai un dysfonctionnement dans ce cas avec IE !

**laurentSc** · 20/11/2016, 19h08

Génial, je n'ai pas d'élément Hx dans ma page, mais j'ai ressetté la marge haute de authform (padding-top : 0;) (après avoir fait une recherche sur "fusion des marges"), et c'est résolu.

**NoSmoking** · 20/11/2016, 19h16

Génial, je n'ai pas d'élément Hx dans ma page,(...)

et cela c'est quoi

<h2><i class="fa fa-user-o" aria-hidden="true"></i> LOGIN</h2>

le x de Hx signifie 1,2,3,4,5 ou 6.

**NoSmoking** · 20/11/2016, 19h44

Envoyé par NoSmoking

Maintenant tu as un problème de « fusion de marges »
(...)
Il semblerait bien qu'il y ai un dysfonctionnement dans ce cas avec IE !

en regardant de plus près il apparaît simplement que ton image faisant 343px de hauteur ne permet pas de couvrir la hauteur de ton <form> et ce compte tenu de la hauteur cumulée des éléments qui se trouvent à l'intérieur, font-size, margin et/ou autre padding.

**laurentSc** · 20/11/2016, 22h33

Envoyé par NoSmoking

et cela c'est quoi

Oups, il faut que je fasse changer mes lunettes !

Envoyé par NoSmoking

en regardant de plus près il apparaît simplement que ton image faisant 343px de hauteur ne permet pas de couvrir la hauteur de ton <form>

Bien vu, si j'impose une hauteur de 343px au form, plus besoin de ressetter les marges...

Invité · 21/11/2016, 09h39

Bonjour Laurent,

1/ N'hésite pas non plus à trouver TA PROPRE image de fond (libre de droit) !

: "texture bois clair"

2/ margin / border / padding :

W3C : Box model
box-sizing (regarde aussi la section "Compatibilité)

**laurentSc** · 21/11/2016, 14h29

Merci pour les liens que tu me donnes. Mais j'ai trouvé dans l'un d'eux une phrase dont je n'ai pas trouvé l'explication

These properties have no effect on non-replaced inline elements

J'ai pas trouvé de définition claire de "non-replaced inline elements" ; tu pourrais m'expliquer ?

Pour une image, pas facile d'en trouver une sans aucune inscription dessus, mais j'ai trouvé http://images.google.fr/imgres?imgur...h=545&biw=1242
Par contre, avant de l'utiliser, comment voir si elle est libre de droits ?

Enfin, l'autre jour, tu doutais de ma capacité à assimiler les explications sur le CSS de CosmoKnacki. Voici une règle que j'ai trouvée tout seul grâce à ces explications : .menu li:hover > ul li:hover div (Cela dit, ça va quand même nécessiter une nouvelle discussion car je bloque un peu plus loin)

Formulaire d'authentification et image de fond d'écran pas assez large

CSS

Discussions similaires

Partager

Partager