Creer une mosaique avec des DIV sans espaces

**TheWoz** · 04/12/2006, 12h15

Bonjour,

j'essaie depuis quelques temps de corriger un bug d'affichage persistant de mon site. Il s'agit d'un bandeau déroulant faisant défiler des vignettes de photographies. Ce bandeau est composé de quatres éléments : trois éléments gifs, et un élément swf (la partie déroulante, qui est en flash).
Le bandeau se décompose de la façon suivante : un élément gif, l'élément flash, puis le deuxième élément gif, et enfin, en dessous, un troisième élément gif.

C'est entre ce dernier élément et la partie supérieure du bandeau qu'apparait un espace blanc d'environ 4-5 pixels.

voici le code pour le bandeau :

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
 
<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link href="./css/moz/index_moz.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
 
 
	<div id="bandeau_flash_gauche"><img
		src="./public/images/fr/cap_flash.gif" width="107" height="99"
		onmouseover="PassFlash()" alt="" /></div>
 
	<div id="bandeau_flash_centre"><embed src="./doc/film.swf"
		quality="high"
		pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
		type="application/x-shockwave-flash" width="404" height="99"
		align="absmiddle" name="movie_1" swliveconnect="true"></embed></div>
 
	<div id="bandeau_flash_droite"><img src="./images/kdk_mid.gif"
		width="78" height="99" onmouseover="PassFlash()" alt="" /></div>
 
	<div id="bandeau_flash_bas"><img src="./images/bara_flash_btm.gif"
		width="589" height="22" onmouseover="PassFlash()" alt="" /></div>
 
 
</body>
</html>

Et voici le style CSS qui s'y applique :

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
 
#bandeau_flash_gauche{
float:left;
}
 
#bandeau_flash_centre{
float:left;
height:99px;
}
 
#bandeau_flash_droite{
float:left;
}
 
#bandeau_flash_bas{
clear:both;
margin-top:-404px;
}

Vous pouvez voir ci-dessous le résultat actuel :

[IMG] http://www.licencephoto.com/bandeau_fr.html [/IMG]

Merci à tout ceux et celles qui peuvent m'apporter leurs lumières !! J'ai l'impression d'avoir tout essayé, même si je sais bien que ce n'est pas le cas, sinon j'aurais trouvé

Dans l'attente impatiente de vos réponses....

**TheWoz** · 04/12/2006, 15h27

Je viens de remarquer que le prb ne semble pas lié aux CSS : en convertissant la structure de DIVs en tableau, je remarque que le meme espace apparait entre le bas de la peillule et sa partie supérieure. Cela ressemble à un interligne qui se rajouterais spontanément, et en l'absence de CSS... !

Je n'y comprend rien, la réponse devrait vous sembler évidente je suppose mais moi non.

Merci de votre aide.

**MasterOfChakhaL** · 04/12/2006, 16h10

salut et bienvenue à toi sur les forums de developpez.com,

je n'ai pas compris ton

Code :

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

margin-top: -404px;

si tu pouvais en dire plus...

La profusion de balise ne me parait pas nécessaire, j'aurais enlevé toutes les div...

il me paraitrait plus judicieux de définir la taille de tes éléments dans le css (n'oublie pas qu'en css les unités doivent être indiqués car il n'y a pas que les pixels...)

Voilà, j'attends d'en savoir un peu plus...
Bon courage

**TheWoz** · 04/12/2006, 16h48

Merci de ton aide MasterOfChakhaL

Pour margin-top, je ne sais pas trop à quoi il sert... mais si augmenter cette valeur augmente l'interstice entre le bas de la bobine et le reste, la diminuer laisse cet interstice inchangé.

De plus, nouvelle découverte, ce prb se pose différemment sous IE7 !! En effet, bizzarement, si j'appelle la page http://www.licencephoto.com/bandeau_fr.html ou juste http://www.licencephoto.com sous IE7, on ne voit pas la partie bas de la bobine. Mais si je recrée la meme arborescence de fichiers sur ma machine par exemple, et que j'appelle le fichier html concerné dans IE7, j'ai bien le bas qui apparait ! Bref je ne sais pas ce que cette partie a de particulier, mais en tout cas les navigateurs la traite vraiment de façon ésotérique... !
Bref, donc tu me conseilles de virer les divs qui ne sont pas indispensables et de spécifier les dimensions des éléments présents ? Je vais voir ce que je peux faire en attendant ta réponse.
Merci !

**MasterOfChakhaL** · 04/12/2006, 17h25

re,

je pense qu'il faut utiliser les floats que quand c'est nécessaire (en fonction des navigateurs, on galère souvent avec les floats)

tu veux faire un positionnement précis, donc, autant utiliser les propriétés de positinnement.

Code html :

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

1
2
3
4
5
6
7
 
		<div id="bandeau">
			<img id="bandeau_gaughe" src="..." />
			<div id="pellicule" >&nbsp;</div>
			<img id="bandeau_droit" src="..." />
			<img id="bandeau_bas" src="..." />
		</div>

J'ai remplacé le embed par un div car il me semble que ca n'est pas correct. Pour intégrer du flash, jette un oeil sur ce message
Je ne crois pas que ca change beaucoup de toute facon pour le reste.
(il faudra remplacer le div par un object)

le CSS qui va avec:

Code css :

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
 
#bandeau {
	position: relative;
	width: 600px;
	height: 150px;
	overflow: auto;
}
 
