[Résolu] Décalage vertical lors du clic sur un lien interne

Question

cyberfish

24 Apr 2007 à 14:27

Bonjour à toutes et à tous,

Après plusieurs mois d'utilisation d'alsa et la lecture de l'excellent bouquin de Raphaël, je me retrouve contraint et forcé de poster ma première question sur ce forum, n'ayant pas trouvé la réponse ailleurs.

Le lien suivant doit vous permettre de voir mon problème : http://www.ecole-online.org/wmi/fr/recrutement.php

*** (édition du 26/04) lien désactivé le 27/04/2007 ***

Les deux lignes de texte au-dessus des silhouettes sont des liens pour accéder directement aux annonces du div de gauche. Or le clic sur l'un quelconque de ces deux liens fait sauter la page de quelques pixels vers le haut. Mystère incompréhensible pour moi.

Auriez-vous une idée ?

D'avance, merci pour votre aide.
Modifié par cyberfish (26 Apr 2007 - 18:38)

gilles6975

24 Apr 2007 à 16:02

Bonjour bienvenue sur Alsa

Tu as mis :

#vignette {
position:absolute;
top:230px;
left:615px;
float:right;
}

Je ne comprends le positionnement absolue avec un float. Smiley eek

Tu peux te contenter à mon avis du float :right en prenant soin de mettre la ligne de code au bon endroit.
Après tu joue avec la largeur de ta div et tu la positionnes beaucoup plus facilement.

ghost

24 Apr 2007 à 21:53

Bonjour,

On commence par là peut être !
http://validator.w3.org/
This page is not Valid XHTML 1.0 Strict!
Result: Failed validation, 20 errors

Après on voit !

cyberfish

25 Apr 2007 à 11:10

Merci pour vos deux réponses.

gilles6975 : oui, j'ai trouvé ça étonnant aussi. C'est corrigé mais ça ne change rien (ou presque). J'ai contourné un peu le truc en insérant un div de la taille de mon image et en mettant cette dernière en background du cadre. Bizarrement, le problème semble réglé sous firefox, mais persiste sous IE 6 et 7. C'est comme si mon image dépassait un peu et que le clic faisait tout remonter pour voir toute l'image (le cadre est en overflow:hidden).

ghost : oui, je sais. Mais tu remarqueras que sur ces 20 erreurs, 19 concernent l'intégration flash. La vingtième est maintenant corrigée. Je ne pense pas (mais peut-être me trompé-je) que réparer maintenant mon intégration flash va résoudre mon problème.

ghost

25 Apr 2007 à 18:13

Re,

Ce n'est pas un décalege vertical de ton lien, c'est que ta page est rechargée et comme son height est supérieur à 100% il y a un décalage d'affichage de la différence (Sais si je suis clair là ? Smiley biggol

)

Bon vite fait car il y a encore a "gratter" et juste pour illustrer la chose

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head> 
<style type="text/css">
html, body{height: 100%; position: relative}
a {
outline : 0;
text-decoration:none;
color : #39357c;
font-weight:bold;
}

a:visited {
color : #000;
}

a:hover {
color : #ff4a00;
}

.invisible {
display:none;
}

a img {
border:none;
}

#header {
width:900px;
height:140px;
}

#page {
position:relative;
width:900px;
height: 100%;
background: lime;
margin:0 auto;
}

body {
margin: 0;
padding: 0;
background: white;
color:black;
font: 80% arial, sans-serif;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
position: absolute;
top: 117px;
left: 240px;
height:23px;
line-height:23px;
z-index:90;
width: 658px;
font-family:arial,sans-serif;
font-size:11px;
font-weight:normal;
}

#menu a {
text-decoration:none;
font-weight:normal;
}

#menu dl {
float: left;
}

#menu dt {
cursor: default;
text-align: center;
font-weight: bold;
margin-right: 1px;
color:#fff;
}

#menu dd {
position:relative;
bottom:1px;
display: none;
border-left:1px solid #2880a4;
border-right:1px solid #2880a4;
}

#menu1 {
width:131px;
}
#smenu1 {
width:129px;
}

#menu2 {
width:131px;
}
#smenu2 {
width:129px;
}

#menu3 {
width:131px;
}
#smenu3 {
width:129px;
}

#menu4 {
width:131px;
}
#smenu4 {
width:129px;
}

#menu5 {
width:129px;
}
#smenu5 {
width:128px;
}

#menu li {
text-align: center;
background: #e5e5e5;
height:23px;
line-height:23px;
border-bottom:1px solid #2880a4;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
cursor:default;
}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #f29d00;
color:#fff;
}

#content {
position: relative;
bottom:1px;
z-index: 75;
color: #000;
height:435px;
width:818px;
border-left:1px solid #39c;
border-right:1px solid #39c;
border-bottom:1px solid #39c;
background-color:red;
background:url(../images/fill-content.jpg) no-repeat 0 0;
padding:20px 40px 20px 40px;
overflow:auto;
}

