[Débutant] positionnement de la page

**Faiche** · 21/01/2009, 11h35

Bonjour,

J'ai une idée de page, et je ne sais pas comment la réaliser :

Le contenu de ma page est dans un cadre. J'aimerais faire en sorte que ce cadre soit, en hauteur, de la taille de la page ou de la taille du contenu si le contenu dépasse en hauteur la taille de la page.

j'ai essayé de mettre height : 100% sur le cadre, mais ça ne change rien, il est toujours adapté à la taille du contenu, et du coup c'est moche.

J'espère être clair. Si c'est un cas trivial, vous avez le droit d'être désagréable en m'indiquant le lien où se trouve ma réponse :p

Merci d'avance

**Macmillenium** · 21/01/2009, 12h01

Bonjour,

Envoyé par Faiche

Le contenu de ma page est dans un cadre. J'aimerais faire en sorte que ce cadre soit, en hauteur, de la taille de la page ou de la taille du contenu si le contenu dépasse en hauteur la taille de la page.

On peut voir le code ?

**Faiche** · 21/01/2009, 12h26

J'ai pas réellement de code pour l'instant.

L'idée c'est que je fais une ihm web en java + seam + jsf + facelets + richfaces dans des fichiers xhtml, et que j'ai un cadre avec un nombre variable de composants importés dedans.

Le but, c'est de rendre ce tas de composants en un truc agréable à regarder. Pour ça, du bon vieux xhtml+css ira très bien.

Donc en réalité, pour l'instant, j'ai un div main et dedans, un div par composant.

Mon css ressemble à ça :

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
 
html,body {
	width: 100%;
	background-image: url("/seamproject/img/default-bg.jpg");
	background-repeat: repeat-x;
}
 
/* pour centrer la page */
#all_all {
	width: 80%;
	margin: 0 auto 0 auto;
}
 
/* style de mon cadre à compléter :p */
#all_panel {
 
}
 
/* style d'un de mes composants, qui doit etre en bas du cadre */
#all_menubar {
	position: relative;
	bottom: 5px;
}

Voila, je suis désolé de pas être plus précis, mais j'ai presque rien encore

**Macmillenium** · 21/01/2009, 14h10

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
 
 
html,body {
	width: 100%;
        height:100%;
	background-image: url("/seamproject/img/default-bg.jpg");
	background-repeat: repeat-x;
}
 
/* pour centrer la page */
#all_all {
        position:absolute;
        height:100%;
	width: 80%;
	left:50%;
        margin-left:-40%;
}
 
/* style de mon cadre à compléter :p */
#all_panel {
height:100%;	
}
 
/* style d'un de mes composants, qui doit etre en bas du cadre */
#all_menubar {
	position: relative;
	bottom: 5px;
}

peut-être sa ?

**Faiche** · 21/01/2009, 15h14

ça ne marche pas.

Voila ce que j'obtiens :

J'aimerais que le cadre blanc soit de hauteur égale à la hauteur de la fenêtre ou supérieure si le contenu est plus grand.

Et j'aimerais savoir aussi pourquoi mes ascenseurs sont activés alors que la page est petite ?

Le css est exactement celui indiqué dans le message de Macmillenium.

Merci, et désolé d'être pas doué sur ce genre de trucs :p

**Macmillenium** · 21/01/2009, 15h30

Pourrait tu poster l'intégralité de ton code css+(x)html.
Je viens de tester le code, il fonctionne correctement, le problème vient peut-être d'ailleurs.

Et j'aimerais savoir aussi pourquoi mes ascenseurs sont activés alors que la page est petite ?

Il manque un margin:0 sur le body (comme tu indique un width/height de 100% ...)

**Faiche** · 21/01/2009, 15h42

Comme je disait, c'est pas du simple xhtml, mais du jsf/richfaces donc je sais pas si ça va etre bien utile

Page générale :

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
<?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:s="http://jboss.com/products/seam/taglib"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a="http://richfaces.org/a4j" 
        xmlns:r="http://richfaces.org/rich"
	xmlns:ui="http://java.sun.com/jsf/facelets">
 
 
 
<head>
<title>Hermes Alpha</title>
<link rel="stylesheet" type="text/css" href="css/general.css" />
</head>
 
<body>
 
<f:view>
	<div id="all_all">
	<r:panel styleClass="all_panel">
 
		<h:form>
                      <!--  ici j ajoute dynamiquement (normalement) les composants -->
			<ui:include src="composant.xhtml" />
		</h:form>
 
 
		<div id="all_menubar">
		<r:toolBar height="15"
			itemSeparator="line">
			<r:toolBarGroup>
				<h:outputLabel value="Creer" for="create" />
			</r:toolBarGroup>
			<r:toolBarGroup>
				<h:outputLabel value="Afficher" for="showAll" />
			</r:toolBarGroup>
			<r:toolBarGroup location="right">
				<h:inputText styleClass="barsearch" />
				<h:commandButton styleClass="barsearchbutton"
					onclick="return false;" value="Search" />
			</r:toolBarGroup>
		</r:toolBar>
		</div>
	</r:panel>
	</div>
 
