Menu fixe aligné en bas de page

Bonjour ! Suite a diverse recherches, je n'arrive pas a résoudre mon problème.

Le but est de créer un menu d'une hauteur de 25 pixel, détaché de 25 pixels du bas de la page, en transparence. Le problème rencontré est qu'en calant le menu en bas de page, l'ascenseur n'apparaît pas en entier.

la page finale est : http://www.xmpt.ch

le code de la css est actuellement :

body {
	overflow: 			auto;
	font: 				80% Century Gothic, Arial, Helvetica, sans-serif;
	background: 		#ffffff;
	margin:				0;
	padding: 			0;		
	text-align: 		justify;
	color:				#000000;
	width:				100%;
	height:				100%;
}

.xmpt #conteneur {
	position:			absolute;
	width:				990px;
	height:				100%;
	left:				50%;
	margin-left:		-495px;
}

.xmpt #menuvt {
	overflow:			auto;
	float: 				left; 
	width: 				181px;
	height:				100%;
	background-image: 	url(../design/menuvt.png); 	
}

.xmpt #page {
	overflow:			auto;
	position:			relative;
	width:				752px;
	height:				100%;
	background-image:	url(../design/page.png);
	left:				25px;
	top:				25px;
	padding:			0 10px 0 20px;
}

.xmpt #menu {
	overflow:auto		auto;
	position:			absolute;
	background-image:	url(./../design/fondmenu.png);
	border-top:			1px solid #000000;
	border-bottom:		1px solid #000000;
	height:				25px;
	width:				100%;	
	top:				100%;
	margin-top:			-50px;
	z-index:			1;
}

quelqu'un peut-il me renseigner ?

merci d'avance !

bonsoir

height:100% et top:25px; force le 'scrol'l de ta page , car cela déborde forcement de 25px vers le bas.

Pour le reste les position 'absolute' et marge négatives sont sources de problèmes d'affichages.

Tes images de fond meriteraient de ne reprendre que le dégradé sur 1 pixel de large et les bordures grises faites avec l'attribut border.

Une démarche différente de ma part , m'amènerait plutôt a construire la mise en forme sur des éléments flottants et un conteneur centré.
En gardant ton html par exemple:

html , body , #menu , #page {
height:100%;
margin:0;
padding:0;
}
.xmpt {
width:1012px;
margin:0 auto;
}
#conteneur {
padding:0;
height:98%;
padding-top:1%;
float:right;
}
#menu {
float:left;
background:url(http://www.xmpt.ch/design/menuvt.png);
width:140px;
padding:0 20px;
margin-right:30px;
}
#page {
overflow:auto;
background:url(http://www.xmpt.ch/design/page.png);
width:780px;
padding:0 10px;
margin:0;
}
#menuvt {
position:absolute;
bottom:25px;
width:100%;
left:0!important;
left:auto;/* degradation IE6 */
height:25px;
line-height:25px;
border:1px solid;
border-right:0;
border-left:0;
background:yellow;
opacity:0.7;
filter:alpha(opacity=70);
}

On approche un résultat assez similaire a ce que tu recherche , sans scroll en trop a priori et sans le défaut des marges négatives.

Il n'est pas toujours facile de choisir une "technique" de mise en forme , mais généralement , le positionnement absolu fini par mener a des situations inextricables . Les Gabarits , genre faux-frames , sont eux aussi des sources de souci . et quand au rendu au pixel prés , la encore , c'est du casse tête inutile et interminable .

Sans dire qu'il faudrait faire qu des pages fluides , il ne faut pas les faire 'rigides' non plus visuellement parlant .
Il faut laisser un peu de "flexibilité" afin de passer au mieux sur les différents écrans ou elles vont s'afficher.

Bonnes continuations.

GC

Salut,
En réduisant la hauteur de ton bloc page (98%) ton ascenceur ressort en entier