#left_col {
width:53px;
float:left;
margin-right:30px;
}

#left_col_empty {
width:53px;
float:left;
margin-right:30px;
visibility:hidden;
}

#middle_col {
width:629px;
float:left;
}

#right_col {
width:53px;
float:right;
margin-left:30px;
}

#right_col_empty {
width:53px;
float:right;
margin-left:30px;
visibility:hidden;
}

#content_noelevator {
position: relative;
bottom:1px;
z-index: 75;
color: #000;
height:455px;
width:818px;
border-left:1px solid #39c;
border-right:1px solid #39c;
border-bottom:1px solid #39c;
background-color:#fff;
background:url(../images/fill-content.jpg) no-repeat 0 0;
padding:20px 40px 0 40px;
overflow:hidden;
}

#content_fullscreen {
position: relative;
bottom:1px;
z-index: 75;
color: #000;
height:475px;
width:898px;
border-left:1px solid #39c;
border-right:1px solid #39c;
border-bottom:1px solid #39c;
background-color:#fff;
background:url(../images/fill-content.jpg) no-repeat 0 0;
padding:0;
margin:0;
overflow:hidden;
}

#content_noelevator_norightmargin {
position: relative;
bottom:1px;
z-index: 75;
color: #000;
height:300px;
width:858px;
border-left:1px solid #39c;
border-right:1px solid #39c;
border-bottom:1px solid #39c;
background-color:#fff;
background:url(../images/fill-content.jpg) no-repeat 0 0;
padding:20px 0 0 40px;
}

.photo {
margin-left:20px;
margin-right:20px;
text-align:center;
}

.right {
float:right;
}

.left {
float:left;
}

.label {
color:#000;
font-size:9px;
}

h1 {
color:#ed9900;
font-size:24px;
margin-top:0;
}

h2{
color:#6965ac;
font-size:14px;
}

h3 {
font-weight:bold;
font-size:13px;
}

h4 {
font-weight:bold;
font-size:12px;
}

p {
text-align:justify;
}

em {
font-weight:bold;
font-style:normal;
}

.under_the_rest {
clear:both;
}

#footer {
color:#000;
font-size:9px;
width: 900px;
height:14px;
background: green;
position: absolute;
left: 0;
bottom: 0;
}

#footer li {
display:block;
height:14px;
line-height:14px;
border-right : 1px solid #39c;
border-bottom : 1px solid #39c;
padding : 0 5px;
margin:0;
position:relative;
float:left;
}

#coin_footer {
display:block;
float:left;
width:7px;
height:15px;
padding:0;
margin:0;
border:none;
background:url(../images/coin_footer.gif) top left no-repeat;
}

#footer a {
text-decoration:none;
color:#000;
}

#flashcontent {
border: none;
width: 900px;
height: 140px;
margin:0;
}

#vignette {
background:url(../images/recrutement.png) top left no-repeat;
position:absolute;
top:120px;
left:630px;
width:250px;
height:250px;
}

img {
border:none;
margin:0;
padding:0;
}

#job_opportunities {
width:500px;
height:300px;
overflow:auto;
margin:0;
padding:0 10px;
}

h3 {
font-size:14px;
font-weight:bold;
}

#majors_logos {
width:691px;
display:block;
margin:0 auto;
}

#indes_logos {
width:707px;
display:block;
margin:0 auto;
}

#agreg_logos {
width:797px;
display:block;
margin:0 auto;
}

#resellers_logos {
width:810px;
display:block;
margin:0 auto;
}

#right_arrow {
display:block;
width:53px;
height:146px;
position:relative;
top:100px;
}

#left_arrow {
display:block;
width:53px;
height:146px;
position:relative;
top:100px;
}

#adresse {
text-align:center;
}

/*---------------------------------------------------
LIGHTBOX
---------------------------------------------------*/
#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prev.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/next.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 500px;
	background-color: #000;
	}
	

/* Min-Width */
.lbWidth { /* most browsers */
	position: absolute;
	top: 0px; left: 0px;
	width: 100%;
	min-width: 790px;
	}

* html .lbContent { /* IE6 */
	margin-left: -790px;
	position:relative;
	}

* html .lbMinWidth { /* IE6 */
	padding-left: 790px;
	}
	
	
/* Clearfix */	
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */ 

/*---------------------------------------------------
END LIGHTBOX
---------------------------------------------------*/

.chapeau {
color : #ff4a00;
font-weight : bold;
}

#revue_de_presse {
margin-top : 30px;
}

#revue_de_presse {
font-weight : normal;
color : #000000;
margin : 20px 0 8px 0;
text-align : justify;
padding-left:20px;
}