</f:view>
</body>
 
</html>

Voila le composant que j'ajoute pour l'instant :

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
<?xml version="1.0" encoding="utf-8"?>
<!-- tout ce qui se trouve dans le tag ui:composition sera inclu dans une autre page -->
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:r="http://richfaces.org/rich">
 
	<r:panel>
		<f:facet name="header">Caracteriser</f:facet>
		<table>
			<tr>
				<th>choix 1</th>
				<td><r:comboBox defaultLabel="lalala"></r:comboBox></td>
			</tr>
			<tr>
				<th>choix 2</th>
				<td><r:comboBox defaultLabel="lalala"></r:comboBox></td>
			</tr>
			<tr>
				<th>choix 3</th>
				<td><r:comboBox defaultLabel="lalala"></r:comboBox></td>
			</tr>
			<tr>
				<th>choix 4</th>
				<td><r:comboBox defaultLabel="lalala"></r:comboBox></td>
			</tr>
		</table>
		<br />
		<br />
		<br />
		<h:commandButton action="#" value="Continuer" />
 
 
	</r:panel>
 
</ui:composition>

Comme on le voit, tout se trouve dans un div all_all et un panel all_panel.

Merci

**Macmillenium** · 21/01/2009, 15h44

Envoyé par Faiche

Comme je disait, c'est pas du simple xhtml, mais du jsf/richfaces donc je sais pas si ça va etre bien utile

J'ai plutôt besoin de ton code généré

**Faiche** · 21/01/2009, 15h49

Envoyé par Macmillenium

J'ai plutôt besoin de ton code généré

désolé :p

Je met qu'une partie du code, il y a 2000 trucs de javascript dedans, c'est illisible :

Code xhtml :

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
<head>
<title>Hermes Alpha</title>
</head>
 
<body>
<div id="all_all">
<div class="dr-pnl rich-panel all_panel" id="j_id3">
<div class="dr-pnl-b rich-panel-body " id="j_id3_body">
<form id="j_id4" name="j_id4" method="post"
	action="/seamproject/accueil.seam"
	enctype="application/x-www-form-urlencoded"><input type="hidden"
	name="j_id4" value="j_id4" />
<div class="dr-pnl rich-panel " id="j_id4:j_id5">
<div class="dr-pnl-h rich-panel-header " id="j_id4:j_id5_header">Caracteriser</div>
<div class="dr-pnl-b rich-panel-body " id="j_id4:j_id5_body">
<table>
	<tr>
		<th>choix 1</th>
 
<!-- ici il y a les 3 combo box et le bouton , j ai tout coupé -->
 
<div id="all_menubar"> <!-- footer -->
<table border="0" cellpadding="0" cellspacing="0"
	class="dr-toolbar-ext rich-toolbar " height="15" id="j_id18"
	width="100%">
	<tr valign="middle">
		<td class="dr-toolbar-int rich-toolbar-item  " style=""><label>
		Creer</label></td>
		<td align="center"><img
			src="images.LineSeparatorImage/DATB/eAE7fv7Ks1dvGYCAm4EHADXDBT8_.seam" /></td>
		<td class="dr-toolbar-int rich-toolbar-item  " style=""><label>
		Afficher</label></td>
		<td width="100%"></td>
		<td class="dr-toolbar-int rich-toolbar-item  " style=""><input
			type="text" name="j_id24" class="barsearch" /></td>
		<td class="dr-toolbar-int rich-toolbar-item  " style=""><input
			type="submit" name="j_id25" value="Search" onclick="return false;"
			class="barsearchbutton" /></td>
	</tr>
</table>
</div>
</div>
</div>
</div>
</body>
 
</html>

**Macmillenium** · 21/01/2009, 16h05

Tu as 2 divs non fermées ...

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
37
38
39
40
41
42
 
<div id="all_all">
<div class="dr-pnl rich-panel all_panel" id="j_id3">
<div class="dr-pnl-b rich-panel-body " id="j_id3_body">
<form id="j_id4" name="j_id4" method="post"
	action="/seamproject/accueil.seam"
	enctype="application/x-www-form-urlencoded"><input type="hidden"
	name="j_id4" value="j_id4" />
<div class="dr-pnl rich-panel " id="j_id4:j_id5">
<div class="dr-pnl-h rich-panel-header " id="j_id4:j_id5_header">Caracteriser</div>
<div class="dr-pnl-b rich-panel-body " id="j_id4:j_id5_body">
<table>
	<tr>
		<th>choix 1</th>
 
<!-- ici il y a les 3 combo box et le bouton , j ai tout coupé -->
 
