Décallage entre div

**xxkirastarothxx** · 12/09/2008, 12h23

Bonjours à tous,
je développe essentiellement sous linux, donc la verif avec IE n'est pas simple;
Je viens de m'apercevoir que mes div de titre étaient comletement décaller, et je n'arrive pas a régler le problème:

voici le code:

Code :

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

1
2
3
<div class='h3_top'></div>
<div class='h3_corps'><?php echo $donnees['titre'];?></div>
<div class='h3_bottom'></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
19
20
21
22
23
24
25
.h3_top
{
	background-image: url('images/h3_title_top.png');
	background-repeat: no-repeat;
	height: 8px;
	margin: 0;
	padding: 0;
}
 
.h3_corps
{
	background-image: url('images/h3_title.png');
	margin: 0;
	padding: 0;
	text-align:center;
}
 
.h3_bottom
{
	background-image: url('images/h3_title_bottom.png');
	background-repeat: no-repeat;
	height: 9px;
	margin: 0;
	padding: 0;
}

Merci

**pop_up** · 12/09/2008, 15h38

1ere chose :
Les règles incontournables d'utilisation de ce forum

... je voudrais porter à votre attention que ces forums ne doivent contenir que le code affiché par le navigateur. En effet, les codes PHP ou tout autre langage dynamique ne servent qu'à générer le corps de votre page et donc votre problème ne pourra être résolu qu'en étudiant le code interprété par le navigateur. De ce fait, avant de poser votre question merci d'épurer votre code de tout langage (serveur ou client).

Sinon du coté de ton code, je vois pas ce qui pourrait ne pas convenir a part peut etre le height: 8px;

J'ai testé ceci sous IE6 :

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
38
39
40
41
 
<!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" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <title>untitled</title>
	<style TYPE="text/css">
	.h3_top
{
	background-image: url('images/cadre-droit-haut.gif');
	background-repeat: no-repeat;
	height: 8px;
	margin: 0;
	padding: 0;
}
 
.h3_corps
{
	background-image: url('images/cadre-droit-milieu.gif');
	background-repeat: repeat-y;
	margin: 0;
	padding: 0;
}
 
.h3_bottom
{
	background-image: url('images/cadre-droit-bas.gif');
	background-repeat: no-repeat;
	height: 9px;
	margin: 0;
	padding: 0;
}
	</style>
</head>
<body>
<div class='h3_top'></div>
<div class='h3_corps'>bla bla</div>
<div class='h3_bottom'></div>
 
</body>
</HTML>

Mon image cadre-droit-haut.gif fait plus de 8px de hauteur et l'affichage est ok dans le send ou les div sont bien accolés en hauteur.

Est tu sur que ton image h3_title_top.png fait bien 8px de haut ? En plus c'est du png donc attention a ce format car sous IE, il y a quelques problemes avec le png (je te laisse chercher les post en relation sur le forum)

Tu peux aussi essayé d'ajouté la propriété background-position: bottom pour ta classe .h3_top

Pour débugguer je te conseil de passer en gif.

**xxkirastarothxx** · 12/09/2008, 16h26

Envoyé par pop_up

1ere chose :
Les règles incontournables d'utilisation de ce forum

Ops j'ai pas fais attention au <?php echo $donnees['title'];?> désolé

Envoyé par pop_up

Pour débugguer je te conseil de passer en gif.

Ah bah oui effectivement, ça fais quelques semaines que je galère là dessus et efait ça passe niquel en gif... 'lol'

Merci beaucoup

**xxkirastarothxx** · 15/09/2008, 09h40

Bon j'ai du me tromper dans les test:

je viens d'essayer de nouveau avec ton code:

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
38
39
40
41
 
<!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" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <title>untitled</title>
	<style TYPE="text/css">
	.h3_top
{
	background-image: url('images/cadre-droit-haut.gif');
	background-repeat: no-repeat;
	height: 8px;
	margin: 0;
	padding: 0;
}
 
.h3_corps
{
	background-image: url('images/cadre-droit-milieu.gif');
	background-repeat: repeat-y;
	margin: 0;
	padding: 0;
}
 
.h3_bottom
{
	background-image: url('images/cadre-droit-bas.gif');
	background-repeat: no-repeat;
	height: 9px;
	margin: 0;
	padding: 0;
}
	</style>
</head>
<body>
<div class='h3_top'></div>
<div class='h3_corps'>bla bla</div>
<div class='h3_bottom'></div>
 
</body>
</HTML>

et voici le resultats sous ie6:

et voici avec repeat-y sur .h3_top

j'ai bien convertit mes fichier en gif, et je comprends pas d'ou viens le problème :S
j'ai vérifié aussi, mes images font la bonne taille :s
Un peu d'aide ?

apparement ie ne veux pas faire de div de moins de 20px de haut, c'est ça le problème enfait

J'ai provisoirement réglé le problème avec des title_top.gif de 20px, mais il doit exister un moyen de réduire la hauteur des divs non ? :S

Décallage entre div

CSS

Vue hybride

Discussions similaires

Partager

Partager