Layout avec header s'ajustant au contenu

**Erakis** · 27/01/2010, 16h02

Bonjour à tous,

Je vois souvent des layout basé sur ce modèle

Code :

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

1
2
3
4
5
6
7
8
 
<div id="container">
  <div id="header">Header</div>
  <div id="wrapper">
    <div id="content">Content</div>
  </div>
  <div id="leftNavigation">Navigation</div>
</div>

Toutefois, ce modèle présente un problème majeur lorsque le div "Content" contient une table plus large que le viewport.

Dans ce cas-là, le content s'étire et une scrollbar apparait en bas de l'écran pour défiler horizontalement. À moins qu'il y ait un "overflow :hidden", mais je ne veut pas cacher le contenu de ma table.

Donc si j'ai bien compris, pour corriger ce problème. Il me faudrait un modèle dans ce genre ?

Code :

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

1
2
3
4
5
6
7
8
9
<div id="container">
  <div id="header">Header
      <div id="wrapper">
          <div id="content">Content</div>
      </div>
      <div id="leftNavigation">Navigation</div>
  </div>
</div>

Et si mon header doit avoir une hauteur de 100 pixel, alors je dois définir son padding à 100 pixels et une marge (width et height) de 0 px. Ensuite y placer mon image de background.

Dites-moi si je suis sur la bonne piste. Ou si vous voyez un autre problème ?

Merci

**boboss123** · 28/01/2010, 11h19

salut,

difficile de t'aider plus sans plus d'infos : comment veux-tu qu'on t'aide si tu ne mets pas le CSS associé ?

aussi, qu'est-ce que tu appeles le "viewport" ?

... bien que je n'ai pas toutes les infos, a mon avis tu n'es pas dans la bonne direction (en general on n'utilise pas le padding pour positionner les blocs mais plutot le margin et le float)

un petit tuto sur le positionnement des bloc : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

**Erakis** · 28/01/2010, 16h24

En fait, je ne parlais pas du CSS comme tel. Je parlais plus d'un problème de DIV successifs dans un layout particulier.

C'est qu'à mon avis, peut importe le CSS que j'utiliserai ici, il est impossible que mon header s'ajuste au contenu d'un DIV en-dessous de lui.

Le ViewPort ici est ce qui est visible dans la fenêtre du navigateur. Donc, ce qui déborde de l'écran n'est pas compris dans le viewport.

Dans le cas du header, si je lui met un MARGING-TOP, mon image de background sera elle aussi soumis à ce margin, or que j'aimerais que l'image de mon header commence à 0px en top et 0px en left.

Donc, pour réexpliquer mon problème, je veux bien mettre du CSS. Si cela peut vous mener à une piste.

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
<style type="text/css">
html,body
{
   margin:0;
   padding:0
}
div#header
{
   position:relative;
   height:80px;
}
div#wrapper
{
   float:left;
   width:100%
}
div#Menu
{
   float:left;
   width:33%;
   margin-left:-100%
}
div#content
{
   margin: 0px 0px 0px 200px
   clear :right;
}
</style>

<div id="container">
  <div id="header">Header (image de background répété en x)</div>
  <div id="wrapper">
    <div id="menu">Menu</div>
    <div id="content">Content (insérer la table hyper large ici)</div>
  </div>
  <div id="leftNavigation">Navigation</div>
</div>

Donc, si j'insert une table qui a disons 1500 pixels de large dans le div content et que ma fenêtre à 1024 pixels de large, alors ce dernier s'élargira pour afficher la table et la scrollbar en horizontal sera visible.

Toutefois, le header lui restera à la taille du viewport. Il ne suivera pas la largeur du content. Donc l'image de background se répétera seulement à la largeur du viewport et non à la largeur de son enfant le plus large (dans ce cas-ci le content). Bref, il manquera un bout d'image en largeur au header.

**boboss123** · 29/01/2010, 11h37

Si j'ai bien tout compris, le probleme est que la largeur de chaque bloc est défini en fonction de celle du parent et non pas de l'enfant
=> donc la seule solution que je vois c'est de figer la taille de la balise mère de façon a être sure que le tableau rentre :

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
<!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" >
 
 
<head>
	<title>TEST</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" title="montheme1" href="../theme1.css" />
 
	<style type="text/css">
		html,body{
		   margin:0;
		   padding:0;
		}
 
		body{
			min-width:1500px; /* ne marche pas sous ancienne version de IE */
		}
 
		table{
			border-collapse:collapse;
			border:none;
		}
 
		th, td{
			border:2px solid black;
			padding:0.1em 0.9em;
			margin:0
		}
 
		#header{
			margin:0;
			padding:0;
			height:80px;
			background-color:black;
			color:white;
		}
 
		#menu{
			float:left;
			width:100%;
			margin:0;
			padding:0;
			background-color:red;
		}
 
		#wrapper{
			clear:both; 
			margin:0;
			padding:0;
			background-color:green;
		}
 
		#content{
		   margin: 0px 0px 0px 200px;
		   padding:1em;
		   background-color:yellow;
		}
 
		#leftNavigation{
			float:left;
			width: 200px;
			margin:0;
			padding:0;
			background-color:blue;
		}
 
		#footer{
			margin:0;
			padding:1em;
			background-color:black;
			color:white;
		}
 
		.spacer { 
			margin:0;
			padding:0;
			clear:both; 
		} 
 
		.spacer hr{     
		  display: none; 
		}
 
	</style>