<div id="all_menubar"> <!-- footer -->
<table border="0" cellpadding="0" cellspacing="0"
	class="dr-toolbar-ext rich-toolbar " height="15" id="j_id18"
	width="100%">
	<tr valign="middle">
		<td class="dr-toolbar-int rich-toolbar-item  " style=""><label>
		Creer</label></td>
		<td align="center"><img
			src="images.LineSeparatorImage/DATB/eAE7fv7Ks1dvGYCAm4EHADXDBT8_.seam" /></td>
		<td class="dr-toolbar-int rich-toolbar-item  " style=""><label>
		Afficher</label></td>
		<td width="100%"></td>
		<td class="dr-toolbar-int rich-toolbar-item  " style=""><input
			type="text" name="j_id24" class="barsearch" /></td>
		<td class="dr-toolbar-int rich-toolbar-item  " style=""><input
			type="submit" name="j_id25" value="Search" onclick="return false;"
			class="barsearchbutton" /></td>
	</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

**Faiche** · 21/01/2009, 16h20

ils sont dans ce que j'ai supprimé, désolé, le problème ne vient pas de la.

Code xhtml :

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
<head>
<title>Hermes Alpha</title>
</head>
 
<body>
<div id="all_all">
<div class="dr-pnl rich-panel all_panel" id="j_id3">
<div class="dr-pnl-b rich-panel-body " id="j_id3_body">
<form id="j_id4" name="j_id4" method="post"
	action="/seamproject/accueil.seam"
	enctype="application/x-www-form-urlencoded"><input type="hidden"
	name="j_id4" value="j_id4" />
<div class="dr-pnl rich-panel " id="j_id4:j_id5">
<div class="dr-pnl-h rich-panel-header " id="j_id4:j_id5_header">Caracteriser</div>
<div class="dr-pnl-b rich-panel-body " id="j_id4:j_id5_body">
<table>
	<tr>
		<th>choix 1</th>
 
<!-- ici il y a les 3 combo box, j ai tout coupé -->
 
<!-- ################## c'est ce que j'avais coupé ### -->
<input type="submit" name="j_id4:j_id16" value="Continuer" /></div>
</div>
<input type="hidden" name="javax.faces.ViewState"
	id="javax.faces.ViewState" value="j_id3" /></form>
<!-- ################## c'est ce que j'avais coupé ### -->
 
<div id="all_menubar"> <!-- footer -->
<table border="0" cellpadding="0" cellspacing="0"
	class="dr-toolbar-ext rich-toolbar " height="15" id="j_id18"
	width="100%">
	<tr valign="middle">
		<td class="dr-toolbar-int rich-toolbar-item  " style=""><label>
		Creer</label></td>
		<td align="center"><img
			src="images.LineSeparatorImage/DATB/eAE7fv7Ks1dvGYCAm4EHADXDBT8_.seam" /></td>
		<td class="dr-toolbar-int rich-toolbar-item  " style=""><label>
		Afficher</label></td>
		<td width="100%"></td>
		<td class="dr-toolbar-int rich-toolbar-item  " style=""><input
			type="text" name="j_id24" class="barsearch" /></td>
		<td class="dr-toolbar-int rich-toolbar-item  " style=""><input
			type="submit" name="j_id25" value="Search" onclick="return false;"
			class="barsearchbutton" /></td>
	</tr>
</table>
</div>
</div>
</div>
</div>
</body>
 
</html>

Je suis désolé, j'ai un peu l'impression de te faire perdre ton temps, mais je suis vraiment débutant en web.

**Macmillenium** · 21/01/2009, 16h33

Envoyé par Faiche

Comme on le voit, tout se trouve dans un div all_all et un panel all_panel.

pour all_all ok mais

- Dans le code CSS all_panel est déclaré comme id et non pas classe contrairement à ton code html

- Et même si c'est un classe, tu as :

Code html :

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

1
2
 
<div class="dr-pnl rich-panel all_panel" id="j_id3">

On ne peut affecter que deux classes en même temps, c'est à dire dr-pnl et rich-panel => all_panel est ignoré dans ce cas.

Voici ce que je peut te proposer :

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
 
html,body {
	width: 100%;
        height:100%;
	background-image: url("/seamproject/img/default-bg.jpg");
	background-repeat: repeat-x;
}
 
/* pour centrer la page */
#all_all {
        position:absolute;
        height:100%;
	width: 80%;
	left:50%;
        margin-left:-40%;
}
 
/* style de mon cadre à compléter :p */
#j_id3 {
height:100%;	
}
 
/* style d'un de mes composants, qui doit etre en bas du cadre */
#all_menubar {
	position: relative;
	bottom: 5px;
}

vérifie si j_id3 n'a pas déjà de height quelque part dans tes codes

**12monkeys** · 24/01/2009, 15h08

Bonjour

Envoyé par Macmillenium

On ne peut affecter que deux classes en même temps, c'est à dire dr-pnl et rich-panel => all_panel est ignoré dans ce cas.

Ah bon, c'est la première fois que j'entends ça...

Et pourtant cet exemple fonctionne :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test</title>
<style type="text/css">
.gras { font-weight:bold; }
.soulign { text-decoration : underline; }
.roug { color:red; }
</style>
</head>
 
<body>
 
<p class="gras soulign roug">
texte
</p>
 
</body>
</html>

Ou j'ai mal compris ce que tu voulais dire ?

[Débutant] positionnement de la page

Positionnement en CSS

Discussions similaires

Partager

Partager