[css] centrage vertical du conteneur ?

Question

ghohm

6 Sep 2006 à 12:18

Bonjour à tous,

je cherchais à faire cette mise en page depuis longtemps, alors je me suis lancé ! Forcément ... ça ne fonctionne pas !

J'aimerais le faire, sans hack et si possible sans syntaxes de commentaires conditionnels pour IE ... je sais c'est fou ! Smiley biggol

Mon CSS :

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%
}
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	background-color: #fff;
}

.conteneur {
	min-height : 100%;
	margin: 5px;
	padding: 5px;
	border: 1px solid black;
	background-color: red;
}

.entete {
	height: 8em;
	padding: 5px;
	border: 1px solid black;
	background-color: green;
}

.centre {
	height: auto;
	width: auto;
	padding: 5px;
	margin-top: 5px;
	border: 1px solid black;
	background-color: yellow;
}

	.menu {
		float: left;
		left: 5px;
		width: 150px;
		height: auto;
		margin: 0;
		padding: 5px;
		border: 1px solid black;
		background-color: lightblue;
	}
		.menugauche {
			list-style-type: none;
			margin: 0;
			padding:0;
		}
		.menugauche li {
			margin-bottom: 5px;
		}
		.menugauche a {
			margin: 0 2px;
			color: #000000;
			text-decoration: underline;
		}
		.menugauche a:hover {
			text-decoration: none;
		}
	
	.contenu {
		margin-left: 167px;
		padding: 5px;
		width: auto;
		height: auto;
		border: 1px solid black;
		background-color: orange;
		/*overflow: auto;*/
	}

.piedpage {
	bottom: 5px;
	height: 8em;
	width: auto;
	padding: 5px;
	margin-top: 5px;
	border: 1px solid black;
	background-color: purple;
}

Mon HTML :

<body>
<div class="conteneur">
	<div class="entete">contenu du header</div>
	<div class="centre">
		<div class="menu">
			<p>menu gauche de largeur fixe : 150px</p>
			<ul class="menugauche">
				<li><a href="">Menu 1</a></li>
				<li><a href="">Menu 2</a></li>
				<li><a href="">Menu 3</a></li>
				<li><a href="">Menu 4</a></li>
			</ul>
		</div>
		<div class="contenu">
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			
 			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
		</div> 
	</div>
	<div class="piedpage">contenu du footer</div>
</div>
</body>

Je vais essayer de faire simple ... Smiley sweatdrop

Je voudrais que :

- mon interface prenne la totalité de l'écran du visiteur, donc en 100% avec un margin: 5px;.

- l'en-tête et le pied de page soit de hauteur fixe, mais de largeur variable ... forcément, il faut toujours s'adapter à la résolution de l'écran du visiteur ! Smiley langue

- le centre de ma page, qui contient mes éléments "menu" et "contenu", doit prendre la totalité de la hauteur restante. De plus, en fonction des données que contiendra "contenu" un ascenseur vertical apparaîtra overflow: auto;.

C'est ce que j'ai essayé de faire, mais je pense que mes problèmes sont multiples :

- "conteneur" ne veut pas rester à 100% ... il prend la hauteur de ce qu'il contient ! Smiley ohwell

- il en est de même pour "centre" ! Smiley decu

Je pense que la solution serait que je puisse faire en sorte que ce soit le conteneur qui détermine la taille du contenu et non l'inverse ! Smiley murf

Alors, y a des pros ici ?! Smiley lol

Merci d'avance pour l'aide que vous voudrez bien m'apporter ! Smiley cligne

Gôm
Modifié par ghohm (07 Sep 2006 - 16:17)

Christian Le Bouler

6 Sep 2006 à 12:44

ghohm a écrit :
sans syntaxes de commentaires conditionnels pour IE ... je sais c'est fou !

C'est surtout un peu idiot. quand une technique fiable existe, il vaut mieux l'utiliser.

fvsch

6 Sep 2006 à 13:28