#bandeau * {
	position: absolute;
	display: block;
}
 
#bandeau_gaughe {
	top: 0;
	left: 0;
 
	height: 99px;
	width: 107px;
}
#pellicule {
	top: 0;
	left: 108px;
 
	height: 99px;
	width: 404px;
}
#bandeau_droit {
	top: 0;
	left: 513px;
 
	height: 99px;
	width: 78px;
}
#bandeau_bas {
	top: 100px;
	left: 513px;
 
	height: 22px;
	width: 78px;
}

J'ai fait ca vite fait donc vérifie bien les dimensions que j'ai donnée. Une erreur a pu s'y glisser insidueusement..

Voilà, qu'en penses-tu?

**TheWoz** · 05/12/2006, 10h48

Merci MasterOfChakhaL, maintenant, effectivement, j'ai mes éléments graphiques et flash bien jointifs.

Pour ce qui est du embed à remplacer par object, j'ai pas réussi à le faire marcher, je suppose que cela doit se jouer au niveau des paramètres à passer à l'objet et à leur syntaxe.

Seulement, tout aurait été trop simple si cela devait s'arreter là : en effet, à présent, mon beau bandeau déroulant n'est plus à son emplacement normal (cf http://www.licencephoto.com ), mais dans la partie supérieure gauche de la fenêtre, par dessus la barre bleue et le logo... ! Ce qui n'est pas très heureux il faut avouer.

Je met ci-dessous le nouveau code de la 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
 
#bandeau_flash {
	position: relative;
	width: 600px;
	height: 150px;
}
 
#bandeau_flash * {
	position: absolute;
	display: block;
}
 
#bandeau_flash_gauche {
	top: 0;
	left: 0;
	height: 99px;
	width: 107px;
}
#pellicule {
	top: 0;
	left: 107px;
	height: 99px;
	width: 404px;
}
#bandeau_flash_droit {
	top: 0;
	left: 511px;
	height: 99px;
	width: 78px;
}
#bandeau_flash_bas {
	top: 99px;
	left: 0px;
 	height: 22px;
	width: 589px;
}

Puis le code du bandeau (Je sais le embed c'est pas un objet valide, mais le prb ne vient pas de là selon moi)

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
 
<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link href="./css/moz/index_moz.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="bandeau_flash">
		<img id="bandeau_flash_gauche" src="./public/images/fr/cap_flash.gif" onmouseover="PassFlash()" alt="" />
		<embed id="pellicule" src="./doc/film.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" align="absmiddle" name="movie_1" swliveconnect="true"></embed>
		<img id="bandeau_flash_droit" src="./images/kdk_mid.gif" onmouseover="PassFlash()" alt=""/>
		<img id="bandeau_flash_bas" src="./images/bara_flash_btm.gif" onmouseover="PassFlash()" alt=""/>
	</div>
</body>
</html>

Et enfin l'appel du code ci-dessus dans la page d'accueil

Code HTML :

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

1
2
3
4
 
<div id="bandeau_flash">
	<IFRAME SRC="./bandeau_fr.html" NAME="ZONE1" height="140 " width="610 " scrolling="no" frameborder="0"></IFRAME>
</div>

Peut-être l'appel du bandeau en IFRAME est-il inutile ?
Peut-être un simple require php ferait l'affaire, mais comment gérer la feuille de style qui était déclarée dans le code du bandeau ?
Est-ce que l'id de la div dans la page d'accueil et dans le code du bandeau ne rentrent pas en conflits ? Pourtant si je ne garde que l'un des deux id, la mise en page du bandeau est chamboulée.
Est-ce que je laisse ce code tel quel et je corrige le problème uniquement au niveau du code de la page d'accueil ?

Bref, je galère pour ceux et celles qui n'auraient pas saisis lol

En tout cas si toi MasterOfChakhaL ou quelqu'un d'autre a une suggestion ou mieux une solution, j'en serais grandement reconnaissant

Creer une mosaique avec des DIV sans espaces

CSS

Vue hybride

Discussions similaires

Partager

Partager