Probleme ascensseur / barre de navigation dans une page

**bixi** · 09/12/2005, 12h36

Bonjour et bienvenue a moi sur ce forum

J'ai un tout petit probleme auquel je ne trouve pas vraiment de solution

Sur cette page : http://www.annabelletiaffay.com/mode/mode.php
on peut voir que les vignettes en bas se retrouvent sur 2 lignes, alors que dans mon CSS j'aimerais que ces vignettes tiennent sur 1 seul ligne et qu'on puisse y naviguer avec un ascensseur horizontal.

j'ai testé pas mal de solution avec les overflow:scroll mais rien n'a marché

Pourriez vous m'aider?

ps:si vous connaissez une methode plus propre, belle, fonctionnelle en flash meme dites moi..

voici le code html correspondant:

et le CSS:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div class="espace_photo"><br class="clearall" /> 
          <img src="max_a.jpg" id="pouet" />
</div>
<div class="espace_bandeau">
 
       <a href="mode.php?photo=max_a.jpg" OnClick="document.getElementById('pouet').src='max_a.jpg'">
               <img border="0" class="vignette" src="mini_a.jpg" />
       </a>
</div>

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
 
.espace_bandeau
{
    BORDER-TOP: #a9a9a9 1px solid;
    FLOAT: left;
    WIDTH: 100%;
    PADDING-TOP: 3px
}
.espace_photo
{
    FLOAT: left;
    WIDTH: 100%;
    HEIGHT: 425px
}
.vignette
{
    BORDER-RIGHT: #a9a9a9 1px solid
}

merci de votre aide!

**BalBalNet** · 09/12/2005, 16h33

Bonjour.

Ca fait bien longtemps que je n'ai pas développé web mais as-tu essayé de définir un "height" sur ta div bandeau ?

**bixi** · 09/12/2005, 17h09

Salut

He bien j'ai effectivement mit un attribut height:

Code :

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

1
2
.espace_bandeau {padding-top:3px; float:left;width:750px;  [b]height:90px[/b]; border-top: 1px solid #a9a9a9; [b]overflow:scroll[/b];
}

Mais j'ai toujours le meme probleme

**pmartin8** · 09/12/2005, 19h14

essaye seulement avec

Code :

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

1
2
 
{overflow: scroll;overflow-x:hidden;}

comme style.. moi tout fonctionne
apres tu ajoutera tes autres style si tout fonctionne.... tu me drias si ca fonctionne!

**bixi** · 09/12/2005, 23h41

Salut

J'ai enfin reussi merci de ton aide!

Par contre le bon resultat ne s'affiche que sous mozilla, IE ou MyIE2 n'arrive pas a lafficher convenablement... ;(

N'ya til pas une solution plus efficace?

merci

**Auteur** · 10/12/2005, 10h54

bonjour,

essaye ceci :

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
37
 
<html>
<head>
<title></title>
<style type="text/css">
.image{
height: 100px;
}
 
.DivImage{
overflow: scroll;
height: 120px;
width: 400px;
}
</style>
</head>
 
<body>
<div class="DivImage">
 
<nobr>
<img class="image" src="">
<img class="image" src="">
<img class="image" src="">
<img class="image" src="">
<img class="image" src="">
<img class="image" src="">
<img class="image" src="">
<img class="image" src="">
</nobr>
 
</div>
 
 
</body>
 
</html>

j'ai fixé une hauteur et une largeur pour le div. Puis pour éviter un affichage sur plusieurs lignes, j'ai encadré la liste des images avec les balises <nobr></nobr>. Pour éviter un scroll vertical la hauteur du div est plus grande que la hauteur des vignettes.

**pmartin8** · 12/12/2005, 14h56

pour mozilla.. je ne sais pas il faudrait chercher l'équivalent de overflow ...

Probleme ascensseur / barre de navigation dans une page

HTML

Discussions similaires

Partager

Partager