Site deux colonnes hauteurs extensible

**Rayono** · 30/05/2008, 15h17

Bonjour,

Ma question va surment vous paraitre debile mais je n'arrive pas a faire un site tout bète du genre :

+--------------------------+
| ENTETE |
+--------------------------+
|MENU | CONTENU |
+--------------------------+
| PIED |
+--------------------------+

Dont le menu et le contenu soit extensible en hauteur sans foutre en l'air la mise en page.

Vous devez vous dire "encore un qui n'a pas cherché on trouve plein de tuto sur le net..." pourtant j'ai bien cherché un peu partout je n'y arrive pas.

Mon menu est en fait un tableau, avec un background-image mais qui ne veut pas se repetter jusqu'en bas (que le contenu est trop important)

Bon a la base je ne voulais pas vous c/c le code mais finalement je me rend compte qu'en ecrivant ces lignes le plus simple sera quand meme de faire ca...

index.php :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<body>
<div id="container">
	<?php
	include ('_include/header.htm');
	include ('_include/dewslider.htm');			
	include ('_include/menu.htm');
	include ('_include/home.htm');
	include ('_include/footer.htm');
	?>
</div>
</body>

style.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
 
html, body {
	background-color : 		#ffffff;
	font-family : Arial;
	color : #024ea4;
	height: 100%;
	margin : 0;
}
 
body#dewed {
	background-color : 		#f3f4f5 !important;
	font-family : Arial;
	color : #024ea4;
	height: 100%;
	margin : 0;
	}
 
H1 {
	font-family : Arial;
	color : #024ea4;
	font-size: 1.4em;
	background-image: url(img/puce_title.png);	
	background-repeat: no-repeat;
	padding-left : 30px;
}
 
H2 {
	font-family : Arial;
	color : #024ea4;
	font-size: 1.3em;
}
 
p: first-letter {
color: #ff0000;}
 
a
{
	text-decoration: none ;
	color : 		#024ea4;
}
 
a:hover
{
	text-decoration: none ;
	color : 		#0482ff;
}
 
td.menu {
background-image: url(img/td_menu.png);	
padding-left : 40px;
}
 
td.title {
background-image: url(img/td_title.png);	
padding-left : 5px;
}
 
td.fin {
background-image: url(img/td_fin.png);	
padding-left : 40px;
}
 
table#menu {background-image: url(img/td_title.png) !important;	
border: O;
text-align : left; 
height: 100%;
}
 
li.menu {
background-image: url(img/td_menu.png);	
padding-left : 40px;
}
 
li.title {
background-image: url(img/td_title.png);	
padding-left : 5px;
}
 
li.fin {
background-image: url(img/td_fin.png);	
padding-left : 40px;
}
 
ul.menu {
background-image: url(img/td_title.png);
}
 
img {
 border : 0;
}
 
div#container {
	min-height: 100%;
	width: 810px;
	background-color : 		#ffffff;
	padding-top: 5px;
	padding-bottom: 5px;
	margin: 0 auto;
	position : relative;
	}
 
#menutop {
	text-align : right;
	color : #808080;
	float: right;
}
 
#menutop a
{	font-size : 0.8em;
	color : #808080;
}
 
#menutop a:hover
{	font-size : 0.8em;
	color : #000000;
}
 
#header {
	background-image: 		url(../img/header.png);
	height : 				162px;
	width :					810px;
	background-repeat: 		no-repeat;
}
 
#dewslider {
	float: right;
	text-align: center;
	background-color : #ffffff;
	padding-top : 5px;
	padding-left : 5px;
	padding-right : 15px;
	padding-bottom : 5px;
	background-image : url(/img/bg_dewslider.jpg);
	background-repeat: 	no-repeat;
}
 
#insidecontent{
	background-color : 		#f3f3f5;
	background-image :		url(/img/bg.png);
}
 
#content {
}
 
#menu { 
position: absolute;
left:0;
width: 200px;
height: 100%;
min-height: 1000px;
 max-height:1200px;
}
 
#center {
	margin-left: 200px;
	background-image :		url(/img/bg.png);
}
 
#txtcenter {
	margin-left : 10px;}
 
ul#contact
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}
 
ul#contact li
{
	padding: 0 ;
}
 
ul#contact li a
{
	display: block ; 
	width: 200px ;
	line-height: 70px ;
	color: #000 ;
	text-indent: 0px ;
	text-decoration: none ;
	background: url(img/contact1.png) no-repeat 0 0 ;
	border: 0;
}
 
ul#contact li a:hover
{
	width: 200px ;
	background: url(img/contact1.png) no-repeat 0 -70px ; 
	border: 0;
}
 
