[XHTML - CSS] Mise en page complexe - problèmes

**Candygirl** · 04/06/2008, 20h09

Envoyé par doudouallemand

- mes 3 colonnes ne s'affichent pas correctement (celle de droite notamment)

Tu donnes comme tailles de colonne 25%, 25% et 815px. En 1280, 25% => 320px
2*320px + 815 = 1435px. Donc il n'y a pas la place de mettre les 3 colonnes les unes à côté des autres...

Envoyé par doudouallemand

- la hauteur de la page, bien que n'ayant aucun contenu, fait deux fois la taille du navigateur et génère donc l'affichage du scrollbarre.

Tu donnes une hauteur de 100% à ton pied de page pour quelle raison ?

Forcément que si tes colonnes se mettent les unes en-dessous des autres et que chaqun de tes enfants de #page (auquel tu as attribué un height de 100% inaproprié pour ce type montage puisqu'on joue avec le min-height) a une hauteur de 100%, on va dépasser aisément les 100%...

Avant de jouer avec le pied de page et les hauteurs en % il faut déjà que tu aies une structure correcte pour tes 3 colonnes.

**doudoustephane** · 05/06/2008, 01h47

Envoyé par Candygirl

Tu donnes comme tailles de colonne 25%, 25% et 815px. En 1280, 25% => 320px
2*320px + 815 = 1435px. Donc il n'y a pas la place de mettre les 3 colonnes les unes à côté des autres...

Tu donnes une hauteur de 100% à ton pied de page pour quelle raison ?

Forcément que si tes colonnes se mettent les unes en-dessous des autres et que chaqun de tes enfants de #page (auquel tu as attribué un height de 100% inaproprié pour ce type montage puisqu'on joue avec le min-height) a une hauteur de 100%, on va dépasser aisément les 100%...

Avant de jouer avec le pied de page et les hauteurs en % il faut déjà que tu aies une structure correcte pour tes 3 colonnes.

cela ne change rien... désolé

**Erwan31** · 05/06/2008, 02h41

Bonsoir,

Envoyé par Er3van

C'est un conteneur particulier, qui n'est pas géré de la même façon qu'un div, et nuit à l'accessibilité.

Que dans certaines situations Er3van. C-à-d quand le tableau est mal linéarisé
ou qu'ils sont imbriqués de tel manière à ce que cela nuit à l'accessibilité.
Voir la page 98 de RGAA (ancienne version le site de la dgme étant indisponible).
Des explications sur le site d'Accessiweb.

@Doudouallemand: Si tu ne veux pas être trop souvent confronté à ce genre de problèmes, il va falloir que tu penses un peu à te former

Le heigh:100% de html et body correspond à la hauteur de la zone d'affichage. Or la totalité des hauteur des div est bien supérieure (100% pour les colonnes, cela correspond à la hauteur de la zone d'affichage pusique que ces 100% ont pour hauteur référente les 100% du body, à cela tu ajoutes encore 100%, donc forcément ça dépasse.)
Tu dois sous diviser les 100%: exemple 60% pour tes colonnes + 20% pour le
piedpage3 et 10% pour les 2 premiers blocs à laquelle il faudra ajouter les padding et border verticaux s'il y a, sachant que la totalité ne soit pas dépasser 100%.

Tu dois clearer (dégager) le pied de page car les 3 colonnes sont flottantes:
Lire les commentaires

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
div#piedpage3 
{
/* < inutile  width: 100%;
    min-height:100%;
    background-color:#FFFFFF;
    height:100%;  inutile > */
    position:relative; /*que si tu as des enfants positionnés de manière absolue*/
    margin:0 auto; /*inutile si la largeur est à 100% ou à auto (par defaut)*/
    padding-bottom: 50px;
    overflow:auto; /*que si tu as des enfants flottants pour qu'il englobe ses enfants*/
    clear:left;
}

**doudoustephane** · 05/06/2008, 12h22

Envoyé par Erwan31

Bonsoir,

Que dans certaines situations Er3van. C-à-d quand le tableau est mal linéarisé
ou qu'ils sont imbriqués de tel manière à ce que cela nuit à l'accessibilité.
Voir la page 98 de RGAA (ancienne version le site de la dgme étant indisponible).
Des explications sur le site d'Accessiweb.

Merci de cette info bien utile.

Envoyé par Erwan31

@Doudouallemand: Si tu ne veux pas être trop souvent confronté à ce genre de problèmes, il va falloir que tu penses un peu à te former

