Avoir un texte défilant au dessus d'une image

**evra76** · 20/05/2009, 20h56

j' ai créer une box avec 9 images de type gif mais le probleme est que je désire écrire sur la gif centrale et de manière a ce que le texte defile de bas en haut.
actuellement le texte defile de bas en haut mais n' est pas dans la box, il se place juste en dessous.

voici mon code css :

Code :

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

1
2
3
4
5
6
7
8
9
10
#box {
 float:left;
 }
 
#box img {
margin: -3px;
 
background-image: url("centre-d2b.gif");
 
}

voici mon code html :

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
<div id="box">
<p>
<img src="haut-gauche-d2b.gif">
<img src="haut-centre-d2b.gif">
<img src="haut-droite-d2b.gif"><br/>
<img src="gauche-d2b.gif">
<img src="centre-d2b.gif">
<img src="droite-d2b.gif"><br/>
<img src="bas-gauche-d2b.gif">
<img src="bas-centre-d2b.gif">
<img src="bas-droite-d2b.gif">
<marquee direction="up" scrollamount="2">
<font size="2" color="grey"><center><h3>PROMOTION !!!</h3><br/>
<h4>SAGE 30</h4><br/>
<h4>690 EURO</h4></center></font>
 
</marquee></p>
</div>

voila ce serait simpa de m' aider, j'ai essayé plein de chose mais je n'y arrive pas.

**12monkeys** · 21/05/2009, 01h19

Bonsoir

Voici un exemple simple :

Il faut mettre l'image en arrière plan, j'ai un peu simplifié le code, sortie la mise en forme du html et mis dans le css...

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr-FR">
<head>
<title>Testes</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
div#box {
        width:600px;
}
div#txt_defil {
        width:200px;
        height:200px;
        background-image: url('img1.jpg');
        float:left;
        font-size:0.9em;
        color: gray;
}
div#box img {
        float:left;
}
h3, h4 {
        text-align: center;
}
</style>
</head>
 
<body>
 
<div id="box">
 
  <img src="img1.jpg" width="200" height="200" />
  <img src="img1.jpg" width="200" height="200" />
  <img src="img1.jpg" width="200" height="200" />
  <img src="img1.jpg" width="200" height="200" />
  <div id="txt_defil">
    <marquee direction="up" scrollamount="2">
    <h3>PROMOTION !!!</h3>
    <h4>SAGE 30</h4>
    <h4>690 EURO</h4>
    </marquee>
  </div>
  <img src="img1.jpg" width="200" height="200" />
  <img src="img1.jpg" width="200" height="200" />
  <img src="img1.jpg" width="200" height="200" />
  <img src="img1.jpg" width="200" height="200" />
 
</div>
 
</body>
</html>

**evra76** · 21/05/2009, 10h45

le texte défile bien sur l' image que je veux mais le problème est
que les 9 images gif qui composent la box ne sont plus collés. Donc en fait
il faut trouver le moyen que la box reste collé et que le texte défile sur limage centrale

**12monkeys** · 21/05/2009, 11h37

Bonjour

C'est bizarre parce que chez moi les images sont toutes collées les unes aux autres ! Et ce autant sur IE7 que Firefox 3

Peut être une déclaration css contradictoire dans ton code. As tu une page en ligne, sinon montre nous au moins le code que tu as produit.

**evra76** · 21/05/2009, 12h03

http://funfilm.olympe-network.com/Index.php

aller sur cette page et vous verrez mon problème

**12monkeys** · 21/05/2009, 12h31

C'est une simple question de taille des éléments : si le bloc txt_defil est plus large que le conteneur les images à gauche et droite de ce bloc vont forcément ne pas être aligné...

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr-FR">
<head>
<title>Testes</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
div#box {
        width:160px;
}
div#txt_defil {
        width:132px;
        height:132px;
        background-image: url('img1.jpg');
        float:left;
        font-size:0.9em;
        color: gray;
}
div#box img {
        float:left;
}
h3, h4 {
        text-align: center;
}
marquee {
        height:132px;
        margin:0;
}
</style>
</head>
 
<body>
 
<div id="box">
 
  <img src="Index_fichiers/haut-gauche-d2b.gif" alt="" />
  <img src="Index_fichiers/haut-centre-d2b.gif" alt="" />
  <img src="Index_fichiers/haut-droite-d2b.gif" alt="" />
  <img src="Index_fichiers/gauche-d2b.gif" alt="" />
  <div id="txt_defil">
    <marquee direction="up" scrollamount="2">
    <h3>PROMOTION !!!</h3>
    <h4>SAGE 30</h4>
    <h4>690 EURO</h4>
    </marquee>
    </div>
  <img src="Index_fichiers/droite-d2b.gif" alt="" />
  <img src="Index_fichiers/bas-gauche-d2b.gif" alt="" />
  <img src="Index_fichiers/bas-centre-d2b.gif" alt="" />
  <img src="Index_fichiers/bas-droite-d2b.gif" alt="" />
 
</div>
 
</body>
</html>

**evra76** · 21/05/2009, 12h53

ca marche toujours pas je ne comprens pas

**12monkeys** · 21/05/2009, 12h57

Envoyé par evra76

ca marche toujours pas je ne comprens pas

C'est pas comme ça qu'on va faire avancer le schmilblick !!!

Je ne vois pas de changement sur la page que tu as mis en lien plus haut.

Alors commence par dire exactement ce qui ne va pas et éventuellement mets cette page à jour...

J'ai encore une fois texté sur IE 7 et Firefox 3 sans souci...

**evra76** · 21/05/2009, 13h06

voila ce que je veux avoir
http://e-gest.votreboutiquepro.com/
la box promotion sur la gauche

et voila ce qe j'ai
http://funfilm.olympe-network.com/Index.php

bon je doi men aller pour raison perso si possible on verra ce soir

**12monkeys** · 21/05/2009, 13h23

Deux choses :

Tu as oublié :

Code :

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

1
2
3
div#box img {
	float:left;
}

Et tu as mis ceci :

Code :

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

1
2
3
4
5
 #box img {
 
margin: -3px;
 
	}

qui à mon sens ne sert strictement rien, je ne vois pas ce que tu veut faire avec ça et puis ça casse tout la mise en page, donc retire le.

**evra76** · 21/05/2009, 13h35

merci ça marche, j' avais mis sa quand je n'avais pas écrit le message a défiler
mais effectivement sans celui-ci ça fonctionne en tout cas.
merci beaucoup bonne journée!!!

Avoir un texte défilant au dessus d'une image

Positionnement en CSS avec z-index

Discussions similaires

Partager

Partager