ghohm a écrit :
Je pense que la solution serait que je puisse faire en sorte que ce soit le conteneur qui détermine la taille du contenu et non l'inverse !

Non seulement ça n'est pas possible (ou alors je ne vois pas bien de quoi tu parles), mais en plus ça n'est pas souhaitable.

Pour les commentaires conditionnels, pour une mise en page complexe comme celle-ci il faut les utiliser, du moins si l'on souhaite une compatibilité avec IE6.

a écrit :
Je voudrais que (...) mon interface prenne la totalité de l'écran du visiteur, donc en 100% avec un margin: 5px;.

100% en hauteur ou en largeur ? En hauteur, si on imagine une hauteur de fenêtre de 500px, 100%+5px+5px fera 510px, soit 10px de plus que la hauteur de la fenêtre : on aura donc systématiquement une barre de défilement vertical, même quand c'est inutile.

Bon, je ne sais pas exactement ce que tu voudrais faire, mais tu peux t'inspirer de ceci :
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html
Et également de ceci (pas d'explications, voire le code) :
http://web.covertprestige.info/test/18-colonnes-factices-fluides-et-entete-piedpage-1.html

Dans les deux cas, les en-tête et pied de page ne sont pas « fixes » au sens où ils resteraient affichés à la même place sur l'écran, par contre. Pour obtenir cet effet, je pense que j'utiliserais un positionnement fixe (position: fixed) à la place du positionnement absolu, et une dégradation (via les commentaires conditionnels) en positionnement absolu pour IE6 et inférieurs.

ghohm

6 Sep 2006 à 17:16

Bon bon !

Ne pouvant faire ce que je souhaite, voilà ce que j'ai fait.

C'est loin d'être parfait, puisque ça ne correspond pas exactement à ce que je veux, mais je vais y réfléchir demain et j'espère atteindre mon but ! Smiley langue

Mon CSS :

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%
}
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	background: white url(fond_hachures.gif) repeat left top;
}

/*a:visited {text-decoration: line-through;}*/

.conteneur {
	padding: 5px;
	background-color: transparent
}

.entete {
	height: 80px;
	padding: 5px;
	border: 1px dashed green;
	background-color: #8fbc8f;
}