c'est justement ce que je suis en train de faire avec cette mise en forme, d'où toutes mes questions !

Envoyé par Erwan31

Le heigh:100% de html et body correspond à la hauteur de la zone d'affichage. Or la totalité des hauteur des div est bien supérieure (100% pour les colonnes, cela correspond à la hauteur de la zone d'affichage pusique que ces 100% ont pour hauteur référente les 100% du body, à cela tu ajoutes encore 100%, donc forcément ça dépasse.)
Tu dois sous diviser les 100%: exemple 60% pour tes colonnes + 20% pour le
piedpage3 et 10% pour les 2 premiers blocs à laquelle il faudra ajouter les padding et border verticaux s'il y a, sachant que la totalité ne soit pas dépasser 100%.

Tu dois clearer (dégager) le pied de page car les 3 colonnes sont flottantes:
Lire les commentaires

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
div#piedpage3 
{
/* < inutile  width: 100%;
    min-height:100%;
    background-color:#FFFFFF;
    height:100%;  inutile > */
    position:relative; /*que si tu as des enfants positionnés de manière absolue*/
    margin:0 auto; /*inutile si la largeur est à 100% ou à auto (par defaut)*/
    padding-bottom: 50px;
    overflow:auto; /*que si tu as des enfants flottants pour qu'il englobe ses enfants*/
    clear:left;
}

Pour ces commentaires, je le sais, j'ai essayé toutes les configurations possibles...

**Erwan31** · 05/06/2008, 12h47

Bonjour,
pour qu'on t'aider plus efficacement il faudrait donner la totalité du code XHTML sans PHP) et du code CSS.
Maintenant tu ne précises pas ce qui bloque.

**doudoustephane** · 05/06/2008, 13h44

Envoyé par Erwan31

Bonjour,
pour qu'on t'aider plus efficacement il faudrait donner la totalité du code XHTML sans PHP) et du code CSS.
Maintenant tu ne précises pas ce qui bloque.

je vais vous le fournir après manger alors
pour ce qui bloque, c'est toujours le pied de page interne à la div centrale, et également la mise en colonne des 3 div en questions.
j'annoterai les endroits dans le code où je parviens pas à résoudre.
merci

**doudoustephane** · 05/06/2008, 20h38

Voici donc comme demandé tout mon code xhtml :

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
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!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>Accueil</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1"/>
<meta name="title" content="contenu"/>
<meta name="description" content="."/>
<meta name="keywords" content="."/>
<meta name="owner" content="."/>
<meta name="Publisher" content="."/>
<meta name="author" lang="fr" content=""/>
<meta name="Reply-to" content=""/>
<meta name="Indentifier-URL" content="http://www.monsite.fr/"/>
<meta name="Date" content="June 2008"/> 
<meta name="robots" content="index,follow"/>
<meta name="revisit_after" content="1"/>
<meta name="robots" content="ALL"/> 
<link rel="stylesheet" type="text/css" href="includes/style.css"/>
</head>

<body>
<div id="page3">
	<div id="premier-element">
			<!-- Haut de page : header.php -->
<!-- Affichage des éléments Flash dans swfobject pour être compatible avec ie et tous les navigateurs -->
<script type="text/javascript" src="includes/script/swfobject.js"></script>
<div id="flashcontent">
	<strong>
Vous visualisez ce message car vous ne disposez pas de Flash.<br/>
Merci de le télécharger en <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">cliquant ici</a>.
</strong>
</div>
<script type="text/javascript">
	var so = new SWFObject("images/banner.swf?cat=1", "banner", "815", "137", "8", "");
	so.addParam("wmode", "transparent");
	so.addParam("quality", "high");
	so.addParam("menu", "false");
	so.addParam("loop", "true");
	so.addParam("play", "true");
	so.addParam("valign", "top");
	so.write("flashcontent");
</script>
<!-- Fin : Haut de page : header.php -->
	</div>
	<div id="style_navigation">
			<!-- Barre de navigation : navigation.php -->
<br/>
&nbsp;
<div class="col1_navigation"><!-- mettre sur trois colonnes les div suivants -->
	&nbsp;coucou
