Problème input et position:fixed

27 mars 2015 à 2:46:15

Bonjour, depuis quelques heures je recherche une solution à mon problème.

J'ai passé mon menu en position:fixed pour que celui ci soit toujours visible par l'utilisateur, problème que je rencontre j'ai un fomulaire qui contient des champs input et lorsque je descends sur ma page les inputs vont passer par dessus mon menu et je n'arrive pas à faire en sorte qu'il passe en dessous ... Si quelqu'un avait une solution je suis preneur !

Anonyme

27 mars 2015 à 6:07:40

Bonjour !

Voici ce qu'il faut faire :

#menu {
z-index: 999;
}

Il faut ajouter la propriété "z-index" :-)

Quentinb56

27 mars 2015 à 9:36:56

Un grand merci à toi! z-index correspond à la position d'un calque ?

Guillaume Ravel

27 mars 2015 à 10:04:21

Salut

Effectivement z-index fonctionne comme une position de calque (un peu comme Photoshop).

Lorsque tu ajoutes des éléments, si à cause du css ces éléments se superposent, par défaut le dernier élément se place au dessus des autres. En indiquant un z-index, tu indiques un ordre pour se positionner, sachant qu'un z-index 999 se placera au dessus d'un z-index 99. Tu peux également utiliser des valeurs négatives.

Pour utiliser z-index sur un élément, celui-ci doit impérativement disposer d'un attribut "position", dans ton cas fixed.

-
Edité par Guillaume Ravel 27 mars 2015 à 10:04:50

Quentinb56

27 mars 2015 à 10:48:30

Très bien les choses s'éclaircissent !

Je me permets de vous poser une nouvelle question, pour le moment je mettais à la div en dessous de mon menu un margin-top:15% pour que celui ci se mette en dessous de mon menu, y a t'il un moyen plus propre d'obliger l'élément en dessous à se positionner sous le menu et pas par rapport au haut de la page ?

philiga

27 mars 2015 à 10:53:29

Bonjour,

C'est parfois utile le z-index, mais ici plutôt que de faire scroller le contenu de la page sous le menu, puisque celui-ci est fixe, ne serait-il pas plus rationnel de faire un margin-top ou un padding-top au conteneur de cette page afin que son contenu ne soit jamais sous le menu?

PS: Nos messages se sont croisés Quentinb56 ; pourquoi ne pas garder simplement le margin-top (qui aurait probablement intérêt à avoir une valeur fixe toutefois, à moins que celles du menu/header ne varient aussi beaucoup ?). Il n'y a pas de "moyen plus propre" puisqu'un élément en fixed est sorti du flux, tu ne peux plus compter sur l'empilement naturel propre au flux.

PS2: Je ne comprends pas pourquoi tu avais un problème avec ton formulaire si tu avais déjà mis un margin-top ou alors c'est que celui-ci ne s'appliquait pas au conteneur global de tout ce qui est sous header/menu. C'est cela qu'il faut faire ; rien en dehors.

-
Edité par philiga 27 mars 2015 à 10:59:35

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

Quentinb56

27 mars 2015 à 12:30:48

menu.jsp

<div class="container-fluid" style="position:fixed; z-index: 999; width:100%; top:0%; background-color: white;">
...
</div>

connexion.jsp

<body>
<div><jsp:include page="../menu.jsp"/></div>
	
<div class="container-fluid" style="width: 35%; margin-top:15%;">

...

</div>

</body>

Voila les balises, mon formulaire se place bien après mon menu mais si je réduis la taille de ma fenêtre il se place ensuite sous le menu sa taille ne variant pas.

philiga

27 mars 2015 à 19:46:41

On ne peut pas comprendre grand chose avec ce bout de code là ; peux-tu faire une simulation assez complète de ta page sur http://jsbin.com ?

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

Quentinb56

27 mars 2015 à 21:52:07

