18041 sujets

Questions générales et questions de débutants

[résolu]Decalage pied de page sur les 2 derniers liens

Bonjour,

j'ai un petit souci au niveau des liens du pied de page lorsque l'on passe dessus cela entraine un décalage vers la droite et cela ne se passe que sur firefox.
Si quelqu'un a des idées..?


Merci
scneom

<body>
<div id="conteneur_global">
	<div id="nav">
		<p>
		<a class="logo" href="/index.html">// Architecture d'interieur</a>
		</p>
		<ul>
		<li><a class="non_active" href="/contact.html">// Contact</a></li>
		<li><a class="non_active" href="/a_propos.html">// A propos</a></li>
		<li><a class="non_active" href="/images.html">// Images</a></li>
		<li><a class="non_active" href="/design.html">// Design</a></li>
		<li><a class="non_active" href="/architecture.html">// Architecture d'interieur</a></li>
		</ul>
	</div>

    <div id="centre">
    	<div id="centre_gauche">
        	      <img src="/image/presentation.png" width="279" height="279" alt="image du site " /></div>
        <div id="centre_droit">
        <h2>Presentation du site</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi.</p>
                	</div>
    </div>
   
 <div id="pied_de_page">
<ul>
		<li><a class="non_active" href="/mention.html">// Mention légales</a></li>
		<li><a class="non_active" href="/plan_du_site.html">// Plan du site</a></li>
		<li><a class="non_active" href="/a_propos.html">// A propos</a></li>
   		<li><a class="non_active"  href="/contact.html">// Contact</a></li>	
        </ul>
</div>    
    
</div>
    </div>      
    
</body>




body{ 
background:url(images/fond.gif);}

				#conteneur_global{
					width:909px;
					height:562;
					margin:0 auto 0 auto;
}
/*------------------------------ navigation top --------------------------*/
/*------------------------------ navigation top --------------------------*/
/*------------------------------ navigation top --------------------------*/

		/* generalité sur le bandeau*/
				#nav {
					width:100%;
					height:82px; 
					margin:31px auto 0 auto;
					border-top: dashed  1px black; 
					border-bottom: dashed  1px black;
					}
		/* deplacement logo */
				#nav p{
					float:left;
					color:#fff;
					margin: 0px 0 0 82px;
					}
		/* logo generalité */
				#nav a.logo{
					display:block;
					background:url(images/logo.jpg) /* no repeat */ scroll 0 0 transparent;
					height: 82px;
					width: 133px;
					text-indent: -9999px;
					}
		/* generalité lien */
				#nav li {
					float:right; 
					list-style:none;
					margin:0 0 0 0;/* decalage  vers le bas du texte */
					font-size:15px;
					}
				#nav li a {
					text-decoration:none; 
					padding:55px 4px 0px 4px;/* hauteur de la cellule */
					margin:0px 0px 0px 0px;
					color:#000;
					display:block;
					/* effet de transition*/
					-moz-transition: all 0.2s ease-out;  /* FF3.7+ */
					-o-transition: all 0.2s ease-out;  /* Opera 10.5 */
					-webkit-transition: all 0.2s ease-out;  /* Saf3.2+, Chrome */

					}
				#nav li a:hover{
					border: 5px solid #fff;
						/*ombre sur le passage de la souris*/
					-moz-box-shadow: 1px 1px 12px #555; 
					-webkit-box-shadow: 1px 1px 12px #555; 
					box-shadow: 1px 1px 12px #555; 
						/* rotation au passage de la souris*/	
					-moz-transform: rotate(-2deg);  /* FF3.5+ */
					-o-transform: rotate(-2deg);  /* Opera 10.5 */
					-webkit-transform: rotate(-2deg);  /* Saf3.1+, Chrome */
				}

				/* onglet selectionner de la page en cours */
				.en_cours {
					background-image:url(/css/images/fond.jpg);
					border: 5px solid white;
						 /*ombre au passage de la souris*/
					-moz-box-shadow: 1px 1px 12px #555; 
					-webkit-box-shadow: 1px 1px 12px #555; 
					box-shadow: 1px 1px 12px #555; 
						 /*rotation au passage de la souris*/
					-moz-transform: rotate(-2deg);  /* FF3.5+ */
					-o-transform: rotate(-2deg);  /* Opera 10.5 */
					-webkit-transform: rotate(-2deg);  /* Saf3.1+, Chrome */
				}
				/* onglets non actives de la pages en cours */
				.non_active	{
					border: 5px solid transparent;
				}
		