</div>
<div class="col2_navigation">
	<div class="col2_navigation_gauche">
		<a href="index.php" class="navigation_violet">lien 1</a> 
		&nbsp;&nbsp; 
		<a href="lien2.php" class="navigation_bleu">lien 2</a> 
		&nbsp;&nbsp; 
		<a href="lien3.php" class="navigation_blanc">lien3</a>&nbsp;|&nbsp;<a href="lien4.php" class="navigation_blanc">lien4</a>&nbsp;|&nbsp;<a href="lien5.php" class="navigation_blanc">lien5</a>	</div>
	<div class="col2_navigation_droite">
				<a href="lien6.php" class="navigation_jaune">lien6</a> 
	</div>
</div>
<div class="col3_navigation">
	&nbsp;
</div><!-- Fin des trois colonnes de navigation -->
<br/>
&nbsp;
<!-- Fin : Barre de navigation : navigation.php -->
	</div>
	<div><!-- Début des div à mettre en 3 colonnes principales -->
		<div id="colonne1">
			<!-- Colonne de gauche : column_left.php -->
<div class="fond_colonne_gauche">
	&nbsp;
</div>
<!-- Fin : Colonne de gauche : column_left.php -->		</div>
		<div class="colonne2">
			<span style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:10px;border:5px;">Site bientôt en ligne!</span>		</div>
		<div class="colonne3">
			<!-- Colonne de droite : column_right.php -->
<div class="fond_colonne_droite">
	&nbsp;
</div>
<!-- Fin : Colonne de droite : column_right.php -->		</div>
	</div>
			<div id="piedpage3"><!-- pied de page de la colonne 2 -->
				<!-- Bas de page : footer.php -->
<div class="texte_footer">
	<br/>
	<a href="foot1.php" class="lien_footer">foot1</a>&nbsp;|&nbsp;<a href="foot2.php" class="lien_footer">foot2</a>&nbsp;|&nbsp;<a href="foot3.php" class="lien_footer">foot3</a>&nbsp;|&nbsp;<a href="foot4.php" class="lien_footer">foot4</a>&nbsp;|&nbsp;<a href="foot5" class="lien_footer">foot5</a><br/><a href="foot6.php" class="lien_footer">foot6</a>&nbsp;|&nbsp;<a href="foot7.php" class="lien_footer">foot7</a>&nbsp;|&nbsp;<a href="foot8.php" class="lien_footer">foot8</a>	<br/>
	&nbsp;
</div>
<!-- Fin : Bas de page : footer.php -->
			</div><!-- Fin des 3 colonnes -->
</div>
</body>
</html>

et mon code css :

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
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
 
html, body {
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
	background-color: #FFFFFF;
	color: #000000;
}
 
div#page3 
{
	position: relative;
	width: 100%;
	height:100%;
	margin: 0 auto;
	min-height: 100%;
}
 
div#page3 #premier-element 
{
	margin-top: 0; 
	background-image:url(../images/slice_banner.jpg);
	background-color:#000000;
	width:100%;
	background-repeat:repeat-x;
	border:0;
	padding:0;
}
 
#colonne1
{
	/*position:absolute;*/
	/*left:0;*/
	width:5%;
	height:100%;
	z-index:1;
	float:left;
	text-align:center;
}
 
#colonne2
{
	/*position:absolute;*/
	/*clear:both;*/
	float:left;
	/*left:25%;*/
	width:815px;
	height:100%;
	background-color:#FFFFFF;
	padding:10px;
	margin:10px;
	text-align:center;
}
 
#colonne3
{
	/*clear:both;*/
	float:right;
	/*position:absolute;*/
	height:100%;
	width:5%;
	/*right:0;*/
	z-index:1;
	text-align:center;
}
 
div#piedpage3 
{
	width: 100%;
	min-height:100%;
	background-color:#FFFFFF;
	position:relative;
	margin:0 auto;
	height:100%;
	z-index:0;
	padding-bottom: 50px;
	overflow:auto;
}
 
#flashcontent
{
	float:inherit;
	text-align:center;
}
 
a.lien_footer
{
	color:#838281;
	font-family:Verdana;
	font-weight:bold;
	font-size:11px;
	text-decoration:none;
}
 
a:hover.lien_footer	
{
	color:#FFFFFF;
	font-family:Verdana;
	font-weight:bold;
	font-size:11px;
	text-decoration:none;
}
 
a.navigation_blanc
{
	color:#FFFFFF;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
}
 
a:hover.navigation_blanc	
{
	color:#FDBDEA;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
}
 
a.navigation_violet
{
	color:#B02D89;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
}
 
a:hover.navigation_violet	
{
	color:#FD3BC3;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
}
 
a.navigation_jaune
{
	color:#FEF400;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
	text-align:right;
	position:relative;
	float:right;
}
 
