28173 sujets

CSS et mise en forme, CSS3

[Résolu] Background-attachment: fixed dans un id ne marche pas sous ie

Bonjour,
J'ai un problème, je n'arrive pas à fixer l'image de fond contenu dans un id avec ie. J'utilisé un script Js avant, mais il est incompatible avec le script de Alsacréation pour faire un menu déroulant ! (Surement à cause des getElementById mais je m'y connais pas en javascript). Lorsque je mets les deux script ensembles, l'image de fond est bien fixé; mais dès que fait déroulé le menu elle saute vers le bas en étant toujours fixé.

Voici le code de la page avec le scipt pour les menu déroulant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>






<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>




       <title>Site de l'association sportive d'Hoenheim sport section handball</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
       <link rel="stylesheet" media="screen" type="text/css" title="violet-style" href="csslien.css" />
   </head>

   <body>
   
   <div id="entete">
   </div>
   
   
   <div id="page">  <!-- Ce bloque contient les menus gauche et droit ainsi que le corp -->
   
   
   <div id="menu_gauche">
   

		<div class="haut">
		<h3><a href="index.html"> Accueil</a></h3>
		</div>
		<div id="milieu">
		<ul>
				<li><a href="accueil_site.php">Le site</a></li>
				<li><a href="accueil_club.php">Le club</a></li>
		</ul>
		</div>
		<div class="bas"></div>
		
		
		
		
		<div class="haut">
		<h3>News</h3>
		</div>
		<div id="milieu">
			<ul>
				<li><a href="news_club.php">News du club</a></li>
				<li><a href="news_arbitrage.php">News de l'arbitrage</a></li>
				<li><a href="news_mag.php">P'tit mag</a></li>
			</ul>
		</div>
		<div class="bas"></div>
		

		<div class="haut">
		<h3><a href="club.php">Le club</a></h3></div>
		<div id="milieu">
			<ul>
				<li><a href="club_salle.php">Les salles</a></li>
				<li><a href="club_histoire.php">Histoire du club</a></li>
				<li><a href="club_bilan.php">Les bilans</a></li>
				<li><a href="club_ag.php">Les décisions</a></li>
			</ul>
		</div>
		<div class="bas"></div>
		

		<div class="haut">

		<h3><a href="supporters.php">Supporters</a></h3></div>
		<div id="milieu">
			<ul>
				<li><a href="supporters_matchwe.php">Les matchs du week-end</a></li>
				<li><a href="supporters_searchmatch.php">Quelle heure le match ?</a></li>
			</ul>
		</div>
		<div class="bas"></div>
		

		<div class="haut">
		<h3><a href="equipes.php">Equipes</a></h3>
		</div>
		<div id="milieu">
 
		<ul>
				<li class="equipe">Féminines</li>
		</ul>
		
			<ul>
				<li onmouseover="javascript:montre('smenu2');"><a href="equipes_sf1.php">Séniore 1</a>
					<ul id="smenu2">
						<li><a href="equipes_sm1_equipe.php">L'équipe</a></li>
						<li><a href="equipes_sm1_resultat.php">Les résultats</a></li>
						<li><a href="equipes_sm1_classement.php">Le classement</a></li>
					</ul>
				</li>
				<li><a href="equipes_sf2.php">Séniore 2</a></li>
				<li><a href="equipes_jf16.php">- 16 ans</a></li>
				<li><a href="equipes_jf14.php">-14 ans</a></li>
				<li><a href="equipes_jf12.php">- 12 ans</a></li>
			</ul>
		<ul>
				<li class="equipe">Masculins</li>
		</ul>
			<ul>
				<li><a href="equipes_sm1.php">Séniore 1</a></li>
				<li><a href="equipes_sm2.php">Séniore 2</a></li>
				<li><a href="equipes_sm3.php">Séniore 3</a></li>
				<li><a href="equipes_jm18.php">- 18 ans</a></li>
				<li><a href="equipes_jm16.php">- 16 ans</a></li>
				<li><a href="equipes_jm14.php">-14 ans</a></li>
				<li><a href="equipes_jm12.php">- 12 ans</a></li>
				<li><a href="equipes_eh.php">Bou'd'chou</a></li>
				
			</ul>
		
		</div>
		<div class="bas"></div>
		

		<div class="haut">
		<h3><a href="liens.php">Liens</a></h3>
		</div>
		<div id="milieu">
			<ul>
				<li><a href="liens_hand.php">Hand</a></li>
				<li><a href="liens_programation.php">Programation</a></li>
				<li><a href="liens_autres.php">Autres</a></li>
			</ul>
		</div>
		<div class="bas"></div>
		

		<div class="haut">
		<h3><a href="admin.php">Admin</a></h3>
		</div>
		<div id="milieu">
			<ul>
				<li><a href="admin_newsclub.php">News du club</a></li>
				<li><a href="admin_newsarbitrage.php">News de l'arbitrage</a></li>
				<li><a href="admin_resultats.php">Résultats</a></li>
			</ul>
		</div>
		<div class="bas"></div>
    
   </div>
   
   <div id="menu_droit">
   </div>
   
   <div id="corp">
   </div>
   
<div class="spacer">&nbsp;</div>
   </div>
   <div id="pied">
   <p>Copyright "DreamTeam Corporation" 2006, tous droits réservés</p>
   </div>
   
     </body>
	 
</html>

Son fichier css lié:

/* violet_style */
/* Feuilles de style pour le site  http://hoenheimsport.free.fr  */
/*Crée le 20 aout 2006 par bbsebb: bbsebb@hotmail.com ou sebastien.burckhardt@wanadoo.fr */
/* La structure du site se divise en six parties :
			-Le fond
			-entete
			-menu_gauche
			-menu_droit
			-corp
			-pied				*/
			

	body
	{

	background-color: rgb(232,161,255);
    z-index: -1;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	}
	
	a
	{
	color:black;
	}
	
	#page /* contient les menus gauches et droit ainsi que le corp */
	{
		width: 760px;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 50px;
	padding-top: 50px;
	padding-left: 20px;
	padding-right:20px;
	padding-bottom: 20px;
	background: url("../images/background.jpg") #ffffff no-repeat fixed; 
	background-position: center; !important;
	background-position: top left;

	border: 1px black solid;

	}
	
	
	.spacer 
	{
	clear: both; /* permet de border tout le corp et les menus sous mozilla firefox */
	}
	
	#entete 
	{
	width: 800px;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 10px;
	height: 120px;
	border: 1px black solid;
	background: url("../images/baniere.jpg") center;
	}
	
	#menu_gauche
	{
	float: left;
	width: 150px;
	margin: 20px 0px 0px 0px;
	}
	
	#menu_droit
	{
	float: right;
	width: 150px;
	margin: 20px 0px 0px 0px;
	}		
		
	/* Bordure du menu gauche */
		#menu_gauche .haut, #menu_droit .haut
		{ 
		width: 120px;
		background-image: url("../images/fenetre_haut.png");
		font-variant: small-caps;
		font-weight: bold;
		color: #ffffff;
		height: 30px;
		padding: 0px 0px 0px 20px;

		}
		
		#menu_gauche #milieu , #menu_droit #milieu    
		{
		width: 120px;
		background-image: url("../images/fenetre_milieu.png");
		padding: 0px 0px 8px 20px;
		margin-top: -2px;

		}
		#menu_gauche .bas , #menu_droit .bas
		{
		width: 140px;
		background-image: url("../images/fenetre_bas.png");
		height: 18px;
		margin-bottom: 10px;
		}
		/* Bordure du menu gauche */
		
		/* style des listes du menu gauche */
		#menu_gauche ul, #menu_droit ul
		{
		list-style-image: url("../images/fleche.png");
		padding: 5px 0px 5px 15px;
        margin: 0;

		}
		
		#menu_gauche h3 a, #menu_gauche h3, #menu_droit h3 a, #menu_droit h3
		{
		text-align: left;
		vertical-align: top;
		font-size: 1em;
		font-weight: normal;
		font-style: normal;
		text-decoration: none;
		color: #ffffff;
		font-variant: small-caps;

		}
		
			#menu_gauche h3 a:hover, #menu_droit h3:hover
			{
			font-weight: bolder;
			}
			
		#menu_gauche li a, #menu_droit li a
		{
		text-decoration: none;
		color: black;
		}
		
#milieu li a, #milieu ul a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

#milieu li a:hover, #milieu ul a:hover {
background: #eee;
}
		

		
			#menu_gauche li a:hover, #menu_droit li a:hover
			{
			text-decoration: underline;
			}
		/* style des listes du menu gauche */
		
		/* Style spécifique au sous-titre de section du menu de gauche*/
		.equipe
		{
		list-style-image:none;
		list-style-type:none;
		font-weight: bolder;
		text-decoration: overline, underline;
		font-variant: small-caps;
		font-size: 1.1em;
		text-align: left;
		}
		/* Style spécifique au sous-titre de section du menu de gauche*/
		

	
	#corp
	{
	margin-left: 200px;
	margin-bottom: 20px;
	padding: 5px 20px 5px;
	}
		
		#corp .construction
		{
		margin:auto;
		text-align: center;
		text-decoration: blink;
		color: red;
		}
	
	/* Style des titre de pages */
		#corp h4, #corp h1
		{
		font-weight: bolder;
		font-size: 1.6em;
		font-variant: small-caps;
		border-bottom: 1px black solid;
		}
	/* Style des titre de pages */
	
	/* Style des formulaire 'guestbook' */
		.formulaire_news
		{
		margin: 10px 50px 10px;
		font-weight: bold;
		}
	
		.formulaire_news legend
		{
		font-weight: bolder;
		font-variant: small-caps;
		font-size: 1.1em;
		position :              relative;
		top :                   -1em;
		padding :               0.4em;
		color:black;
		}
	
		.formulaire_news fieldset
		{
		position :              relative;
		top :                   1em;
		padding :               0 0.5em 1em 0.5em;
		background-repeat: no-repeat;
		border: outset 3px rgb(119,65,245);
		background: #e8a1ff;
		}
	/* Style des formulaire 'guestbook' */
	
	/* Style et mise en page des news */
		.news
		{
		border:1px solid black;
		background-color: #ffffff;
		margin: auto;
		margin-bottom: 20px;
		padding: 2px 5px 2px;
		}
		
		
		.news .titre
		{
		background: #e8a1ff;
		background-position: 10px 10px 10px 10px;		
		padding: 2px 5px 2px;
		border-bottom: 3px solid #7741f5;
		}
		
		.news .titre h5
		{


		
		font-variant: small-caps ;
		font-size: 1.5em;
		display: inline;
		}	
		
		.news .message .entete_news
		{
		font-size: 0.85em;
		color: #afafaf; 
		}
		
		.news .message .entete_news a
		{
		
		text-decoration: none;
		}
		
		.news .message .entete_news a:hover
		{
		color: #afafaf;
		text-decoration: underline;
		}		
		/* Style et mise en page des news */
	
	#pied
	{
	margin: auto;
	font-weight: bold;
	text-align: center;
	}
	






