28173 sujets

CSS et mise en forme, CSS3

Problème de visibilité d'un ascenseur

Bonjour à tous,
Je suis actuellement en train de créer un style pour un site et je suis confronté à une problème avec un ascenceur.

Je m'explique, la forme du site est ma foi classique (header,menu sur la gauche, contenu et footer). L'objectif est que le site prenne tout l'espace dispo en largeur et hauteur et que s'il manque de place, un ascenceur s'affiche pour la partie contenu.

J'y suis quasiment arrivé en utilisant des positionnement absolu sauf qu'une partie de mon ascenceur est "caché" par mon footer lorsqu'il y a trop de texte.

Voici le css : 


html, body
{
    height: 100%;
	 overflow: hidden;
	 margin: 0 0 0 0;
}
#Form1 
{
    position: absolute;
	 top: 0;
	 bottom: 0;
	 width: 100%;
    height: 100%;
	 background-color: Lime;
}
#header
{
	position:absolute;
	top: 0;	
	background-color: Fuchsia;
	width: 100%;
	height: 80px;
}
#footer
{
	position:absolute;
	bottom: -1px;/*pour éviter l'affiche d'un ligne sous le footer*/	
	background-color: Blue;
	width: 100%;
	height: 30px;
}
#Menu
{
	background-color: Red;
	width: 140px;
	position:absolute;
	top: 80px;
	height: 100%;
}
#contenu
{
	position: absolute;
	width: 100%;
	height: 100%;
	margin-top: 80px;
	Padding-left: 140px;
	overflow: auto;
	background-color: Green;
}


voici le code html : 


<html>
<body>
	<form name="Form1">
			<div id="contenu">
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>		
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>		
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>
				<P>Contenu</P>				
			</div>
			<div id="header">Header</div>
		   <div id="menu">Menu</div>		
			<div id="footer">Footer</div>
	</form>
</body>
</html>



J'avoue être coincé et je tourne en rond depuis hier après midi Smiley ohwell

D'avance merci !

Benjamin
Sujet clos
Aller à