28172 sujets

CSS et mise en forme, CSS3

Position fixed

Bonjour à tous,

J'aurais besoin de votre aide pour arriver à rendre un menu (2ème) fixe.

Je m'explique, sur mon site, on arrive sur l'index avec un menu en haut. Je voudrais que lorsque le visiteur scroll vers le bas de la page un 2ème menu apparaisse (ou soit présent) propre à chaque section.
Or, lorsque j'attribue une position fixe (fixed) à ce second menu, il apparait en haut de la page et non pas en haut de ma 2ème section (3eme, 4eme, 5eme...section) alors que les sections sont bien dans des div différentes.
J'ai bien essayer de cacher ce second menu en jouant sur les z-index mais cela ne fonctionne pas à cause de mon background !

Avez-vous une idée ? une petite fonction qui "lance" le 2ème menu au passage de la 2ème section ?


body {
	margin: 0 auto;
	font-family:Gotham-Book, Verdana, sans-serif;
	background:url(../img/main-bck.gif) repeat;
	overflow:hidden;
	list-style:none;
}
h1 {font-size:30px;color:#35D7FE;font-weight:normal;padding-left:23px; }
h2 {font-size:22px;color:#fff;font-weight:normal;padding:20px; }
h3 {font-size:16px;color:#fff; padding-left:0px;font-weight:normal;}
h4 {font-size:16px;color:#35D7FE; padding-left:25px;font-weight:normal;}
h5 {font-size:14px;color:#35D7FE; padding-left:15px;font-weight:normal;}
h6 {font-size:16px;color:#ccc; padding-left:25px;font-weight:normal;line-height:0em;}
p {font-size:13px;color:#999;line-height:1.3em;text-align:justify;}
h1, h2, h3, h4, h5, h6, p {font-family:Gotham-Book, Verdana, sans-serif;}
.clear {clear:left;}
/*Headers*****************************************************************************************************************************/
#header2 {background: ;margin: 0 auto;height:460px;background:url(../img/img2.jpg) repeat-x ;z-index:3; } 
	.inner-block {width:1080px;height:460px; margin: 0 auto; }
#plan {background:url(../img/main-bck.gif) repeat ;height:1000px;margin: 0 auto;display:none;}
#propos {margin: 0 auto;width:850px;margin-top:-150px;}
#bulle {width:850px;height:300px; margin: 0 auto; background:url(../img/bulle.png) no-repeat ;}
#txtbulle {padding-top:55px;padding-left:85px;}
#logo {border-bottom: 1px solid #999;width:850px;height:50px;margin-left:70px;}
.maintitle {background:url(../img/fond-services.png) no-repeat ;height:30px;padding-left:25px;padding-top:7px;}
#boutonproduits { margin-left:920px;position:absolute;z-index:9999;margin-top:-45px;list-style:none;cursor: pointer; }
#fermer { color:#35D7FE;font-size:20px;margin-left:1245px;padding-top:270px;height:25px;cursor: pointer; }
/*Menu1***********************/
#menu { margin: 0 auto;width:1080;position:relative; margin-left:15px;background:#fff;z-index:2;height:25px;}
.pospuce {padding-top:3px;}
.nav ul {height:20px;list-style:none;}
.nav li {float:left;height:20px;list-style:none;padding : 4px 2px 0px 10px;margin-left:10px;}
.lienmenu:link{font-family:arial;color: #4B4B4B;font-size:16px;font-weight:bold;text-decoration:none;line-height:23px;}
.lienmenu:visited {color: #4B4B4B;}
.lienmenu:active {color: #4B4B4B;}
.lienmenu:hover {color: #000;}
#posaccueil {margin-top:-30px;float:left;margin-left:20px;}
/*Menu2***********************/
#menu2 { margin:0 auto;background: url(../img/fond-menu2.png) no-repeat ;height:97px;position:fixed;left: 150px;top: 10px;width:800px;z-index:9999;overflow:hidden;}
.posmenu2 {float:left;margin-top:50px;}
.lienmenu3:link{font-family:Gotham-Book, Verdana, sans-serif;color: #4B4B4B;font-size:12px;font-weight:bold;text-decoration:none;background:none;}
.lienmenu3:visited {color: #666;}
.lienmenu3:active {color: #666;}
.lienmenu3:hover {color: #000;}
#retourhaut {background:#fff;float:left;margin-left:45px;margin-top:46px;height:40px;}
#posbacktop {margin-top:5px;margin-left:-35px;border:0px;}
/*Menu3***********************/
#menu3 { width:50px;margin-left:450px;height:97px;margin-top:5px;}
/*Accueil*****************************************************************************************************************************/
#contenu {margin:0 auto;width:100%;}
.accueil li {height:20px;list-style:none;padding : 30px 2px 0px 0px;margin-left:10px;font-size:14px;color:#ccc;line-height:2em;}
#titrehome {font-size:26px;color:#fff;}
#more {float:left;margin-top:55px;width:100px;height:20px;margin-left:230px;}
#more2 {float:left;margin-top:55px;width:100px;height:20px;margin-left:230px;}
#more3 {float:left;margin-top:55px;width:100px;height:20px;margin-left:230px;}
.lienmenu2:link{font-family:Gotham-Book, Verdana, sans-serif;color: #4B4B4B;font-size:20px;font-weight:bold;text-decoration:none;font-style:italic;background:url(../img/main-bck.gif) repeat ;padding:10px;}
.lienmenu2:visited {color: #4B4B4B;}
.lienmenu2:active {color: #4B4B4B;}
.lienmenu2:hover {color: #fff;}
/*Navigation***********************/
#navi{ margin-top:-52px;width:300px; }
#navi_g { margin-left:40px;width:300px;}
#navi_d { margin-left:0px;width:200px;height:30px;text-align:center;border-right:1px solid #fff;}
/*Arbo site***********************/
.section{margin:0px;margin-left:15px;width:100%;float:left;height:1600px;}
.section h2{margin:50px 0px 30px 50px;}
.section p{margin:5px 0px 0px 25px;width:870px;}
.section ul{list-style:none;margin:0px 0px 0px 0px;margin-top:5px;}

#agency, #soluci, #refi, #packi, #con, #conti {margin-top:-48px;width:1020px;margin:0 auto;background:url("..//img/bg-section3.png") repeat;}
#home {margin:0 auto;width:1020px;margin-top:-68px;}
#map {margin-top:0px;}
#conti {height:500px;margin-top:-608px;}

#first {float:left;width:340px;font-size:14px;text-align:left;margin-left:-40px;margin-right:20px;}
#first li {margin-left:45px;margin-top:10px;font-size:14px;color:#999;padding-left:5px;list-style-image: url("../img/puce-rouge.png");}
#titrefirst {font-size:13px;color:#ccc;padding-right:5px;width:320px;text-align:left;}
#first2 {width:340px;font-size:14px;text-align:left;margin-left:25px;color:#999;font-size:14px;margin-right:10px;text-align:justify;}
#first3 {float:left;width:320px;font-size:14px;text-align:left;margin-left:0px;}
#first4 {width:320px;font-size:14px;text-align:left;margin-left:0px;}
#first3 li {margin-left:45px;margin-top:10px;font-size:14px;color:#999;padding-left:5px;list-style-image: url("../img/puce-rouge.png");}
/*Common *****************************************************************************************************************************/
#comments {width:300px;min-height:250px;margin-left:750px;margin-top:-150px;}
#comments2 {width:260px;min-height:250px;margin-left:760px;margin-top:200px;}
#comments3 {float:left;width:260px;min-height:250px;margin-left:740px;margin-top:-450px;}
#comments4 {float:left;width:230px;min-height:250px;margin-left:740px;margin-top:-300px;}
#comments6 {float:left;width:230px;min-height:250px;margin-left:740px;margin-top:-400px;}
#comments5 {float:left;width:260px;min-height:250px;margin-left:740px;margin-top:-150px;}
#contacts {float:left;width:300px;min-height:100px;margin-left:870px;margin-top:0px;}
.titre {border-bottom: 1px solid #666666;border-bottom-style: dashed ;padding-bottom:35px;width:220px;}
.wnv ul {font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#999;line-height:1.3em;margin : 10px 0 0 33px !important; list-style-image: url("../img/puce-rouge.png");}
#wnv2 {margin-left:-3px;font-size:14px;color:#999;width:320px;}
.wnv3 ul {font-family:Gotham-Book, Verdana, sans-serif;font-size:14px;color:#999;margin : 0px 0px 0 8px !important; list-style-image: url("../img/puce-rouge.png");}
.encadre {padding:10px;background:url("..//img/fond-encadre.png") repeat;}
.encadrered {padding:10px;color:#35D7FE;width:290px}
/*Contacts*********/
#cont {width:700px;margin-top:40px;margin-left:30px;}
#cont_g {width:405px;background:#ff0000;}
#cont_d {width:200px;margin-left:0px;background:#ff00ff;}
#formulaired {background:#ff0000;float:left;margin-left:0px;margin-top:0px;}
.email{font-size:16px;padding-left:0px;font-weight:normal;text-decoration:none;}
.email:link{color:#fff;}
.email:visited{color:#35D7FE;}
.email:active{color:#35D7FE;}
.email:hover {color:#35D7FE;}
.parainfo {padding:10px;padding-right:0px;color:#fff;padding-bottom:5px;}
.parainfoc {color:#fff;margin-bottom:0px;}
/*Footers*****************************************************************************************************************************/
#footer {margin-left:30px;margin-top:50px;}
#parainfo {width:340px;font-size:14px;text-align:left;margin-left:25px;color:#999;font-size:11px;margin-right:10px;text-align:left;}
#suite {float:left;width:200px;font-size:11px;text-align:left;margin-top:30px;}
#retourhaut2 {float:left;margin-left:45px;margin-top:390px;z-index:9998;}

.facebook {float:left;list-style:none;height:35px;background: url("..//img/facebook.png") no-repeat;background-position:0% 100%;}
.facebook li {padding-top:2px;padding-left:5px;height:35px;}


.twitter {float:left;list-style:none;height:35px;background: url("..//img/twitter.png") no-repeat;background-position:0% 100%;margin-left:30px;}
.twitter li {padding-top:2px;padding-left:5px;}

.rss {float:left;list-style:none;height:35px;background: url("..//img/rss.png") no-repeat;background-position:0% 100%;margin-left:30px;}
.rss li {padding-top:2px;padding-left:5px;}

#annee {margin-top:-50px;font-size:70px;background: url("..//img/an.png") no-repeat;}


#partnership {list-style:none;padding-left:0px;width : 200px;text-align:left;color:#6C6E74;font-size:14px;font-weight:bold;}
#partnership .sousMenu {list-style: none;margin-left:0px;margin-top:10px;padding:0;width : 150px;text-align:left;}
#partnership .sousMenu li{margin:0;padding:2px;height:15px;line-height:0.5em;padding-top:5px;border-bottom:1px solid #ABAFB5;}
#partnership li:hover > .sousMenu { display: block; height:20px;position: absolute; line-height:0em; z-index: 2;}
#partnership .sousMenu2 {list-style: none;margin-left:0px;margin-top:10px;padding:0;width : 150px;text-align:left;}
#partnership .sousMenu2 li{margin:0;padding:2px;height:30px;line-height:0.5em;padding-top:10px;background: url("..//Images/footer-img1.jpg") no-repeat;padding-left:90px;}
#partnership li:hover > .sousMenu2 { display: block; height:20px;position: absolute; line-height:0em; z-index: 2;}
.vert:link{color: #A9ABAF;text-decoration: none;font-size: 24px;font-weight:bold;}
.vert:visited{color: #A9ABAF;text-decoration: none;font-size: 24px;font-weight:bold;}
.vert:active{color: #A9ABAF;text-decoration: none;font-size: 24px;font-weight:bold;}
.vert:hover {color: #35D7FE;text-decoration: none;font-size: 24px;font-weight:bold}

#footer3 {margin: 0 auto;width:980px;margin-top:5px;text-align:right;}
.Scroller {color: #000;font-size:12px;font-weight:normal;line-height:1.2em;}
.Scroller2 {color: #A9ABAF;font-size:12px;font-weight:normal;line-height:1.2em;}
.Scroller3 {color: #35D7FE;font-size:12px;font-weight:normal;line-height:1.2em;margin-top:-10px;}

#opinion{position:fixed;bottom:50px;right:50px;width:100px;color:#35D7FE;}
.opinions:link{font-family:arial;color: #35D7FE;font-size:14px;font-weight:bold;text-decoration:none;line-height:23px;}
.opinions:visited {color: #35D7FE;}
.opinions:active {color: #35D7FE;}
.opinions:hover {color: #fff;}


Merci d'avance.
@plus.
Zed1
en jquery, tu peux jouer avec la fonction d'événement scroll()


$("html").scroll(function() {
  ici tu modifie le css pour aficher ton 2nd menu
  (documente toi du coté de jQuery je pense que ca devrait coller à ce que tu cherche à faire)
});


à bientot
Bonjour,

Le positionnement fixe fonctionne comme ça: l'élément reste fixe à l'écran dans tous les cas.
Si tu veux laisser un élément à une position précise dans le canevas de la page (donc pas positionné par rapport au viewport), puis basculer en position fixe dans certains cas de figure, et enfin repasser en position normale (statique ou absolu) dans d'autres... il va falloir gérer ces changements de position en JavaScript.
Merci à tous de vos réponses, la solution vient effectivement de la fonction scroll.
En bidouillant un petit code que j'ai trouvé, j'arrive à faire apparaitre un lien mais je voudrais appeler une Iframe (contenant mon 2eme menu), en fait :

remplacer : <a href="#top" class="top_link" title="Revenir en haut de page">Haut</a>
par quelque chose comme : <iframe...></iframe>

et je n'y arrive pas ! alors merci à nouveau de votre aide Smiley smile 


<script type="text/javascript">
$(document).ready(function(){

     $('body').prepend('<a href="#top" class="top_link" title="Revenir en haut de page">Haut</a>');
	 
	 $('.top_link').css({
	'position'				:	'fixed',
	'top'					:	'50px',
	'display'				:	'none',
	'padding'				:	'20px',
	'background'			:	'#fff',
	'-moz-border-radius'       	:	'40px',
	'-webkit-border-radius'	        :	'40px',
	'border-radius'			:	'40px',
	'opacity'				:	'0.9',
	'z-index'				:	'2000',
	'type'					:   'iframe'
	
});
$(window).scroll(function(){
	posScroll = $(document).scrollTop();
	if(posScroll >=550)
		$('.top_link').fadeIn(600);
	else
		$('.top_link').fadeOut(600);
});


   });
</script>');
impossible ! (du moins pour ce que tu souhaite faire)

l'iframe n'etant pas positionnée dans le flux de ta page, tu ne peux ni mettre du jquery modifiant son état dans ton document général, ni mettre le jquerry du scroll (vu qu'il n'y a pas "acces") dans ton iframe.

la solution de la div fixed est largement suffisante et te permet de faire les memes choses sans ce genre de contrainte Smiley smile
Modifié par ptitvincent (23 Jun 2011 - 15:20)
Zed1 a écrit :
j'arrive à faire apparaitre un lien mais je voudrais appeler une Iframe (contenant mon 2eme menu)

Pas impossible de rajouter un élément IFRAME dans le DOM, ou d'afficher un élément IFRAME initialement en display:none, mais je doute que ça soit une bonne stratégie de mettre ton menu dans une iframe. Pourquoi pas directement dans le code HTML? Ça ne coute pas plus cher. Smiley cligne
je préférerais une iframe car le 2ème menu est peu ou proue une réplique du 1er et pour contourner un conflit de script (indispensable dans les 2 menus), j'utilise une iframe à la place d'un écho php. Le 2ème menu étant répété ou désormais présent à 6 endroits différents.

Au delà des problèmes de référencement, je suis curieux fvsch pourquoi es-tu opposé à l'utilisation d'une iframe ?

Je me permets de t'envoyer sur ta MP un lien vers la maquette du site que je créé. Tu pourras voir comment j'ai résolu le problème mais si t'as encore quelques minutes, je suis preneur pour l'intégration d'une iframe car j'aurais quand même souhaiter une petite animation (fade) à l'apparition du second menu ?

Merci
Zed1
non mais pourquoi ne fais tu pas tout avec un seul "objet" de menu ?

à une certaine position du scroll, tu change l’état du menu en fixed et tu l'anim d'un fade, le client aura exactement le même rendu visuel, ça ne changera absolument rien pour lui.
Sujet clos
Aller à