#footer {
	text-align : center;
	background: url(img/footer.png) no-repeat; 
	height: 35px;
}

La j'avou c'est un peu le foutoire mais c'est a force de chercher des solutions :/

menu.htm :

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
 
<div id="menu"><table cellpadding="0" cellspacing="0">
    <tr><td class="title">&nbsp;</td></tr> 
	<tr><td class="title"><h1><a href="">Stockage </a></h1></td></tr>
    <tr><td class="menu"><a href="">Cloison</a></td></tr>
    <tr><td class="menu"><a href="">Equipements</a></td></tr>
    <tr><td class="menu"><a href="">Plates-formes</a></td></tr>
    <tr><td class="menu"><a href="">Rayonnage semi-lourd / lourd</a></td></tr>
    <tr><td class="menu"><a href="">Rayonnage Universels</a></td></tr>
    <tr><td class="menu"><a href="">Sécurité</a></td></tr>
    <tr><td class="menu"><a href="">Charge lourde</a></td></tr>
	<tr><td class="menu"><a href="">Convoi</a></td></tr>
	<tr><td class="menu"><a href="">Push-back</a></td></tr>
	<tr><td class="menu"><a href="">Rayonnage dynamique leger</a></td></tr>
	<tr><td class="menu"><a href="">Rayonnage dynamique lourd</a></td></tr>
	<tr><td class="fin"><a href="">Transitique</a></td></tr>
	<tr><td class="title">&nbsp;</td></tr>
	<tr><td class="title"><h1><a href="">Agencement</a></h1></td></tr>
	<tr><td class="menu"><a href="">Accessoires</a></td></tr>
	<tr><td class="menu"><a href="">Chariots</a></td></tr>
	<tr><td class="menu"><a href="">Check out</a></td></tr>
	<tr><td class="menu"><a href="">Guidage</a></td></tr>
	<tr><td class="menu"><a href="">Mobilier de magasin</a></td></tr>
	<tr><td class="fin"><a href="">Signalétique</a></td></tr>
	<tr><td class="title">&nbsp;</td></tr>
	<tr><td class="title"><h1><a href="">Contact</a></h1></td></tr>	
	<tr><td class="menu"><a href="/contact.php" title="Contactez-nous" rel="gb_page_center[600, 500]">Par mail ?</a></td></tr>
    <tr><td class="fin"><a href="/coord.htm" title="Nos coordonnées" rel="gb_page_center[500, 200]">Nos coordonnées</a></td></tr>
    <tr><td class="title">&nbsp;</td></tr>
	<tr><td class="title"><h1><a href="/infos.htm" title="Information sur Rayonor" rel="gb_page_center[500, 200]">Nous connaitre</a></h1></td></tr>
    <tr><td class="fin"><a href="/ref.htm" title="Nos références" rel="gb_page_center[700, 500]">Nos références</a></td></tr>	
    <tr><td class="title">&nbsp;</td></tr>
</table>
</div>

Et donc, si j'ajoute des lignes a mon contenu, le menu (backgroud-image) ne se repete pas bien jusqu'au footer :/

Enfin j'attend vos critiques quand a ma facon de faire (je debute evidement) ou des tuto qui me permettrai ca.

Merci d'avance.

**@Ikey** · 30/05/2008, 22h08

1. Enlève ta table et mets une liste.
2. Enlève le div container, qui est complétement inutile puisque qu'il prend le même code que le body.
3. Pour avoir deux colonnes de même hauteur, la seule solution c'est de mettre une image de fond dans un div qui incluera ton "menu" et ton "contenu". Le design web, c'est comme la magie, tout réside dans l'illusion.

**Orgied** · 30/05/2008, 22h54

1. Enlève ta table et mets une liste.

faux...

CSS pour a : display: block;

Même résultat qu'avec un ul.

2. Enlève le div container, qui est complétement inutile puisque qu'il prend le même code que le body.
3. Pour avoir deux colonnes de même hauteur, la seule solution c'est de mettre une image de fond dans un div qui incluera ton "menu" et ton "contenu". Le design web, c'est comme la magie, tout réside dans l'illusion.

Très paradoxal...

Garde le container. Place un background répété (repeat-y) dans container donnat l'illusion de deux zones distinctes. Menu et Content seront en float (left et right) et Footer en Clear: both; pour que Container englobe le tout.

**@Ikey** · 30/05/2008, 23h46

faux...

CSS pour a : display: block;

Même résultat qu'avec un ul.

