Problème d'Overflow et d'ancres html

**guillaumeabxl** · 17/02/2011, 15h55

Bonjour,

J'ai un soucis avec mes liens ancre lorsque je déclare une div en overflow: hidden;
Le scroll ne se fait tout simplement plus.

voila ma css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
body {
	margin: 0;
}
 
/*====================*/
/*=== Container ===*/
/*====================*/
 
#resize {
	width: 1600px;
	position: relative;
	left: 50%;
	margin-left: -800px;
	overflow: hidden;
}
#wrapper {
	width: 6810px;
	height: 300px;
}
 
/*====================*/
/*=== Images ===*/
/*====================*/
 
.big {
	float: left;
	width: 454px;
	z-index: 0;
}
.back {
	float: right;
	width: 448px;
	position: absolute;
	text-align:right;
	z-index: 4;
}

et mon html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>à ciel ouvert - Tactio</title>
 
<link rel="stylesheet" href="css/objects.css" type="text/css" />
 
</head>
<body><a name="menu"></a>
<div id="resize">
<div id="wrapper">
<div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="01"></a><a href="#02"><img src="img/tactio/01_big.jpg" border="0" alt=""/></a></div>
<div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="02"></a><a href="#03"><img src="img/tactio/02_big.jpg" border="0" alt=""/></a></div>
<div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="03"></a><a href="#04"><img src="img/tactio/03_big.jpg" border="0" alt=""/></a></div>
<div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="04"></a><a href="#05"><img src="img/tactio/04_big.jpg" border="0" alt=""/></a></div>
<div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="05"></a><a href="#06"><img src="img/tactio/05_big.jpg" border="0" alt=""/></a></div>
<div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="06"></a><a href="#07"><img src="img/tactio/06_big.jpg" border="0" alt=""/></a></div>
<div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="07"></a><a href="#08"><img src="img/tactio/07_big.jpg" border="0" alt=""/></a></div>
<div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="08"></a><a href="#09"><img src="img/tactio/08_big.jpg" border="0" alt=""/></a></div>
<div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="09"></a><a href="#10"><img src="img/tactio/09_big.jpg" border="0" alt=""/></a></div>
<div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="10"></a><a href="#11"><img src="img/tactio/10_big.jpg" border="0" alt=""/></a></div>
<div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="11"></a><a href="#12"><img src="img/tactio/11_big.jpg" border="0" alt=""/></a></div>
<div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="12"></a><a href="#13"><img src="img/tactio/12_big.jpg" border="0" alt=""/></a></div>
<div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="13"></a><a href="#14"><img src="img/tactio/13_big.jpg" border="0" alt=""/></a></div>
<div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="14"></a><a href="#15"><img src="img/tactio/14_big.jpg" border="0" alt=""/></a></div>
<div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="15"></a><a href="#15"><img src="img/tactio/15_big.jpg" border="0" alt=""/></a></div>
</div>
</div>
</body>
</html>

la page est également publié ici :

http://www.acielouvert.net/scroller/scroller4.html

J'aimerais bien trouver la solution, je retourne le problème dans tout les sens.

**ornitho13** · 17/02/2011, 16h08

Salut,

Déja il faudrait pouvoir aller jusqu'à la dernière image et cela n'est pas possible à cause du "overflow:hidden".
Ici comme on a l'overflow, on voit les premières images donc quand on clique sur le bouton "back", il n'y a pas de scroll vers l'ancre étant donné que l'on est déjà à la position de l'ancre (situé au dessus de la première image que l'on voit).

**guillaumeabxl** · 17/02/2011, 20h11

Désolé j'ai oublié de dire que les liens vers les autres images sont sur les images elles même. Quand tu clic sur une image tu passes à la suivante le tout horizontalement.

**ornitho13** · 17/02/2011, 20h21

Pour que cela fonctionne, il y a 2 choses à faire.
Dans le <a> il faut mettre du texte.
Le <a> en question, il faut le placer dans le <div id="resize">.
Voici ce que ça donnerait:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<div id="resize"> 
     <a name="menu">menu</a>
     <div id="wrapper"> 
          <div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="01"></a><a href="#02"><img src="img/tactio/01_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="02"></a><a href="#03"><img src="img/tactio/02_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="03"></a><a href="#04"><img src="img/tactio/03_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="04"></a><a href="#05"><img src="img/tactio/04_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="05"></a><a href="#06"><img src="img/tactio/05_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="06"></a><a href="#07"><img src="img/tactio/06_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="07"></a><a href="#08"><img src="img/tactio/07_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="08"></a><a href="#09"><img src="img/tactio/08_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="09"></a><a href="#10"><img src="img/tactio/09_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="10"></a><a href="#11"><img src="img/tactio/10_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="11"></a><a href="#12"><img src="img/tactio/11_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="12"></a><a href="#13"><img src="img/tactio/12_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="13"></a><a href="#14"><img src="img/tactio/13_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="14"></a><a href="#15"><img src="img/tactio/14_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="img/back.png" border="0"/></a></div><a name="15"></a><a href="#15"><img src="img/tactio/15_big.jpg" border="0" alt=""/></a></div> 
     </div> 
</div>