1 - Principe
2 - Exemple
3 - Possibilités
4 - Code
4.1 - HTML
4.2 - CSS
1 - Principe
J'ai une <div> avec dimensions fixes, une propriété overflow-x: scroll, dans cette <div> un tableau horizontal y sera présenté de trés grande largeur, dans chaque colonne un contenu et une ancre nommée 1,2,3... . Pour naviguer dans ces differents contenus (colonne du tableau donc), j'utilise un petit menu, avec sur chaque item du menu le lien classique pour une ancre, #1, #2.
Jusqu'ici tout vas bien. Là ou il y a vraiment un comportement que je ne comprends pas, lorsque je navigue dans le menu de façon croissante, tout vas bien.
Mais lorsque je veux naviguer de façon anarchique (!), je ne peux plus pointer vers mes ancres.
2 - Exemple
Exploration croissante
clic sur le menu N°2 -> Je vais à l'ancre 2.
clic sur le menu N°3 -> Je vais à l'ancre 3.
clic sur le menu N°1 -> Je retourne à l'ancre 1 (surprise !).
Exploration anarchique
clic sur le menu N°3 -> Je vais à l'ancre 3.
clic sur le menu N°2 -> Bha rien.
clic sur le menu N°3 -> Je vais à l'ancre 3.
clic sur le menu N°2 -> Bha rien.
Une démonstration : ici. - - (!) Page relativement lourde en images. +- 300Ko.
3 - Possibilités ?
Je pensais à un problème d'espacement des ancres, j'ai rajouté des colonnes vide entre chaque contenu, mais il y a du mieu mais c'est toujours pas ça, je me déplace bien vers l'ancre, mais je ne me cale pas dessus.
4 - Code
4-1 HTML
Code : Tout sélectionner
<!-- Début du conteneur -->
<div class="clips">
<!-- Début du Menu avec dans l'ordre #top, #n2, #n3 -->
<div class="menu_clips" align="right">
<div class="menu_clips_numero" align="center"><a href="#n3">3</a></div>
<div class="menu_clips_numero" align="center"><a href="#n2">2</a></div><div class="menu_clips_numero" align="center"><a href="#top">1</a></div>
</div>
<!-- Fin du Menu -->
<!-- Début de la div avec l'overflow-x:scroll -->
<div class="affichage_clips">
<!-- Début de la table -->
<table height="235" border="0" cellpadding="0" cellspacing="0">
<tr><a name="top"></a>
<td>
<!-- Début elt 1 -->
<div class="clip"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="50%"><p>Titre Clip 1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></td>
<td valign="middle"><img src="pics/temp-lecteur.jpg" width="267" height="219"></td>
</tr>
</table>
</div>
<!-- Fin elt 1 -->
</td>
<td>
<!-- Début colonne remplissage -->
<div class="clip"></div>
<!-- Fin colonne remplissage -->
</td>
<td><a name="n2" id="n2"></a>
<div class="clip">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="50%"><p>Titre Clip 2 </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></td>
<td valign="middle"><img src="pics/temp-lecteur.jpg" width="267" height="219"></td>
</tr>
</table>
</div></td>
<td> <div class="clip"></div></td>
<td><a name="n3" id="n3"></a>
<div class="clip">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="50%"><p>Titre Clip 3 </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></td>
<td valign="middle"><img src="pics/temp-lecteur.jpg" width="267" height="219"></td>
</tr>
</table>
</div></td>
</tr>
</table>
<!-- Début de la table -->
</div>
<!-- Fin de la div avec l'overflow-x:scroll -->
</div>
<!-- Fin du conteneur -->
Code : Tout sélectionner
/* Conteneur d'un seul clip */
.clip {
width: 500px;
height: 235px;
float:left;
background-color: #0066CC;
margin-right: 10px;
margin-left: 10px;
margin-top:5px;
}
/* Menu de navigation */
.menu_clips_numero {
height: 20px;
width: 20px;
background-color: #b09158;
margin-left:5px;
margin-top:5px;
float:right;
padding-top:3px;
}
/* Conteneur des tous les clips, surtout pour la MEP */
.clips {
height: 305px;
width: 578px;
background-image: url(../pics/multimedia/clips.png);
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
position:relative;
top:200px;
}
/* Ma div avec overflow-x */
.affichage_clips {
display:block;
position: relative;
margin-right: auto;
margin-left: auto;
top: 30px;
width: 90%;
height: 260px;
overflow-x: scroll;
}
Je sais pas si cela est très clair, mais je peux donner plus d'explication au cas ou !
Merci d'avance pour vos réponses.