En informatique ce n'est pas le résultat qui compte mais la méthode. Avec ton raisonnement utiliser des css ou des tableaux ca donne la même chose alors pourquoi mettre des div?? Sacré w3c quand même.

Un table c'est pour faire un tableau, pas de la mise en forme *point barre*
Or un menu c'est une liste de liens...

Très paradoxal...

Garde le container. Place un background répété (repeat-y) dans container donnat l'illusion de deux zones distinctes. Menu et Content seront en float (left et right) et Footer en Clear: both; pour que Container englobe le tout.

Pour toi ca

Code :

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

1
2
3
4
5
6
7
8
9
 
<body>
    <div id="container">
        <div id="header"></div>
        <div id="menu"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

et ca

Code :

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

1
2
3
4
5
6
7
8
9
 
<body>
    <div id="header"></div>
    <div id="container">
        <div id="menu"></div>
        <div id="content"></div>
    </div>
    <div id="footer"></div>
</body>

C'est la même chose et donc paradoxal??
Un peu de sérieux. Surtout que tu donnes la même technique que moi, en superposant 2 backgrounds sachant que le header et le footer auront leur propre fond, ce qui techniquement est horrible.

**Erwan31** · 31/05/2008, 01h05

Bonsoir,

@Orgied: ne sois pas si catégorique, faire le choix de la liste non-ordonnée est plus pertinent qu'un tableau de mise en forme qui ne doit être utilisé que lorsque
CSS associé à un élément adapté se montre trop limité ou peu robuste.

Envoyé par @Ikey

2. Enlève le div container, qui est complétement inutile puisque qu'il prend le même code que le body.

Non ce n'est pas conseillé, le statut particulier de bloc conteneur initial du body fait que son dimensionnement peut provoquer des résultats inattendus
sur certains navigateurs exotiques.

@Rayono
si tu choisis le php pour tes pages, autant les mettre toutes en php y compris les includes. Pourquoi mettre le code de home dans un include?

Tu as quelques déclaration à corriger et améliorer, lis les commentaires.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
html, body {height: 100%;}
 
body {
	font-family: Arial, Helvetica, sans-serif; /*ajouter la police générique en dernière valeur au cas ou le système n'est pas pourvu de l'Arial*/
	color : #024ea4;
	margin : 0;
        padding:0; /*pour les anciennes version d'Opera*/
}
 
body#dewed {
      background: #f3f4f5; /*pourquoi mettre un !important?*/
      height: 100%;
}

Le height 100% du conteneur n'aura aucun effet si html et le bloc conteneur initial (body) ne sont pas eux même dotés d'une hauteur de 100%.

Ne pas dimensionner le body qui est un bloc un peu particulier...

Les propriétés font-machin sont héritées, il n'est pas pas nécessaire de les répéter sur tous les éléments, même chose pour la propriété color.

Pour ce type de demande qui touche la mise en page et la structuration de haut niveau, penser à donner la totalité du code (head...) ou de préférence
une page en ligne

**Orgied** · 31/05/2008, 09h31

Salut,

C'est la même chose et donc paradoxal??
Un peu de sérieux. Surtout que tu donnes la même technique que moi, en superposant 2 backgrounds sachant que le header et le footer auront leur propre fond, ce qui techniquement est horrible.

Sur ce point, je suis d'accord. Mais d'expérience, j'ai rencontré quelques problèmes d'interprétation quand container n'englobe pas footer (si footer a la propriété clear). Je ne peux plus dire sur quelle version d'IE ou Firefox (je penche quand même plus pour IE), mais j'avais un affichage déstructuré.

Pour la liste, du point de vue de la sémantique, j'avoue.

**@Ikey** · 31/05/2008, 13h41

Envoyé par Erwan31

Non ce n'est pas conseillé, le statut particulier de bloc conteneur initial du body fait que son dimensionnement peut provoquer des résultats inattendus sur certains navigateurs exotiques.

Envoyé par Orgied

Sur ce point, je suis d'accord. Mais d'expérience, j'ai rencontré quelques problèmes d'interprétation quand container n'englobe pas footer (si footer a la propriété clear). Je ne peux plus dire sur quelle version d'IE ou Firefox (je penche quand même plus pour IE), mais j'avais un affichage déstructuré.

C'est une des questions métaphysiques de la programmation web.
Doit-ton prendre en considération les 0.1% des personnes qui utilisent des navigateurs exotiques? Je dirais oui en terme d'accessibilité.
Mais doit-on avoir exactement, au pixel près, le même affichage d'un navigateur à l'autre? Je serais moins catégorique surtout si en terme de programmation ca provoque des incohérences. Surcharger un body par un div quand ce n'est pas indispensable c'est pour moi contraire aux règles des css puisque ca tend vers le syndrome de la divitis. Sachant que l'utilisateur lui même peut changer la présentation d'un site en fonction de la configuration de son navigateur, ou par un simple zoom.
Après chacun est libre de faire son choix, en connaissance de cause.

