28220 sujets

CSS et mise en forme, CSS3

Problème image réactive sous firefox

Koukou

J'ai suivi le tuto très simple sur les zones d'image réactives et le problème est que sur firefox, ça ne roule pas alors que sur IE si.

Le code

<html>

<head>

</head>

<style type="text/css">
<!--
body {
background-color: #FFFFFF;
margin: 0;
text-align: center;
}

#splash {
width : 800px;
height : 600px;
background-image: url('images/xxx.jpg');
margin-left: auto;
margin-right: auto;
text-align: left;
}

#zone1 {

width : 127px;
height: 15px;
margin-left: 215px;
margin-top: 507px;
background-color : #000000;
}

#zone2 {

width : 143px;
height: 15px;
margin-left: 5px;
background-color : #000000;

}

#zone3 {

width : 109px;
height: 15px;
margin-left: 5px;
background-color : #000000;

}

#zone4 {

width : 202px;
height: 15px;
margin-left: 275px;
margin-top: 3px;
background-color : #000000;
}

#zone5 {

width : 70px;
height: 15px;
margin-left: 5px;
margin-top: 3px;
background-color : #000000;
}



--!>
</style>

<body>

<div id="splash">

<a id="zone1" href="/aaaa" title="aaaa"></a>
<a id="zone2" href="/bbbb" title="bbbb"></a>
<a id="zone3" href="/cccc" title="cccc"></a>
<a id="zone4" href="/dddd" title="dddd"></a>
<a id="zone5" href="/eeee" title="eeee"></a>



</div>

</body>

</html>


Merci d'avance
Salut !!!

Il ne faut pas mettre ton css entre commentaires, seul IE l'interprète ainsi, donc enlèves ces balises de commentaires Smiley cligne

Ah aussi, enlèves les quotes des adresse de tes images dans ton css.
Ainsi :

<html>

<head>

</head>

<style type="text/css">

body {
background-color: #FFFFFF;
margin: 0;
text-align: center;
}

#splash {
width : 800px;
height : 600px;
background-image: url(images/xxx.jpg);
margin-left: auto;
margin-right: auto;
text-align: left
}


#zone1 {

width : 127px;
height: 15px;
margin-left: 215px;
margin-top: 507px;
background-color : #000000;
}

#zone2 {

width : 143px;
height: 15px;
margin-left: 5px;
background-color : #000000;

}

#zone3 {

width : 109px;
height: 15px;
margin-left: 5px;
background-color : #000000;

}

#zone4 {

width : 202px;
height: 15px;
margin-left: 275px;
margin-top: 3px;
background-color : #000000;
}

#zone5 {

width : 70px;
height: 15px;
margin-left: 5px;
margin-top: 3px;
background-color : #000000;
}




</style>

<body>

<div id="splash">

<a id="zone1" href="/aaaa" title="aaaa"></a>
<a id="zone2" href="/bbbb" title="bbbb"></a>
<a id="zone3" href="/cccc" title="cccc"></a>
<a id="zone4" href="/dddd" title="dddd"></a>
<a id="zone5" href="/eeee" title="eeee"></a>



</div>



</body>

</html>


ne marche pas non plus Smiley bawling
Merci spirou

Les zones cliquables qui ne s'affichaient pas sur firefox s'affichent désormais bien.

Smiley cligne
Sujet clos
Aller à