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 : 1315
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 : 1106
Taille : 94,7 Ko

Nom : login2.GIF
Affichages : 1106
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, 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.

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

CSS

Vue hybride

Discussions similaires

Partager

Partager