**Erwan31** · 31/05/2008, 14h56

Envoyé par @Ikey

Doit-ton prendre en considération les 0.1% des personnes qui utilisent des navigateurs exotiques? Je dirais oui en terme d'accessibilité.

Ce n'est pas en premier lieu une histoire d'accessibilité mais plutôt de cohérence d'affichage.
La question de prise en compte du faible pourcentage de navigateurs ne devrait pas ici se poser alors que ce problème peut être évacué très simplement sans contraintes particulières.

Envoyé par @Ikey

Mais doit-on avoir exactement, au pixel près, le même affichage d'un navigateur à l'autre? Je serais moins catégorique surtout si en terme de programmation ca provoque des incohérences. Surcharger un body par un div quand ce n'est pas indispensable c'est pour moi contraire aux règles des css puisque ca tend vers le syndrome de la divitis.

lol Aprés la divite aigue la divitis

Plus sérieusement non ce n'est même pas un début de divite

Ce n'est pas surcharger que d'ajouter une simple régle CSS et un
div supplémentaire qui ne vont pas changer grand chose que ce soit en terme de poids ou de complexité de structuration.
Ceci dit même si rien n'interdit de dimensionner le body voire même l'élément racine html, pourquoi prendre des risques inutiles si mineures soient-ils?

Ensuite il faut en effet savoir lâcher prise avec le design figé au pixel prés qui est une vision issue de l'imprimé et qui n'est plus vraiment approprié dans le cadre du média web...
Un site web tel qu'on le conçoit majoritairement n'est ni un œuvre d'art, ni une image que l'on contemple au point de nécessiter un calage au pixel prés (dans la plupart des cas).
Et puis on ne regarde pas un site sur plusieurs navigateurs à la fois.

Envoyé par @Ikey

Sachant que l'utilisateur lui même peut changer la présentation d'un site en fonction de la configuration de son navigateur, ou par un simple zoom.
Après chacun est libre de faire son choix, en connaissance de cause.

Il y a la config du navigateur qui contient en partie quelques
fonctionnalités d'accessibilité mais il ne faut pas oublier qu'il existe aussi
la CSS User qui permet de personnaliser tout ou partie de la présentation
définie par l'auteur.

**@Ikey** · 31/05/2008, 16h31

Envoyé par Erwan31

Ce n'est pas en premier lieu une histoire d'accessibilité mais plutôt de cohérence d'affichage.
La question de prise en compte du faible pourcentage de navigateurs ne devrait pas ici se poser alors que ce problème peut être évacuer très simplement sans contraintes particulière.

lol Aprés la divite aigue la divitis

Plus sérieusement non ce n'est même pas un début de divite

Ce n'est pas surcharger le body que d'ajouter une simple régle CSS et un
div supplémentaire qui ne vont pas changer grand chose que ce soit en terme de poids ou de complexité de structuration.
Ceci dit même si rien n'interdit de dimensionner le body voire même l'élément racine html, pourquoi prendre des risques inutiles si mineures soient-ils?

Ensuite il faut en effet savoir lacher prise avec le design figé au pixel prés qui est une vision issue de l'imprimé et qui n'est plus vraiment approprié dans le cadre du média web...
Un site web tel qu'on le conçoit majoritairement n'est ni un œuvre d'art, ni une image que l'on contemple au point de nécessiter un calage au pixel prés (dans la plupart des cas).
Ensuite on ne regarde pas un site sur plusieurs navigateurs à la fois.

Tout à fait. Il y a la config du navigateur qui contient en partie quelques
fonctionnalités d'accessibilité mais il ne faut pas oublier qu'il existe aussi
la CSS User qui permet de personnaliser tout ou partie de la présentation
définie par l'auteur.

- Une marge de 5 ou 10px pour le contour d'un site ca ne me semble pas une incohérence d'affichage fondamentale.

- Divitis c'est le terme anglais, je ne savais même pas qu'il avait été traduit