.centre {
	height: auto;
	width: auto;
	padding: 5px;
	margin-top: 5px;
	border: 1px dashed white;
	background-color: transparent;
	/*opacity: .5;
	filter:alpha(opacity=50); /* IE's opacity*/*/
}

	.menu {
		float: left;
		left: 5px;
		width: 150px;
		height: 400px;
		margin: 0;
		padding: 5px;
		border: 1px solid black;
		background-color: transparent;
	}
	.menu p {color: #fff; text-align: center;}
	.menu img {border: 1px solid black;}
	
		.menugauche {
			list-style-type: none;
			margin: 0;
			padding:0;
		}
		.menugauche li {
			margin-bottom: 5px;
		}
		.menugauche a {
			font-size: 10pt;
			margin: 0 2px;
			color: #ffc;
			text-decoration: underline;
		}
		.menugauche a:hover {
			text-decoration: none;
		}
		.ss-menu {
			margin-left: 20px;
		}
		.ss-menu a {
			font-size: 8pt;
			font-style: italic;
			margin: 0 2px;
			color: #fff;
			text-decoration: none;
		}
		.ss-menu a:hover {
			font-weight: bold;
		}
	
	.contenu {
		margin-left: 5px;
		padding: 5px;
		width: auto;
		height: 400px;
		border: 1px solid black;
		background-color: white;
		overflow: auto;
	}

.piedpage {
	bottom: 5px;
	height: 60px;
	width: auto;
	padding: 5px;
	margin-top: 5px;
	border: 1px dashed green;
	background-color: #8fbc8f;
}

Mon HTML :

<body>
<div class="conteneur">
	<div class="entete">contenu du header</div>
	<div class="centre">
		<div class="menu">
			<p><strong>Titre</strong></p>
			<ul class="menugauche">
				<li><a href="#">Menu 1</a></li>
				<li class="ss-menu"><a href="#">Menu 1-1</a></li>
				<li><a href="#">Menu 2</a></li>
				<li class="ss-menu"><a href="#">Menu 2-1</a></li>
				<li class="ss-menu"><a href="#">Menu 2-2</a></li>
				<li><a href="#">Menu 3</a></li>
				<li class="ss-menu"><a href="#">Menu 3-1</a></li>
			</ul>
			<br />
			<img src="caducee.jpg" height="185px" width="148px" alt="Le caducée"/>
		</div>
		<div class="contenu">
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			
 			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
			<p>partie "frame" scrollable</p>
		</div> 
	</div>
	<div class="piedpage">contenu du footer</div>
</div>
</body>

A demain ... Smiley lol

Modifié par ghohm (06 Sep 2006 - 17:19)

fvsch

6 Sep 2006 à 18:17

Oui, c'est effectivement une solution : une « bête » mise en page en hauteur fixe, avec bloc de contenu principal scrollable.

Par contre :
1. Ça ne passe pas en 800x600px. Logique, avec un site en hauteur fixe à 600px de hauteur... Je ne sais pas si un tel rappel est utile, mais 800x600 ne signifie pas 600 pixels dans la fenêtre du navigateur, mais 600px pour l'écran entier. Si on enlève la barre des tâches, la barre de titre du navigateur, la barre de menu du navigateur, la barre de navigation, les une ou deux barres Google et autres ajoutées... on arrive plutôt à 420-450px de hauteur disponible.
2. Outre le cas où l'écran/la fenêtre du navigateur n'est pas assez haut(e) et crée une deuxième barre de défilement, les barres de défilement à l'intérieur d'un bloc peuvent poser des problèmes d'ergonomie ou d'accessibilité. Ce n'est donc pas une solution idéale de ce point de vue là.

ghohm

6 Sep 2006 à 18:20

Merci !

De toutes façons je revois ça demain ! Smiley hinhin

Je pense que si je n'arrive pas à faire ce que j'ai dit au début (en la partie qui est faisable !) et bien j'enlèverais le scroll dans mon "contenu".

Merci encore ! Smiley cligne

ghohm

7 Sep 2006 à 15:39

Bon j'ai essayé de suivre vos recommendations et voilà où j'en suis :

http://img70.imageshack.us/img70/5769/imprimecrannt2.th.png

Mon CSS (default.css) :

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%
}
body {
	font-family: "trebuchet ms", Helvetica, sans-serif;
	font-size: 0.9em;
	background: white url(img/fond_hachures.gif) repeat left top;
}

a {
	font-weight: bold;
	text-decoration: none;
}
	a:active {
		font-style: italic;
		color: blue;
	}
	a:hover, a:focus {
		font-weight: bold;
		color: blue;
		text-decoration: overline underline;
	}

form {
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
}
label {
	font-weight:bold
}
input, select, option {
	font-family: "trebuchet ms", Helvetica, sans-serif;
	border: 1px solid black;
	background-color: orange;
	color: black;
}

input.champ {
	padding-left: 2px;
}

input.bouton {
	border: 2px outset #FF9900;
	font-weight: normal;
	cursor: pointer;
	width: 94px;
	height: 24px;
}
input.bouton:hover, input.bouton:focus {
	font-weight: bold;
	color: #000033;
	background-color: #FFCC00;
}
input.bouton:active {
	border: 2px inset #FF9900;
	background-color: #FFFF99;
	color: #666666;
} 

.conteneur {
	padding: 5px;
	background-color: transparent
}

.entete, .centre, .contenu, .piedpage {
	padding: 5px;
	width: auto;
	border: 1px solid black;
}

.centre, .piedpage {
	margin-top: 6px;
	background-color: white
}

.entete {
	height: 82px;
	background: white url(img/logo.png) no-repeat left top;
}

