28173 sujets

CSS et mise en forme, CSS3

Bonjour, j'ai un problème lié à la superposition de 2 div qui contiennent chacune un flash...

J'ai essayé d'utiliser la commande z-index mais celle-ci s'avere inefficace que ce soit sous IE ou sous Mozilla.

J'ai lu plusieurs tuto sur cette commande et je ne comprends pas pourquoi elle ne marche pas dans mon cas.

Voici le lien de mon site : http://www.musictorockthenation.com/Furax/accueil.php

Et le CSS :
body{
	background-color : #FFFFFF;
	text-align:center;
	background-image :  url(img/ap_cent.gif);
	font-family : Arial, Verdana, Arial, sans-serif;
	font-size : 10pt;
	SCROLLBAR-FACE-COLOR: #990000;
	SCROLLBAR-HIGHLIGHT-COLOR: #000000; 
	SCROLLBAR-SHADOW-COLOR: #000000; 
	SCROLLBAR-3DLIGHT-COLOR: #000000; 
	SCROLLBAR-ARROW-COLOR: #FFFFFF; 
	SCROLLBAR-TRACK-COLOR: #FFFFFF;
	SCROLLBAR-DARKSHADOW-COLOR: #000000;
}

p {
	font-family:arial, sans-serif;
	font-size:12px;
	color:#ffffff;
	text-align:left;
}

h1{
	font-size : 14pt;
	margin : 0%;
}

.haut{
	width : 696;
	height : 250;
	margin-left : auto;
	margin-right : auto;
}
.logodroit{
	float:left; 
	margin-left:-100;
	z-index: 1;
}
.logogauche{
	float:left;
	margin-left:-115;  
	z-index: 2;
}

.milieu{
	background-image :  url(img/ap.gif);
	height : 500;
	width : 696;
	margin-left: auto;
	margin-right: auto;
	text-align:left;
	font-color:white;
	padding : 20 20 20 20;	
}

.bas{
	background-image :  url(img/ap_bas.gif);
	height : 29;
	width : 696;
	margin-left: auto;
	margin-right: auto;
}



J'ai un deuxieme probleme qui est lié au flash de gauche qui est "mangé" comme vous pouvez le constater car il sort de la div parent. N'y a t il pas d'autre solution que d'augmenter la largeur de la div parent ?

Enfin, troisieme probleme qui n'apparait que sous Mozilla. Ce navigateur affiche quelque chose de byzarre qui est liée à l'arriere plan de la div "milieu". Là aussi je ne comprends pas pourquoi Mozilla affiche cela.

Merci d'avance pour votre aide.
J'ai résolu le dernier problème qui était lié au padding...

Mais je comprends vraiment pas pourquoi la commande z-index ne marche pas...
z-index ne fonctionne que pour les éléments donc la position est différente de static (absolute, relative, etc.)
J'ai testé avec une position absolute et le résultat s'avère le meme... Le flash de droite s'obstine à rester au dessus du flash de gauche.

Ce qui est byzarre c'est que quand je remplace le flash de droite par une image, alors le flash de gauche passe au dessus de l'image...

Je trouve ça pas très logique...

De toute façon, j'ai essayé de faire une mise en page avec des positions absolute mais FF et IE ne donnent jamais les memes résultats, il y a toujours quelques pixels de décalages ce qui fout en l'air toute ma présentation.

Je crois que je vais finir par mettre une image à la place du flash de droite.

Mais ma plus grosse galère actuellement c'est de réussir à empècher IE de "manger la moitié de mon flash de gauche qui sort du <div> containeur. FF lui ne me mange pas cette partie.

Tout ça c'est à cause de la position float:left; associée au margin-left:-50 mais c'est la seule combinaison qui me donne le meme résultat sous IE et FF.

Bref ça fait plus de 2h que je galere là dessus et je suis en train de me demander si je ne vais pas reprendre toute la présentation à 0.

Voici le lien avec le flash de droite remplacé par une image. Comme on le voit, cela colle bien que ce soit sous FF ou IE. Seul hic : IE me mange la moitié de mon flash de gauche......... Smiley bawling

http://www.musictorockthenation.com/Furax/accueil2.php
Modifié par Tom-Tom (23 Oct 2006 - 13:41)
Perso devant une 'galère' qui a priori semble illogique, je regarde si mon html est valide, et s'il ne l'est pas, je regarde sur quoi ca bug. (parce que ce n'est pas parce qu'il te manque des 'alt' sur les img que que pose des pb à ce niveau).

Mais par contre ton embed n'est pas valide . Smiley confus

Il faut ulitiser la balise object comme il faut. il y a plusieurs fils la dessus et, je crois, un article ds le stutos aussi.

(mais je te laisse chercher les liens, parce que là j'ai pas le temps).

Une fois que ce sera ok tu pourras debuguer.

A mon avis.

Mais c'est vrai que je bute aussi parfois sur ces foutus z-index Smiley murf