28172 sujets

CSS et mise en forme, CSS3

Problème d'habillage publicitaire sous IE < 8

Bonjour!
Je suis en apprentissage dans une entreprise où je dois réaliser des sites web ou faire de petites modifications sur ceux existants.
Actuellement je dois réaliser l'habillage publicitaire temporaire d'un site.
Après des heures d'acharnement j'ai trouvé la solution, et si ma solution marche très bien sur IE8 et IE9 et tous les autres navigateurs, il pose problème à la version 6 et 7 d'IE.

Je ne parviens pas du tout à rendre l'habillage fonctionnel pour ces versions d'IE... Smiley decu

Voici mon code

<body>
<a href="http://www.francetransactions.com/details/offre_631_offers.htm" title="Et Vlan ! J'ai changé d'air bancaire ! 60 € offerts pour l'ouverture d'un Livret Epargne Orange !" rel="nofollow" target="_blank" class="fondcliquable"></a>
</body>



body {
font-family: Arial, Helvetica, FreeSans, sans-serif; 
font-size: 0.8em; 
color: #858484;
width: 100%;
height:100%;
background:#262626 url(/img/habillage_ING_noir.jpg) top center no-repeat ;
}

.fondcliquable {
position: absolute;
width: 100%;
height:2000px;
cursor: pointer;
z-index: 0;
display: block;
top: 0px; 
}



Voici le résultat attendu et qui marche sur IE > 7 et tous les autres navigateurs :
http://www.je-veux-changer-de-banque.fr/img/OK.png



Et voici mon problème sur IE6 et IE7
http://www.je-veux-changer-de-banque.fr/img/probleme.png


ps : l'habillage publicitaire n'est pour l'instant pas optimisé, il n'est là pour l'instant qu'en guise d'exemple. Je veux juste le placer correctement.
Modifié par Laurie-Anne (30 Dec 2011 - 13:44)
salut,

tu devrais donner l'url du site si c'est possible.
si pas accessible, donnes tout le code, je pense que ça sera mieux pour ceux qui voudront essayer de t'aider.
Je ne peux pas donner l'adresse du site car la version habillée ne doit pas être en ligne avant que celle-ci soit terminée...
Et il ne me parait pas nécessaire de donner autre chose que ce code-ci vu que l'habillage ne concerne que ces propriétés là. Smiley confus
comme je ne suis pas certain de comprendre le problème, je répond peut être à côté.
pour le body penses à mettre la propriété "position" à la valeur "relative" et ensuite positionnes le fond cliquable à ta convenance avec les propriétés "left" et "top".

sinon pour le code tu donnes ce qui concerne le fond cliquable, mais apparemment c'est le contenu qui se comporte pas comme tu voudrais, et là on voit rien.

dernière chose, la balise HTML 
<a href="" title=""></a>
sans texte c'est moyen.
et penses que la propriété "text-indent" n'est pas apprécié de google. l'attribut "title" est peut être un peu trop long aussi.
Bonjour,

Est-ce que tu as un doctype valide ?

Ta technique n'est pas idéale en effet (image de fond porteuse de contenu). Est-ce que le site a une largeur fixe ou extensible ?
Le site a une largeur fixe.
Voilà le doctype du site :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

o06, Voici un code CSS un peu plus étoffé :

* {
	margin: 0;
	padding: 0;
}
body 
{
  font-family: Arial, Helvetica, FreeSans, sans-serif; 
  font-size: 0.8em; 
  color: #858484;
  width: 100%;
  height:100%;
  background:#262626 url(/img/habillage_ING_noir.jpg) top center no-repeat ;
  position:relative;
}

#page {
    margin: 0 auto;
    width: 1020px;
	min-height:200px;
    display: block;
	margin-top:150px;
}

#header {
	width: 1020px;
	float:left;
	border-bottom:solid 1px #b2bac0 ;
	margin-bottom:1px;
	background-color:white;
	position:relative;
}

#content {
	border: #b2bac0 1px solid;
	width: 1020px;
	background:#FFF;
	float:left;
	position:relative;
	padding-top:5px;
}
#menu {
  float: left;
  font-family: arial, verdana, courrier;
  font-size: 12px;
  margin-top: 10px;
  padding-left: 9px;
  border-right: 1px solid #b2bac0;
  width: 210px;
  text-decoration: underline;
}
#menu ul, #menu ol, #menu li {
  padding: 0;
	font-weight: bold;
	line-height: 3em;
	list-style-type:none;
}
.news li {
  margin-left: 5px;
}

#colGauche {
    width: 219px;
    float: left;
	border-right:#b2bac0  1px solid;
	text-align:justify;
	margin-bottom: 20px;
}
#colDroite {
    width: 800px;
	/*padding: 0.75em 0;*/
    float: left;
		text-align:justify;
}
#colGauche ul, #colDroite ul {
	font-weight: normal;
	/* margin: 1em; */
	list-style-type: disc;
	line-height: 1.3em;
	color: #9c0000;
}
#colGauche img, #colDroite img { 
/* float: left; */
} 
#colonneGauche {
    width: 440px;
    float: left;
}
#colonneDroite {
    width: 325px;
    float: left;
}

#footer {
	background-color:white;
	width:1020px;
	clear:both;
	height:120px;
	padding-top:5px;
	padding-left:2px;
	border-top:solid 1px #b2bac0 ;
}

#footer a{
color:white;
}


#footer p {
	line-height: 1.3em;
	float: left ;
	margin-left: 20px
}
#article {margin: 10px;}

.fondcliquable {

position: absolute;

width: 100%;

height:2000px;

cursor: pointer;

z-index: 0;

display: block;

top: 0px; 

}
re,

juste pour savoir, ton fond cliquable est sous le "contenu global" du site et c'est une balise 
<a href=""></a>
"modifiée" ?
le cas échéant, tu ne rencontres pas des problèmes avec la zone cliquable ? par ex. pas cliquable sur les côtés ou alors tu ne te retrouves pas avec un pointer sur tout le contenu ?
Sujet clos
Aller à