Voici la page de code html faite pour un affichage sous mozilla.
Cela fonctionne parfaitement avec cet explorateur.
Seulement en passant sous IE , c'est la cata...
MA PAGE SOMMAIRE code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
[ Lien ]">
<html xmlns=" [ Lien ]" xml:lang="fr" lang="fr">
<head>
<title>FanFanLoup, ma passion des perles et du tricot</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" media="screen" type="text/css" title="sommaire" href="page sommaire.css"/>
<script type="text/javascript">
var current = 0;
var width = 4;
var max = 4;
var prefixe = "mini_";
function previous(nb) {
showWindow(false);
current = current - nb;
if (current < 0) {
current = 0;
}
showWindow(true);
}
function next(nb) {
showWindow(false);
current = current + nb;
if (current > (max - width)) {
current = max - width;
}
showWindow(true);
}
function showWindow(show) {
for(i = current ; i < current + width ; i++) {
el = document.getElementById(prefixe+i);
if (el) {
el.style.display = show?'inline':'none';
}
}
}
function changeImage(filename)
{
document.mainimage.src = filename;
}
</script>
<script language="JavaScript">
<!--
// [ Lien ]
function noclic(clic) {
var mess="Image protégée !!!"; //changer le message
if (navigator.appName == 'Netscape' && clic.which==3) {
alert(mess);
}
else
if (navigator.appName == 'Microsoft Internet Explorer' && event.button==2) {
alert(mess);
}}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown = noclic;
//-->
</script>
</head>
<body>
<form method="post" action="traitement.php" id="email">
<p>
<label for="email">Pour recevoir la Newsletter :</label><br />
<input type="text" name="email" id="email1" tabindex="30" />
</p>
</form>
<a href="index.html"><img scr="logo fanfanloup text.jpg" id="logo"/></a>
<a href="index.html"><img scr="papillon30.gif" id="logo1"/></a>
<a href="perle.html"><img scr="boutons/bt1.gif" id="bt1"/></a>
<a href="tricot.html"><img scr="boutons/bt1.gif" id="bt2"/></a>
<img scr="bouton/bt3.jpg"/>
<img scr="anim240.gif" id="papideco"/>
<img scr="fond visionneuse.jpg" id="fdviso"/>
<input type="submit" value="Valider" id="validnews"/>
<a href="perle.html"><img scr="lienperle.jpg" id="lienperle"/></a>
<a href="tricot.html"><img scr="lientricot.jpg" id="lientricot"/></a>
<img scr="liencreation.jpg" id="liencreation"/>
<img scr="lientirets.jpg" id="lientirets"/>
<a href="mailto:frouss2@free.fr"><img scr="email_animaux17.gif" id="papillonmail"/></a>
<img src="fanfanloup-extrait.gif" width="300" height="360" border="0" id="fanfanloupextrait"/>
</body>
</html>
MA PAGE SOMMAIRE code CSS
#logo
{
float:left;
background-image:url("papillon30.gif");
background-repeat:no-repeat;
margin-left:40px;
margin-top:-539px;
width:80px;
height:80px;
border:none;
}
#logo1
{
float:left;
background-image:url("logo fanfanloup text.jpg");
background-repeat:no-repeat;
margin-left:20px;
margin-top:-449px;
width:110px;
height:40px;
border:none;
}
#papillonmail
{
float:left;
background-image:url("email_animaux17.gif");
background-repeat:no repeat;
margin-left:19px;
margin-top:-20px;
padding:0px;
width:150px;
height:60px;
border:none;
}
#fdviso
{
float:left;
background-image:url("fond visionneuse.jpg");
background-repeat:no repeat;
margin-left:620px;
margin-top:-440px;
padding:0px;
width:300px;
height:360px;
border:solid yellow 3px;
}
#fanfanloupextrait
{
float:left;
background-image:url("fanfanloup-extrait.gif");
background-repeat:no repeat;
margin-left:454px;
margin-top:-437px;
padding:0px;
width:300px;
height:360px;
}
body
{
background-image:url("fond fanfanloup.jpg");
background-repeat:no-repeat;
margin-left:auto;
}
#bt1
{
background-image:url("boutons/bt1.gif");
background-repeat:no-repeat;
float:left;
margin-top:-260px;
margin-left:15px;
width:80px;
height:20px;
border:none;
}
#bt2
{
background-image:url("boutons/bt1.gif");
background-repeat:no-repeat;
float:left;
margin-top:-200px;
margin-left:15px;
width:80px;
height:20px;
border:none;
}
#email1
{
background-color:#ffd3fd;
}
#validnews
{
background-image:url("boutons/bt7.jpg");
background-repeat:no-repeat;
float:left;
margin-top:-40px;
margin-left:168px;
width:85px;
height:25px;
border:none;
}
#email
{
color:#e543bc;
margin-top:494px;
margin-left:20px;
border:none;
}
#liencreation
{
background-image:url("liencreation.jpg");
background-repeat:no-repeat;
float:left;
padding:0;
margin-top:-330px;
margin-left:20px;
width:130px;
height:40px;
border:none;
}
#lientricot
{
background-image:url("lientricot.jpg");
background-repeat:no-repeat;
float:left;
padding:0;
margin-top:-210px;
margin-left:92px;
width:100px;
height:40px;
border:none;
}
#lienperle
{
background-image:url("lienperle.jpg");
background-repeat:no-repeat;
float:left;
padding:0;
margin-top:-270px;
margin-left:92px;
width:100px;
height:40px;
border:none;
}
#lientirets
{
background-image:url("lientirets.jpg");
background-repeat:no-repeat;
float:left;
padding:0;
margin-top:-140px;
margin-left:18px;
width:260px;
height:30px;
border:none;
}
#papideco
{
background-image:url("anim240.gif");
background-repeat:no-repeat;
float:left;
padding:0;
margin-top:-305px;
margin-left:362px;
width:80px;
height:80px;
border:none;
}
#bt1:hover
{
background-image:url("boutons/bt3.jpg");
background-repeat:no-repeat;
float:left;
padding:0;
margin-top:-260px;
margin-left:15px;
width:80px;
height:20px;
border:none;
}
#bt2:hover
{
background-image:url("boutons/bt3.jpg");
background-repeat:no-repeat;
float:left;
padding:0;
margin-top:-200px;
margin-left:15px;
width:80px;
height:20px;
border:none;
}
Que faut-il changer ou rajouter pour que ce soit compatible pour chaque explorateur ?
Merci a vous.