#revue_de_presse li {
margin : 5px 0 0 0;
}

#revue_de_presse li a {
color : #000000;
font-weight : normal;
}

#revue_de_presse li a:visited {
color : #000000;
}

#revue_de_presse li a:hover {
color : #ff4a00;
}

.opportunities_details li {
margin:5px 0 0 20px;
padding:0;
list-style-type:disc;
}

#opportunities_selector {
position:absolute;
z-index:80;
top:150px;
left:600px;

}

#opportunities_selector a {
text-decoration:none;
font-weight:normal;
}

#pod-platform {
width:510px;
height:200px;
position:relative;
margin:0 auto;
top:20px;
}

#pod-tm-button a {
display:block;
width:150px;
height:200px;
background:url(../images/pod-tm-pod-button.png) 0 0 no-repeat;
float:left;
cursor:default;
}

#pod-tm-button a:hover, #pod-button a:focus {
background:url(../images/pod-tm-pod-button.png) 0 -200px no-repeat;
}

#pod-batch-button a {
display:block;
width:150px;
height:200px;
background:url(../images/pod-batch-pod-button.png) 0 0 no-repeat;
float:left;
cursor:default;
}

#pod-batch-button a:hover, #pod-button a:focus {
background:url(../images/pod-batch-pod-button.png) 0 -200px no-repeat;
}

#pod-bo-button a {
display:block;
width:150px;
height:200px;
background:url(../images/pod-bo-pod-button.png) 0 0 no-repeat;
float:left;
cursor:default;
}

#pod-bo-button a:hover, #pod-bo-button a:focus {
background:url(../images/pod-bo-pod-button.png) 0 -200px no-repeat;
}

.separator {
display:block;
height:200px;
width:30px;
background:url(../images/separator.png) 0 0 no-repeat;
float:left;
}

</style>


</head>
<body>
<div id="page">
	
  <div id="footer"></div>
<div id="header">
</div>
  <div id="menu">

  </div>
 <div id="content_noelevator_norightmargin">
  <h1>Recrutement</h1>
      <div id="opportunities_selector">
     <ul>
      <li><a href="#businessdev">Responsable « Business development »</a></li>

	  <li><a href="#annonce2">Junior developer</a></li>
     </ul>
    </div>
    <div id="vignette"></div>
  <div id="job_opportunities">
   	<a name="businessdev"></a>
	<h3>Poste : Responsable « business development »</h3>
   <p><h4>Contexte</h4>

   <p>La société WMI est spécialisée dans le développement de base de données multimédia et la gestion des droits pour le compte de clients éditeurs phonographiques et distributeurs numériques, tels que Fnacmusic. Dans le cadre de son activité de « plateforme musicale » la société recherche un responsable « Business Development » pour accroître son portefeuille clients.</p>
   <h4>Mission / Résultats attendus</h4>
    <p><ul class="opportunities_details">
     <li>Développer le nombre de « clients » distributeurs numériques</li>
	 <li>Développement du CA par revendeur</li>

     <li>Lancement de projets spéciaux en B2B</li>
	</ul></p>
	<h4>Profil</h4>
     <p><ul class="opportunities_details">
 	  <li>Bac +4/+5, Ecole de commerce ou Universitaire</li>
      <li>Expérience d’au moins 3 à 4 ans, dans la conduite de projet de développement multimédia tant d’un point de vue technique que commercial</li>
      <li>Compétences techniques : conduite de projet, technique de négociation, micro-informatique multimédia, anglais courant.</li>

	 </ul></p></p>
	<a name="annonce2"></a>
	<h3>Annonce numéro 2</h3>
	<h4>blablablabsdlhfqsjkldf</h4>
	 <ul class="opportunities_details">
	  <li>hdtrfqsdlhmqsoifg mqsfdogjmsfd gdlhmqsoifgmq sfdogjmstr fqsdlhmqsoifgmqsfdj msfdgjrfqs dlhmqso ifgmqsfdogj moifgmq sfdogjmsfdgj	shdtrfqsdlhmqsoifg mqsfd ogjmsfhdtrfqsdlhmqsoifg mqsfdogjmsfdhdtrfqsd lhmqsoifgmqsfdogjmsfshdt rfqsdlhmqsoifgm qsfdogjmsfdgj shdtrfqsdl hmqsoifgmqs fdogjmsfdgmqsoifgmqs fdogjmsfdgj</li>
	 </ul>
    </div>
 </div> 


 	</div>  

</body>
</html>

cyberfish

26 Apr 2007 à 18:36

Merci pour ton coup de main ghost, mon problème est réglé. Je m'occupe de la conformité asap.

Et je préviens que le lien du début de cette question sera désactivé demain.

A une prochaine !

Sujet clos

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

[Résolu] Décalage vertical lors du clic sur un lien interne