Bonjour,

Je me lance dans javaee / jsf et j'ai une question de mise en page.
Dans l'image transmise, j'ai 2 points obscurs :

1. Pourquoi y'a-t-il un espace entre mes composants et le bord du panelGrid, sur la droite ?
2. Comment est-ce que je peux centrer le bouton "Connexion" ?

Voici ma page :
Code : 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
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view locale="#{changeLocale.locale}">
	<h:head>
		<title>Connexion</title>
		<h:outputStylesheet library="css" name="styles.css" />
	</h:head>
	<body>
		<h:form id="connexionForm">
			<p:growl id="growl" life="2000" />
			<p:panelGrid columns="1" style="margin-bottom:10px" layout="grid">
				<f:facet name="header">
					<h:outputText class="titreLogin" value="Connexion" />
				</f:facet>
 
				<h:outputText value="Nom d'utilisateur :" />
				<p:inputText id="login" value="#{loginForm.login}" />
 
				<h:outputText value="Mot de passe :" />
				<p:password id="password" value="#{loginForm.password}" />
 
				<p:panelGrid columns="2" style="margin-bottom:15px" styleClass="panelSansBordure">
					<p:selectBooleanCheckbox value="#{loginForm.isRemembered}" />
					<h:outputText value="Se souvenir de moi" />
				</p:panelGrid>
				<p:commandButton value="Connexion" id="doLogin" update="growl" actionListener="loginForm.anthenticate}" styleClass="ui-priority-primary" />
			</p:panelGrid>
 
			<p:commandLink id="forgetLogin" update="growl"
				actionListener="#{loginForm.forgetLoginData}">
				<h:outputText class="lien" value="Login ou mon mot de passe oublié" />
			</p:commandLink>
		</h:form>
	</body>
</f:view>
</html>
Et la feuille de style :
Code : 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
/* 
Document   : style
Created on : 30.03.2015
Author     : auth
Description:
Purpose of the stylesheet follows.
*/
 
/* Formulaires */
#formulaire {
   position:absolute;
   top:50%;
   left:50%;
   width:1400px;
   height:1000px;
   margin-left:-700px; /* -largeur/2 */
   margin-top:-500px; /* -hauteur/2 */
   background:red;
}
 
#connexionForm {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 350px;
	height: 200px;
	margin-left: -175px; /* -largeur/2 */
	margin-top: -100px; /* -hauteur/2 */
	/*background: red;*/
	font-color: #82b4ec;
}
 
/* Panel */
.panelSansBordure tr, .panelSansBordure td {
	border: none;
}
 
/* Tableau */
.columnCenter {
	text-align: center;
}
 
.titreLogin {
	font-size: 25px;
	font-weight: bold;
	text-align: right;
}
 
.lien {
	 font-size: 14px;
	 text-decoration: none;
}
Qqun a-t-il réponse à mes questions ?
Merci d'avance pour votre aide
Nom : Login.png Affichages : 1066 Taille : 17,6 Ko