Je te poste le résultat demain, je dois récupérer le css dans bootsrap.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="fr">
<meta charset="UTF-8" />
<title></title>
<div class="container-fluid"
	style="position: fixed; z-index: 999; width: 100%; top: 0%;">
	<br>
	<h1>
		Domo<span style="color: #076ED4;">bo </span><small>La
			domotique en toute securite</small>
	</h1>

	<nav class="navbar navbar-inverse">
		<div class="container-fluid">
			<div class="navbar-header">
				<!--  Utiliser lorsque la fenetre est plus petite -->
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbarMenu">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Home</a>
			</div>

			<div class="collapse navbar-collapse" id="navbarMenu">
				<ul class="nav navbar-nav">
					<li><a href="#">Link <span class="sr-only">(current)</span></a></li>
					<li><a href="#">Link</a></li>
					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown" role="button" aria-expanded="false">Dropdown
							<span class="caret"></span>
					</a>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
							<li class="divider"></li>
							<li><a href="#">One more separated link</a></li>
						</ul></li>
				</ul>
				<form class="navbar-form navbar-left" role="search">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Search">
					</div>
					<button type="submit" class="btn btn-default">Submit</button>
				</form>

				<div class="btn-group navbar-right" role="group" aria-label="...">
					<button type="button" class="btn btn btn-default navbar-btn"
						onclick="openPage('/DomoZ/member/enregistrer.jsp')">S'enregistrer</button>
					<button type="button" class="btn btn-connect navbar-btn"
						onclick="openPage('/DomoZ/member/connexion.jsp')">Se
						connecter</button>
				</div>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>
</div>

<script>
	$("a[class='navbar-brand']").click(function(event) {
		$('li').removeClass('active');
		openPage('/DomoZ/accueil/accueil.jsp');
	});

	$('li').click(function() {
		$('li').removeClass('active');
		$(this).addClass('active');
	});

	function openPage(pageURL) {
		window.location.href = pageURL;
	}
</script>

</html>

<%@page import="bean.Identification"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<jsp:useBean id="identifier" class="bean.Identification" scope="request"></jsp:useBean>
<jsp:useBean id="validateur" class="validation.Validation"
	scope="request"></jsp:useBean>
<jsp:useBean id="manager" class="manager.Manager" scope="session"></jsp:useBean>

<%
	boolean iCo;

	// si formulaire rempli

	if (request.getParameter("submit") != null) {

		// validation
		validateur.param(request, Identification.class, "ident");
		validateur.param(request, Identification.class, "pass");

		// si pas d'erreurs on ouvre connexion au serveur

		if (validateur.isValide()) {

			identifier.setIdent(validateur.getValeurs().get("ident"));
			identifier.setPass(validateur.getValeurs().get("pass"));
			
			if (manager.identifier(identifier)) {
				if(manager.getIdentifie()){
					response.sendRedirect("accueil.jsp");
					return;
				}
				else {
					iCo = true;
					pageContext.setAttribute("iCo", iCo);
				}
			} 
			else{
				response.sendRedirect("erreur.jsp");
			}
		}
	}
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Connexion</title>
<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="jquery/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.js">
	
</script>

<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
	<jsp:include page="menu.jsp" />
	<div class="container-fluid" style="width: 35%; margin-top: 10%; margin-bottom:15%">

		<div class="panel panel-info">
			<div class="panel-heading">
				<h3 class="panel-title">Connexion</h3>
			</div>
			<div class="panel-body">

				<form method='post'>

					<c:if test="${iCo}">
						<div class="alert alert-danger" role="alert">
							<button type="button" class="close" data-dismiss="alert"
								aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
							<span class="glyphicon glyphicon-exclamation-sign"
								aria-hidden="true"></span> &nbsp; <strong>Erreur</strong>
							&nbsp;Vous avez rentré des identifiants incorrects!
						</div>
					</c:if>

					<label for="ident">Identifiant</label>
					<div class="input-group">
						<input type="text" class="form-control" id="ident" name="ident"
							placeholder="Identifiant" value="${validateur.valeurs['ident']}" />
						<span class="input-group-addon glyphicon glyphicon-user"
							aria-hidden="true"></span>
					</div>
					<h4>
						<span class="label label-danger">${validateur.erreurs['ident']}</span>
					</h4>

					<label for="pass">Mot de Passe</label>
					<div class="input-group">
						<input type="password" class="form-control" name="pass" id="pass"
							placeholder="Mot de Passe"> <span
							class="input-group-addon glyphicon glyphicon-lock"
							aria-hidden="true"></span>
					</div>

					<h4>
						<span class="label label-danger">${validateur.erreurs['pass']}</span>
					</h4>

					<br>

					<button type="submit" name="submit" class="btn btn-primary">Soumettre</button>

				</form>
			</div>
		</div>
	</div>

</body>
</html>