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>

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

je viens d'essayer et ça ne fonctionne pas. je comprend pas de bloquer sur un truc aussi simple. je vais devenir fou.

**ornitho13** · 17/02/2011, 21h12

je viens de retester en local et cela fonctionne.
Par contre, je me pose une question. Sur quels navigateurs testes tu?

**guillaumeabxl** · 17/02/2011, 21h30

firefox. Même chose sur IE par contre ça marche sous Safari

**ornitho13** · 17/02/2011, 21h41

j'ai testé sous firefox et cela fonctionne également (mais je ne peux pas slider beaucoup d'image contrairement à chrome).

Je te met le code que j'ai sur ma page de test:

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<div id="resize"> 
     <a name="menu">menu</a>
     <div id="wrapper"> 
          <div class="big"><div class="back"><a href="#menu"><img src="http://www.acielouvert.net/scroller/img/back.png" border="0"/></a></div><a name="01"></a><a href="#02"><img src="http://www.acielouvert.net/scroller/img/tactio/01_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="http://www.acielouvert.net/scroller/img/back.png" border="0"/></a></div><a name="02"></a><a href="#03"><img src="http://www.acielouvert.net/scroller/img/tactio/02_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="http://www.acielouvert.net/scroller/img/back.png" border="0"/></a></div><a name="03"></a><a href="#04"><img src="http://www.acielouvert.net/scroller/img/tactio/03_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="http://www.acielouvert.net/scroller/img/back.png" border="0"/></a></div><a name="04"></a><a href="#05"><img src="http://www.acielouvert.net/scroller/img/tactio/04_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="http://www.acielouvert.net/scroller/img/back.png" border="0"/></a></div><a name="05"></a><a href="#06"><img src="http://www.acielouvert.net/scroller/img/tactio/05_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="http://www.acielouvert.net/scroller/img/back.png" border="0"/></a></div><a name="06"></a><a href="#07"><img src="http://www.acielouvert.net/scroller/img/tactio/06_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="http://www.acielouvert.net/scroller/img/back.png" border="0"/></a></div><a name="07"></a><a href="#08"><img src="http://www.acielouvert.net/scroller/img/tactio/07_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="http://www.acielouvert.net/scroller/img/back.png" border="0"/></a></div><a name="08"></a><a href="#09"><img src="http://www.acielouvert.net/scroller/img/tactio/08_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="http://www.acielouvert.net/scroller/img/back.png" border="0"/></a></div><a name="09"></a><a href="#10"><img src="http://www.acielouvert.net/scroller/img/tactio/09_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="http://www.acielouvert.net/scroller/img/back.png" border="0"/></a></div><a name="10"></a><a href="#11"><img src="http://www.acielouvert.net/scroller/img/tactio/10_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="http://www.acielouvert.net/scroller/img/back.png" border="0"/></a></div><a name="11"></a><a href="#12"><img src="http://www.acielouvert.net/scroller/img/tactio/11_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="http://www.acielouvert.net/scroller/img/back.png" border="0"/></a></div><a name="12"></a><a href="#13"><img src="http://www.acielouvert.net/scroller/img/tactio/12_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="http://www.acielouvert.net/scroller/img/back.png" border="0"/></a></div><a name="13"></a><a href="#14"><img src="http://www.acielouvert.net/scroller/img/tactio/13_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="http://www.acielouvert.net/scroller/img/back.png" border="0"/></a></div><a name="14"></a><a href="#15"><img src="http://www.acielouvert.net/scroller/img/tactio/14_big.jpg" border="0" alt=""/></a></div> 
          <div class="big"><div class="back"><a href="#menu"><img src="http://www.acielouvert.net/scroller/img/back.png" border="0"/></a></div><a name="15"></a><a href="#15"><img src="http://www.acielouvert.net/scroller/img/tactio/15_big.jpg" border="0" alt=""/></a></div> 
     </div> 
</div> 
</body>
</html>

**guillaumeabxl** · 17/02/2011, 21h49

sous chrome ça fonctionne mais sur FF, IE on s'arrête à l'image n°4. Mystère

**guillaumeabxl** · 17/02/2011, 21h56

regarde à ces adresse, j'utilise un smooth scroll (scroller.js) horizontale :

La page avec le overflow: hidden; est visible ici :

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

Voici l'ID qui est centrer dans la page (avec le overflow qui bloc le scroller)

Code :

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

1
2
3
4
5
6
7
#resize {
    width: 1600px;
    position: relative;
    left: 50%;
    margin-left: -800px;
    overflow: hidden;
}

Et voici la même page sans le overflow: hidden; et ici le "scroller" fonctionne.

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

Code :

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

1
2
3
4
5
6
#resize {
    width: 1600px;
    position: relative;
    left: 50%;
    margin-left: -800px;
}

Je ne comprend pas en quoi le overflow: hidden; empêche de faire fonctionner le scroll.

**guillaumeabxl** · 21/02/2011, 15h46

Merci pour tes réponses ornitho13 mais le problème est toujours là.
Quelqu'un aurait t'il déjà expérimenter des problèmes avec des ancres et le overflow hidden ?

Problème d'Overflow et d'ancres html

CSS

Discussions similaires

Partager

Partager