a:hover.navigation_jaune	
{
	color:#FFFA83;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
	text-align:right;
	position:relative;
	float:right;
}
 
a.navigation_bleu
{
	color:#33BBF5;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
}
 
a:hover.navigation_bleu	
{
	color:#AFE6FE;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
}
 
.fond_colonne_gauche 
{
	width:100%;
	height:100%;
	background:url(../images/background_gauche.jpg);
	background-position:right top;
	background-repeat:repeat;
	z-index:1;
}
 
.fond_colonne_droite 
{
	width:100%;
	height:100%;
	background:url(../images/background_droite.jpg);
	background-position:left top;
	background-repeat:repeat;
	z-index:1;
}
 
.cote_banniere
{
	background-image:url(../images/slice_banner.jpg);
	background-color:#000000;
	width:100%;
	background-repeat:repeat-x;
	border:0;
	border-bottom:0;
	border-left:0;
	border-right:0;
	border-top:0;
}
 
.pos_relative_left
{
	position:relative;
	float:left;
}
 
#style_navigation
{
	width:100%;
	background-color:#000000;
}
 
.col1_navigation
{
	width:10%;
	height:100%;
	float:left;
	left:0;
}
 
.col2_navigation
{
	width:815px;
	background-color:#000000;
	color:#FFFFFF;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
}
 
.col2_navigation_gauche
{
	float:left;
	width:70%;
	vertical-align:inherit;
	background:inherit;
}
 
.col2_navigation_droite
{
	float:right;
	width:20%;
	vertical-align:inherit;
	background:inherit;
}
 
.col3_navigation
{
	width:10%;
	height:100%;
	float:right;
	right:0;
}

Voilà donc tout ce que j'ai refait en div au lieu de tableau.
Si vous pouvez trouver ce qui ne va pas car moi, j'ai cherché dans tous les sens et tout ce que j'ai trouvé sur le net sans résultat.
Pour rappel, ce que je souhaite est indiqué dans le code et, est de mettre la navigation au centre et sur la meme ligne pour le texte, de mettre en trois colonnes les div des colonnes 1,2 et 3 et enfin, de mettre le pied de page en pied de page de la div de colonne 2 et pas de tout le site.
Merci d'avance de votre aide.
doudouallemand

**doudoustephane** · 09/06/2008, 16h51

Bonjour à tous.
Je vous recontact car suite à mon précédent poste, j'ai continuer à faire des essais différents pour parvenir à une solution, sans résultat meilleur que celui-là.
si quelqu'un aurait donc une idée pour m'aider, se serait vraiment sympa.
Merci d'avance
cordialement
doudouallemand

**Erwan31** · 09/06/2008, 17h40

Bonjour,
bon ça va pas, d'une part tu n'a pas nettoyé ta CSS avec des déclarations inutiles que j'ai déjà évoquées et d'autre part tu as des div dont on se demande à quoi ils servent: col3_navigation, col1_navigation par exemple.

Tu as des class sur 2 des colonne alors que tu as un id sur l'autre.
Tes noms de div ne sont pas très appropriée (style_navigation...).
Tu dois identifier (via un id et non une class) des grande division par un nom représentatif (header, content, footer, menu/nav...).
Pour le moment c'est trop fouilli, tu dois simplifier la structure et utilser les div uniquement quand ils sont nécessaire (par la peine d'imbriquer un lien unique dans un div par exemple, autant appliquer le style directement...)

Je sais pas si tu le sais mais les   (non-breaking space > espace insécables) ne devraient être utilisé que pour interdire un retour à la ligne
et les br (break) pour forcer une coupure de ligne dans un paragraphe.
Leur vocation n'est donc pas de créer des espaces.
Pour créer des espaces supplémentaires utiliser les marges latérales,
les marge verticales applicables sur les éléments inline remplacés (img, input...) les éléments de niveau block ou
plus généralement sur les boîtes de bloc (tout élément dont le display est à block)

Tu as attribué des class à tes colonnes 2 et 3 et non les id correspondant.

Pour y voir plus clair, je te conseil d'indenter ton code avec un outil d'indentation automatisé (intégré à certains éditeurs HTML)

font est une propriété hérité, tu n'a pas besoin de le déclarer partout (juste sur le body)

Utilises une liste non-ordonnée (élément UL) pour tes menus et non un simple succession de liens.

[XHTML - CSS] Mise en page complexe - problèmes

CSS

Discussions similaires

Partager

Partager