</head>
 
<body>
 
	<div id="header">Header (image de background répété en x)</div>
	<div id="menu">Menu</div>
 
	<div id="wrapper">
		<div id="leftNavigation">
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
		</div>
 
		<div id="content">
			<table>
				<tr>
					<td>mon texte hahaha</td>
					<td>mon texte hahaha</td>
					<td>mon texte hahaha</td>
					<td>mon texte hahaha</td>
					<td>mon texte hahaha</td>
					<td>mon texte hahaha</td>
					<td>mon texte hahaha</td>
					<td>mon texte hahaha</td>
					<td>mon texte hahaha</td>
					<td>mon texte hahaha</td>
					<td>mon texte hahaha</td>
					<td>mon texte hahaha</td>
					<td>mon texte hahaha</td>
					<td>mon texte hahaha</td>
 
				</tr>
			</table>
		</div>
 
		<div class="spacer"></div><!-- utile si leftNavigation est plus haut que content -->
	</div>
 
	<div id="footer">footer</div>
</body>
</html>

PS: attention dans ton code css il manque des ; et Menu doit s'ecrire menu (mais je suppose que tu as du ecrire ça a la va vite)

**boboss123** · 29/01/2010, 11h55

je viens de pensé a un truc : pour qu'un bloc s'adapte a la taille de l'élément enfant, il faut que celui-ci soit en float

donc en définissant tous les elements parents à ton tableau en float:left; tu peux faire un design qui s'adapte a celui-ci

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
 
<!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" >
 
 
<head>
	<title>TEST</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" title="montheme1" href="../theme1.css" />
 
	<style type="text/css">
		html,body{
		   margin:0;
		   padding:0;
		}
 
		body{
			float:left;
		}
 
		table{
			border-collapse:collapse;
			border:none;
		}
 
		th, td{
			border:2px solid black;
			padding:0.1em 0.9em;
			margin:0
		}
 
		#header{
			/*width:100%;*/
			margin:0;
			padding:0;
			height:80px;
			background-color:black;
			color:white;
		}
 
		#menu{
			float:left;
			width:100%;
			margin:0;
			padding:0;
			background-color:red;
		}
 
		#content{
			clear:left; 
			float:left;
			margin:0;
			padding:1em;
			background-color:yellow;
		}
 
		#footer{
			clear:left; 
			margin:0;
			padding:1em;
			background-color:black;
			color:white;
		}
 
		.spacer { 
			margin:0;
			padding:0;
			clear:both; 
		} 
 
		.spacer hr{     
		  display: none; 
		}
 
	</style>
</head>
 
<body>
 
	<div id="header">Header (image de background répété en x)</div>
	<div id="menu">Menu</div>
 
	<div id="content">
		<table>
			<tr>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
			</tr>
		</table>
		<p> salut ça va ?</p>
	</div>
 
	<div class="spacer"></div><!-- utile si leftNavigation est plus haut que content -->
 
	<div id="footer">footer</div>
</body>
</html>

Par contre avec cette methode, il me semble qu'il est impossible de mettre le menu de gauche ...

EDIT : fonctionne sur tous les navigateur sauf sur IE

=> le header ne prend pas toute la place disponible car il a une hauteur défini et le menu du haut ne prend pas toute la place disponible car il est en float...
VOici une autre solution qui marche meme avec IE :

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
 
<!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" >
 
 
<head>
	<title>TEST</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" title="montheme1" href="../theme1.css" />
 
	<style type="text/css">
		html,body{
		   margin:0;
		   padding:0;
		}
 
		body{
			float:left;
		}
 
		table{
			border-collapse:collapse;
			border:none;
		}
 
		th, td{
			border:2px solid black;
			padding:0.1em 0.9em;
			margin:0
		}
 
		table, p{
			margin: 1em;		
		}
 
		#header{
			margin:0;
			padding:0;
			/*height:80px; /* bug sous IE : on ne peut pas imposer la hauteur */
			background-color:black;
			color:white;
		}
 
		#menu{
			margin:0;
			padding:0;
			background-color:red;
		}
 
 
		#content{
			float:left;
			margin:0;
			padding:0;
			background-color:yellow;
		}
 
		#footer{
			margin:0;
			padding:1em;
			background-color:black;
			color:white;
		}
 
 
	</style>