/*------------------------------ navigation centre --------------------------*/
/*------------------------------ navigation centre --------------------------*/
/*------------------------------ navigation centre --------------------------*/

				#centre{
					width:910px;
					height:468px;
					/*background-color:#0F0*/;
					
				
					}
				div#centre_gauche {
					float:left;
					width:379px;
					height:468px;
					/*background-color:blue;*/}
					
					div#centre_gauche img {
						margin-top:94.5px;
						margin-left:50px;}
				div#centre_droit{
					float:right;
					width:531px;
					height:468px;
					/*background-color:black;*/
					
					}
					div#centre_droit h2{
						margin-top:50px;
						
						margin-left:50px;
						font-size:16px;}
					div#centre_droit p{
						margin-top:10px;
						margin-left:50px;
						margin-right:50px;
						margin-bottom:10px;
						font-size:12px;}
/*------------------------------ navigation pied-de-page --------------------------*/
				#pied_de_page {
					width:100%;
					height:20px; 
/*					margin:0px auto 0px auto;
*/					border-top: dashed  1px black; 
					border-bottom: dashed  1px black;
					text-align:center;
/*					min-height:100%;
*/					}
		/* generalité lien */
				#pied_de_page li {
					
					display:inline;
					list-style:none;
					font-size:11px;
					margin:auto 15px auto 15px;
					letter-spacing:3px;
					vertical-align: middle;/* centre texte pour ie7 */
				}
				#pied_de_page li a {
					text-decoration:none; 
					display:inline-block;
					padding:0px 5px 0px 5px;/* decalage  interieur*/
					color:#000;	
										/* effet de transition*/
					-moz-transition: all 0.2s ease-out;  /* FF3.7+ */
					-o-transition: all 0.2s ease-out;  /* Opera 10.5 */
					-webkit-transition: all 0.2s ease-out;  /* Saf3.2+, Chrome */
}
				#pied_de_page li a:hover{
					color:#333;
					background-image:url(/css/images/fond.jpg);
					border: 5px solid #fff;
						/*ombre sur le passage de la souris*/
					-moz-box-shadow: 1px 1px 12px #555; 
					-webkit-box-shadow: 1px 1px 12px #555; 
					box-shadow: 1px 1px 12px #555; 
						/* rotation au passage de la souris*/		
					 -moz-transform: rotate(-2deg); 
  					-webkit-transform: rotate(-2deg);
				}

Modifié par scneom (07 Jun 2010 - 09:47)
je me doutes Smiley decu
malheureusement j'ai pas de serveur ni de site (suis en train de le monter en local )
en fait si ils ont une bordure puisque dans ma class .non_active ils sont définis avec une bordure transparente...
donc normalement une bordure existe déjà.
En plus ils sont construits de la même façon que mes liens du hauts donc je ne devrais pas avoir ce problème non.(et surtout que sur firefox)
j'ai mis en ligne le site à l' adresse test pour que cela soit plus clair
Modifié par scneom (07 Jun 2010 - 09:00)
oups.........
pardon du dérangement inutile de ma part :'(

je viens de vérifier et ce décalage n'apparait que sur le firefox qu'il y sur mon poste de travail (maintenant à savoir pourquoi est un autre problème)

quel boulet Smiley boulet
merci
j'ai pas de cache (du moins il est vidé des fermetures de FF)
bon pas grave même si c'est ennuyant.
merci encore
Sujet clos
Aller à