Voici le script que j'utilisais avant pour fixé le menu:
[code]
/*
	IE7, version 0.8 (alpha) (2005/05/23)
	Copyright: 2004-2005, Dean Edwards (http://dean.edwards.name/)
	License:  http://creativecommons.org/licenses/LGPL/2.1/
 
*/


Enfaite je cherche une solution pour fixer l'image de fond d'un element id sans que cela interfère avec les menu déroulants !
Merci d'avance pour vos solutuons
Séb
Modifié par bbsebb (26 Aug 2006 - 09:57)
Bonjour Séb,

J'ai supprimé le code javascript de Dean Edwards (IE7) du message. Ça posait certains problèmes d'affichage et était un peu lourd.

Background-attachment: fixed n'est interprété correctement par Internet Explorer que sur BODY (ou HTML).
Peut-être pourras-tu trouver une solution grâce à cet article (que je n'ai pas vraiment lu) : « Making IE 5+ use background-attachment: fixed; »
Modifié par Alan (26 Aug 2006 - 05:17)
MErci,mais j'avais déja trouvé cette page .... et l'anglais je comprend vraiment pas et encor moin lorsque ça parle de javascript Smiley sweatdrop . Je vais essayer de m'accrocher mais si qqn pourrai justement m'aider sur ce scripte pour le mettre en place Smiley biggrin !!
Modifié par bbsebb (26 Aug 2006 - 09:00)
C'st bon, j'ai trouvé une solution facile, je la partage parceque je suis sur qu'il y en a d'autres que l'anglais rebutent, surtout avec des termes techniques Smiley lol :
Pour fixer une image dans un bloc id, on rajoute d'abord le script js :


<!--[if lt IE 7]><script type="text/javascript">
function correctPosition(oElement,oPos,oWhich) {
  while( oElement.offsetParent ) {
    oPos -= oElement['offset'+oWhich];
    oElement = oElement.offsetParent;
  }
  oPos += document.documentElement['scroll'+oWhich] ? document.documentElement['scroll'+oWhich] : document.body['scroll'+oWhich];
  return oPos;
}
document.writeln( '<style type="text\/css">' );

//use document.writeln to put all CSS declarations in here, surrounded by " quotes
document.writeln( "div.fixedBack, h1.fixedBack { background-position: expression( correctPosition(this,10,'Left')+'px '+correctPosition(this,20,'Top')+'px'); }" );

document.writeln( '<\/style>' );
</script><![endif]-->

Je ne peux pas vous l'expliquer en détail, je sais juste utiliser le php Smiley ravi et c'est déjà pas mal, mais en gros, le script recalcule la position de l'image de fond à chaque fois qu'on bouge sur les rouleaux (scroll).Et si j'ai faux merci de me corriger !
Le probleme est que ce calcule à chaque fois fait sauter l'image de fond Smiley confus mais on va y revenir, il y a une solution.
D'abord on va s'occuper de notre image de fond. Il faut bien la rajouter à code css pour que le script la reconnaisse; il suffit de mettre ceci:

#div
{
 background: #fff url("images/background.jpg") no-repeat fixed 10px 20px;  
 background-position: expression( correctPosition(this,10,'Left')+'px'+correctPosition(this,20,'Top')+'px'); 
}

On peut jouer sur les chiffre (ici 10 et 20) pour ajuster le placement du fond !
Mais on a toujours notre problème de sautillement de l'image de fond! La solution est toute simple enfaite (normal quand on la sous les yeux Smiley lol )
il suffit de mettre une image de fond à l'element body et de la fixer ce qui va moduler la vitesse des ascenseurs (rouleaux):

body
{
background: url("images/fond.jpg") fixed;
}

Sur mon site, l'image de fond de l'élément body est tout simplement une couleur unique ... Smiley smile

J'ai rien trouvé tout seul, j'ai tout cherché sur le net, alors par respect pour les personnes qui ont trouvé ces solutions voici les sources:
Images de fond fixed
Non sautillement de l'image de fond + une autre solution non testée
Et merci Alan !
Une des limites de cette solution c'est qu'on ne peut apparemment utiliser que les pixels et qu'il n'est donc pas possible de centrer par exemple.

Dans ce cas il y aurait cette solution : http://www.doxdesk.com/software/js/fixed.html

Je viens de tester, ça marche plutôt bien même si c'est un peu saccadé aussi (d'ailleurs ton astuce d'ajouter une image de fond fixe sur BODY fonctionne bien également).
En revanche il faudrait plutôt appeler le script depuis le bas de page sinon ça fait un drôle d'effet au chargement quand l'image est centrée Smiley ohwell
Sujet clos
Aller à