.centre {
	height: auto;
}
	.menu {
		float: left;
		left: 5px;
		width: 150px;
		height: auto;
		margin: 0;
		padding: 2pt 2pt 0 2pt;
		border: 1px solid black;
		background: white url(img/mini_iris.jpg) no-repeat left top;
	}
	.menu p {
		margin: 0 0 2pt 0;
		font-size: 15pt;
		font-weight: bold;
		color: blue;
		text-align: center;
		border: 1px solid black;
	}
	.menu img {
		margin-top: 2pt;
		border: 1px solid black;
	}
	
		.menugauche {
			margin: 0;
			padding: 3px 0 0 3px;
			list-style-type: none;
			border: 1px solid black;
		}
		.menugauche li {
			margin-bottom: 1pt;
		}
		.menugauche a {
			margin: 0 2pt;
			font-size: 0.9em;
			font-weight: bold;
			color: black;
			text-decoration: none;
		}
		.menugauche a:hover, a:focus {
			color: black;
			text-decoration: underline;
		}
		.ss-menu {
			margin-left: 20px;
		}
		.ss-menu a {
			font-size: 0.8em;
			font-weight: normal;
			font-style: italic;
			margin: 0 2pt;
			color: black;
		}
		.ss-menu a:hover {
			font-weight: bold;
			text-decoration: none;
		}
	
	.contenu {
		margin-left: 166px;
		min-height: 420px;
		background: white url(img/mini_iris_2.jpg) no-repeat right bottom;
	}
		.contenu p {
			margin: 0;
		}

.piedpage {
	height: 15px;
}
	.piedpage p {
		margin: 0;
		text-align: center;
		font-weight: bold;
	}

Mon CSS (old-ie.css) :

.contenu {
	margin-left: 5px;
	height: 420px;
}

Mon uniquement problème est que, comme vous pouvez le voir sur l'impression écran (1024*768 en plein écran), lorsque je n'ai pas beaucoup de contenu : il se crée une marge énorme.

Pour éviter cela je souhaiterais que mon "conteneur" soit centré verticalement. Mais toutes mes tentatives ont échouées, car il n'a pas de "height" précis, donc je ne peux utiliser les marges négatives.

Est-il donc possible de faire un centrage vertical de mon conteneur ou non ?

Merci pour tout Smiley smile

Modifié par ghohm (07 Sep 2006 - 15:40)

Vikchill

7 Sep 2006 à 15:49

Je sais pas si ça peut t'aider, mais http://www.456bereastreet.com/ a mis à jour sa technique pour la chose (technique citée en exemple dans la FAQ d'Alsacréation et disponible ici), voir à cette adresse:

http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/

ghohm

7 Sep 2006 à 16:08

Vikchill a écrit :
Je sais pas si ça peut t'aider, mais http://www.456bereastreet.com/ a mis à jour sa technique pour la chose (technique citée en exemple dans la FAQ d'Alsacréation et disponible ici), voir à cette adresse:

http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/

C'est effectivement, très intéressant ! Smiley cligne

Malheureusement, je dois désormais rendre mon site consultable en 800*600, donc si je laisse mes en-tête et pied de page en position fixe ... il ne restera pas assez de place pour le contenu ! Smiley confus

Donc, j'ai choisi de ne pas utiliser cette technique, mais d'avoir une pleine page en 1024*768 et l'ascenceur du navigateur pour les 800*600. Il n'est donc plus question d'un scroll de "contenu" !

Par contre, je souhaiterais que mon "conteneur" soit centré verticalement pour ceux en 1280*1024.

En ce qui concerne le centrage horizontal : "width: 100%", donc pas besoin de centrage horizontal. Smiley cligne

ghohm

11 Sep 2006 à 13:51

Personne a le courage de se plonger dans mon code ?! Smiley biggol

Sujet clos

CSS et mise en forme, CSS3

[css] centrage vertical du conteneur ?