28172 sujets

CSS et mise en forme, CSS3

élément caché pour je ne sais quelle raison

Bonjour,
Sauriez-vous pourquoi l'élément
		<p class="message ">Invalid username/password combination</p>
n'est pas visible ?


<!DOCTYPE html>
<html>
	<head>
		<title>Log In</title>
		<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); border-color: #e6e6e6 #e6e6e6 #e6e6e6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border: 1px solid #e6e6e6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; }
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; }
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary { background-color: #4a77d4; background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4); background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4)); background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); background-image: linear-gradient(top, #6eb6de, #4a77d4); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0);  border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
.btn-block { width: 60%; display:block; text-align:center; margin-left:auto; margin-right:auto;}
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
.loginDiv {
	height: 100%;
	font-family: 'Open Sans', sans-serif;
	background: #092756;
	background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top,  rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg,  #670d10 0%, #092756 100%);
	background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
	background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
	background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
	background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg,  #670d10 0%,#092756 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right:0;
	margin: 0;
}
h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
form {
	display: block;
	position: relative;
	top: 20%;
    width: 30%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
input { 
	width: 60%; 
	margin-bottom: 10px; 
	background: rgba(0,0,0,0.3);
	border: none;
	outline: none;
	padding: 10px;
	font-size: 13px;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 4px;
	box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
	-webkit-transition: box-shadow .5s ease;
	-moz-transition: box-shadow .5s ease;
	-o-transition: box-shadow .5s ease;
	-ms-transition: box-shadow .5s ease;
	transition: box-shadow .5s ease;
}
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }		
		</style>
	</head>
	<body>
		<p class="message ">Invalid username/password combination</p>
		<div class="loginDiv">
			<form method="post" enctype="application/x-www-form-urlencoded" action="/auth/page/account/login">
			<h1>Login</h1>
			<input type="text" id="username" placeholder="Username" required="required" name="f1">
			<input type="password" id="password" placeholder="Password" required="required" name="f2">
			<button class="btn btn-primary btn-block btn-large" type="submit">Let me in.</button>
			</form>
		</div>
	</body>
</html>

Modifié par Gilbert67 (08 Sep 2016 - 15:11)
Et bien je suppose qu'il deviendra visible si les sésames saisis ne sont pas bons.
Voir du côté de la page php vers laquelle est envoyé le form.
Non, non, cet élément apparaît quand les identifiants ne sont pas les bons, et il n'est pas visible.
À l'origine il l'est, mais il ne l'est plus depuis que j'ai modifié le css de .loginDiv.
Si sur ton .message tu jous avec les z-index et une position relative, tu le verra apparaitre. exemple
Modifié par JENCAL (08 Sep 2016 - 15:36)
Je viens de trouver le z-index ! Ceci résoud le problème:
.message {
	position:fixed;
	z-index:1000;
}

Que signifie le 1000 ?
à pas grand chose, le zindex c'est pour "superposer" les couches et donner un ordre d'affichage. 1000 serais plus élever que 1 donc 1000 est sensé s'afficher "par-dessus" 1
Administrateur
Gilbert67 a écrit :
Que signifie le 1000 ?

La référence reste https://developer.mozilla.org/fr/docs/Web/CSS/Comprendre_z-index

Le plus probable est que ça a été placé par un(e) dév qui voulait que ça soit "au-dessus de tout le reste" donc qui n'a pas bien compris comment z-index fonctionne...
tl;dr z-index tout seul ne fait RIEN. Sur un élément positionné (ou avec transform et une demie-douzaine de propriétés bien spéciales mais c'est surtout position et transform), ça a un effet qui dépend du contexte (les parents, les oncles, les cousins, etc)

edit: une bonne pratique que je vais m'obliger à respecter quand j'en aurai besoin : commenter et documenter l'usage de CHAQUE z-index, genre "je veux que truc soit au-dessus de machin mais en-dessous du menu quand il est ouvert"
Modifié par Felipe (09 Sep 2016 - 12:52)
Sujet clos
Aller à