Discussion :

[Oluha]

Salut

Je suis en train de réaliser une nouvelle page d'accueil pour le site d'un client d'après une maquette PDF qu'ils m'ont envoyé. Je fais la mise en forme avec CSS. Je dois faire passer des calques par dessus d'autres. Après pas mal de temps j'ai réussi à obtenir ce que je voulais sur Firefox. Par contre sous IE, j'ai un div qui est trop haut. J'ai beau indiquer une valeur à height dans mon CSS, rien à faire.

Voilà le code HTML du cadre qui contient les calques et qui semble trop haut sous IE :

Code :

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

1
2
3
4
5
6
7
	<div class="cadrebas">
		<img src="images_accueil/produitsderives.gif">
		<div id="produits"><img src="images_accueil/produits.gif" alt="Cartes de v&oelig;ux"></div>
		<div id="protegem"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Cartes','','images_accueil/cartes_2.gif',1)"><img src="images_accueil/cartes_1.gif" alt="Les cartes de voeux" name="Cartes" width="111" height="25" border="0"></a>
		<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('protege','','images_accueil/proteges_2.gif',1)"><img src="images_accueil/proteges_1.gif" alt="Les protèges-Magnificat" name="protege" width="144" height="25" border="0"></a>
		<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('cd','','images_accueil/cd_2.gif',1)"><img src="images_accueil/cd_1.gif" alt="Les CD & partitions" name="cd" width="116" height="25" border="0"></a></div> 
	</div>

Voilà le 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
.cadrebas {
	background: #FEF1D5;
	border-bottom: 3px solid #B41B14;
	text-align:right;
	border: 1px solid #000000;
	height: 105px;
}
 
#produits {
	position:relative;
	top : -25px;
	left: -110px;
	z-index: 1;
	border: 1px solid #000000;
}
 
#protegem {
	position:relative;
	height: 75px;
	top : -120px;
	left: 0px;
	z-index: 3;
	border: 1px solid #000000;
}

J'ai joins les captures sous IE et FF.

Là je sèche complètement, mais peut être que c'est ma méthode qui n'est pas la bonne
Le tout c'est que l'image avec les cartes passent par dessus le titre "produits dérivés" et que les liens sous forme d'images passent par dessus les cartes. Le tout devant marcher sous IE et FF. J'avais trouvé une autre solution qui fonctionnait sous IE mais plus sous FF.

Merci

[Oluha]

j'ai trouvé une feinte en ajoutant overflow:hidden, mais il y a peut être plus propre ?