28172 sujets

CSS et mise en forme, CSS3

[Résolu] Partie mobile et partie fixe de ma page

Bonjour

Je suis en train de développer une application web pour mon entreprise, et sur une page j'affiche quelques boutons et un grand grand tableau. Mes supérieurs m'ont demandé de "fixer" les boutons et de ne rendre mobile que le grand tableau, au lieu de toute la page. J'ai trouvé sur internet une façon de faire en CSS dont voici le code :


html, body {overflow:hidden;margin:5px;padding:0px;}
body { font-family: Arial;}
code {font-size:1em;}
#bloc-fixe 
{ 
	position:fixed;
	overflow:auto;
	right:0px;
	left:0px;
	top:0px;
	height:59%;
	font-size:90%;
}
#contenu 
{ 
	position:fixed;
	overflow:auto;
	right:0px;
	left:10px;
	bottom:10px;
	top:67%;


<!--[if lt IE 7]>

html, body {height:100%;font-family: Arial;}
html {padding-top:0px}
#bloc-fixe, #contenu
{
	height:50%;
	left:3px;
	position:absolute;
	width:100%;
}
#contenu
{
	position:absolute;
	bottom:1000px;
}


Cela fonctionne à merveille. MAIS lorsque je réduit la taille de la fenêtre de mon navigateur, la partie mobile de ma page chevauche tout ou partie de ma partie fixe, ce qui est plutôt ennuyeux.

Pour remédier à ce problème, j'ai retiré dans la CSS les 

position:fixed

MAIS l’ascenseur de ma partie mobile disparaît (je suis le David Copperfield des ascenseurs Smiley lol )

Donc si quelqu'un sait comment avoir deux parties (une fixe et une mobile avec ascenseur si besoin est) et que la partie mobile ne chevauche pas la partie fixe lorsque ma fenêtre est réduite, je lui serais reconnaissant

Merci d'avance !
Modifié par eberlue (26 Jul 2011 - 14:35)
Bonjour, il nous manque un peu d'info pour te suggérer une solution appropriée. Par exemple, quel est la structure html de la page ? Pourquoi ne pas utiliser le positionnement fixe ? etc.

Une page en ligne, ou un print de ce que tu veux faire nous aiderait aussi.
si le problème ne se produit qu'en réduisant la largeur de ton navigateur, tu peux utiliser des medias queries pour cibler une résolution/largeur plus petite.
Résolu !

Voici pourquoi : lorsque je diminuais ma fenêtre (en largeur surtout), mes boutons revenaient à la ligne, donc la hauteur de mon bloc fixe augmentait. Et comme j'avais défini une position (hauteur) de départ pour mon bloc mobile, et ben, l'un se superposait sur l'autre.

Et voilà, un problème de résolu
Sujet clos
Aller à