</head>
 
<body>
 
	<div id="content">
		<div id="header"><div style="height:80px;">Header (image de background répété en x)</div></div>
		<div id="menu">Menu</div>
 
		<table>
			<tr>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
				<td>mon texte hahaha</td>
			</tr>
		</table>
 
		<p> salut ça va ?</p>
 
		<div id="footer">footer</div>
	</div>
</body>
</html>

**Erakis** · 29/01/2010, 20h07

Merci pour votre aide c'est apprécié

La première façon n'est pas une solution pour moi, puisque ce site sera plus souvent qu'autrement utilisé avec IE.

La deuxième solution semble bien, la largeur du header suit bien le contenu. Vous avez bien compris ce que je voulais.

Toutefois je n'ai plus de menu à gauche. Je dois absolument avoir un menuà la gauche. Ce dernier peut avoir une largeur fixe, disons 180 pixels.

J'ai essayé un tas d'autres combinaisons, mais sans succès. Je n'arrive pas à créer le layout désiré et que le header s'ajuste au contenu.

Ce n'est pas mon genre, mais je crois que j'abandonne. Comme votre solution 2 fonctionne, mais que je n'ai plus de menu gauche, j'ai pensé utilisé un menu glissant et ça aurait réglé le problème. Néanmoins, je penses que les utilisateurs de ce site intranet trouveront que c'est agaçant.

À titre de solution finale, je vais peut-être utiliser les bonnes vieilles tables qui elles ne me pose jamais trop de de problèmes. Cela pourrait ressembler à :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
¸
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr id="header" style="height :80px; background :url(Images/header.gif;) repeat-x;">
       <td>Header</td>
  </tr>
   <tr>
      <td>
            <div style="float :left; width :160px;">Menu de gauche</div>
            <div style="float :left; clear :right;">Contenu central</div>
      </td>
   </tr>
</table>

On dit souvent que les tables nécessitent plus de markup que du CSS. Touteofis, ici ce ne sera pas un problème.

J'ai mis mon menu et mon contenu central dans un DIV, puisque lorsque je voudrai imprimer, j'aurais qu'à appliquer un "display :none" au #header.

Et voilà. Table = 1, CSS = 0 ! C'est moche, la plupart du temps je reviens à utiliser les table à cause de problèmes similaires. J'aurais bien aimé faire sans, mais je n'ai pas la moindre idée de comment contourner le problème.

**boboss123** · 01/02/2010, 09h13

désolé mais je crois qu'il n'y a pas d'autre solution.

Aussi essayer de positionner ou de definir la largeur des blocs a l'aide de javascript pourrait etre une solution mais c'est barbare...

**Erakis** · 01/02/2010, 16h29

Et j'ai même remarqué que mes deux blocs divs placé en float ne fonctionne pas sous FireFox.

Code :

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

1
2
3
 
<div style="float :left; width :160px;">Menu de gauche</div>
<div style="float :left; clear :right;">Contenu central</div>

Dans Internet Explorer tout fonctionne bien à moins que le viewport soit plus petit que la taille du ContenuCentrale. Évidemment c'est un problème ! À ce moment là, le contenu centrale se déplace sous le menu de gauche. Pas très pratique LOL

Dans FireFox, c'est le même problème, mais peu importe la situation. Le menu centrale est toujours sous le menu de gauche.

Donc, je me résignerai à faire :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr id="header" style="height :80px; background :url(Images/header.gif;) repeat-x;">
       <td colspan="2">Header</td>
  </tr>
   <tr>
      <td id="menuGauche" style="width :160px">Menu de gauche<td>
      <td>Contenu centrale<td>
   </tr>
</table>

Et pour ce qui est de retirer le menu de gauche (lorsque j'imprimerai), je placerai dans la StyleSheet un "#menuGauche {width :0px;}" à ma cellule. Barbare mais fonctionnel !

**boboss123** · 01/02/2010, 16h40

Envoyé par Erakis

Et pour ce qui est de retirer le menu de gauche (lorsque j'imprimerai), je placerai dans la StyleSheet un "#menuGauche {width :0px;}" à ma cellule. Barbare mais fonctionnel !

"#menuGauche {display: none;}" => ça serait pas mieux ?