- Comme tu le dis il faut savoir lacher prise. Pour moi la surchage est inutile quand ce n'est pas indispensable. Le moindre div qui n'importe rien à la structuration d'une page est considéré comme inutile et donc contraire à l'utilisation des feuilles de style.
De plus, outre les différences d'affichage entre les navigateurs, on a les différences d'affichage suivant les systèmes d'exploitations/Window managers ou bien la résolution de l'écran de l'utilisateur.
Il fut un temps, pas si lointain, où on avait à gérer que 2 résolutions (600*800 et 780*1024). Aujourd'hui on doit en gérer une dizaine (de 600*800 à 1920*1080), il serait complément suicidaire (dans le sens perte de temps) de vouloir tout controler, puisque on peut avoir testé sur 100 configurations différentes, il y en aurait toujours qui ne donneront pas le résultat voulu.

- En suivant les recommendations du w3c je ne vois aucune référence à ce genre de pratique. Et si je regarde tous les sites des organismes compétents sur le sujet, aucun ne l'utilise (il faut bien avoir ses références).

**Erwan31** · 31/05/2008, 17h27

Envoyé par @Ikey

- Une marge de 5 ou 10px pour le contour d'un site ca ne me semble pas une incohérence d'affichage fondamentale.

Je vois pas très bien de quoi tu veux parler.
Les incohérence d'affichage dû au dimensionnement du body seraient imprévisibles même si dans ce cas précis je manque de preuves.

Envoyé par @Ikey

Le moindre div qui n'importe rien à la structuration d'une page est considéré comme inutile et donc contraire à l'utilisation des feuilles de style.

Tu veux dire n'apporte rien

Je vois pas ce qu'il y a de contraire à l'utilisation des feuilles de style.
Un div vide peut très bien être employé pour ajouter un élément de présentation sans que cela nuise à la compréhension du code ou à la restitution du document.

Envoyé par @Ikey

De plus, outre les différences d'affichage entre les navigateurs, on a les différences d'affichage suivant les systèmes d'exploitations/Window managers ou bien la résolution de l'écran de l'utilisateur.

Oui et j'ajouterais qu'il y a aussi des différences d'affichage suivant la version du moteur de rendu (Gecko...) et de la config utilisateur.

Envoyé par @Ikey

Il fut un temps, pas si lointain, où on avait à gérer que 2 résolutions (600*800 et 780*1024). Aujourd'hui on doit en gérer une dizaine (de 600*800 à 1920*1080), il serait complément suicidaire (dans le sens perte de temps) de vouloir tout controler, puisque on peut avoir testé sur 100 configurations différentes, il y en aurait toujours qui ne donneront pas le résultat voulu.

Oui mais à l'heure de la généralisation des appareils portatifs et d'un accés web de plus en plus fréquent sur ces appareils, la tendance est plutôt au design fluide (sans largeur minimum pour une consultation sur petits écrans et de préférence avec une largeur maximum pour des raisons de mise ne page ou d'ergonomie) à condition qu'on en maîtrise les effets.
Si un réduction importante de l'interface n'est pas souhaitable pour diverses raisons et dans la plupart des cas, il faudra prévoir une présentation
adaptée aux petites résolutions via une CSS handheld même si je comprends que ce type de critère ne soit pas unanimement adopté selon le type de site.

Envoyé par @Ikey

- En suivant les recommendations du w3c je ne vois aucune référence à ce genre de pratique. Et si je regarde tous les sites des organismes compétents sur le sujet, aucun ne l'utilise (il faut bien avoir ses références).

De quelle pratique tu veux parler?

**Orgied** · 01/06/2008, 00h37

Votre conversation est intéressante.

J'avais lu un article sur le tao du design web.

Ca m'avait beaucoup appris à l'époque.

Mais force est de constater qu'en milieu professionnel, il semble quasiment impossible d'expliquer ces principes (ainsi que la sémantique) à des clients.

Il en va de même avec la plupart des outils de CMS.

**Rayono** · 02/06/2008, 10h10

Merci pour tous vous conseils

J'ai finalement réussi via :

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
 
<body>
	<div id="bod2">
		<?php
			include ('_include/header.htm');
		?>
		<div id="container">
		<?php
			include ('_include/menu.htm');
			include ('_include/home.htm');
		?>
		</div>
		<?php
			include ('_include/footer.htm');
		?>
	</div>
 
</body>

Avec dans le container l'image en background repeat-y, le reste a quasi pas bougé

Il me reste un petit accro sur IE :

J'ai un espace qui se crée je ne sais pas trop comment. Cela interviens avec ce que je nomme "menutop" dans le css.

Sinon pour repondre en vrac aux questions :

Si j'inclue mon contenu c'est juste pour y voir plus clair car j'etais perdu :p

Si j'avais des "!important" dans le css, c'est parceque je tentais un peu tout et n'importe quoi ca me rendais dingue ^^

Site deux colonnes hauteurs extensible

Dimensionnement en CSS

Discussions similaires

Partager

Partager