J'y suis en fait depuis 1 semaine sur cette page et j'ai passé mon week end entier dessus. (et je vous remercie de vous pencher sur mon problème)
Le soucis de l'exemple en ligne est que j'en ai plusieurs tous différents.
Mais voilà la page du visuel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>QuelVoyant.com - Index</title>
<style type="text/css" media="Screen">
@import url(style.css);
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('menu/conseillers%202.jpg','menu/accueil%202.jpg','menu/compte%202.jpg','menu/charte%202.jpg','menu/aide%202.jpg')">
<div id="wrapper">
<div id="header"><img src="menu/logo.jpg" width="264" height="84"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('accueil','','menu/accueil%202.jpg',1)"><img src="menu/accueil%201.jpg" alt="accueil" name="accueil" width="121" height="84" border="0"></a><a href="conseillers.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('conseillers','','menu/conseillers%202.jpg',1)"><img src="menu/conseillers%201.jpg" alt="conseillers" name="conseillers" width="124" height="84" border="0"></a><a href="cms.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('compte','','menu/compte%202.jpg',1)"><img src="menu/compte%201.jpg" alt="compte" name="compte" width="135" height="84" border="0"></a><a href="cms.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('charte','','menu/charte%202.jpg',1)"><img src="menu/charte%201.jpg" alt="charte" name="charte" width="189" height="84" border="0"></a><a href="cms.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aide','','menu/aide%202.jpg',1)"><img src="menu/aide%201.jpg" alt="aide" name="aide" width="89" height="84" border="0"></a>
</div>
<div id="center">
<div id="top_windows_1"></div>
<div id="bg_windows_1"></div>
<div id="bottom_windows_1"></div>
<div id="top_windows_2"></div>
<div id="bg_windows_2" class="Style1">
<p>Veuillez entrer l'adresse mail de votre filleul ci dessous.</p>
<p>E-mail
<input name="mail_parainage" type="text" id="mail_parainage">
<input type="submit" name="Submit" value="envoyer">
</p>
</div>
<div id="bottom_windows_2"></div>
<div id="top_windows_3"></div>
<div id="bg_windows_3">
<input name="mail" type="text" id="mail" value="email" size="15">
<input name="password" type="password" id="password" value="password" size="15">
<input type="submit" name="Submit" value="OK">
<br>
<br>
<div id="txt_mini">E-mail ou mot de passe oublié ? Cliquez ici </div> </div>
<div id="bottom_windows_3"></div>
<div id="top_windows_4"></div>
<div id="bg_windows_4">
<div id="new_inscription"> </p>Pseudo
<input name="pseudo_inscription" type="text" id="pseudo_inscription">
</p>
<p>E-mail
<input name="mail_inscription" type="text" id="mail_inscription">
</p>
<p>Mot de passe
<input name="password_inscription" type="password" id="password_inscription">
</p>
<p>Confirmation
<input name="confirm_inscription" type="text" id="confirm_inscription">
</p>
<p>Téléphone
<input name="tel_inscription" type="text" id="tel_inscription">
</p>
<p>Date de Naissance
<input name="date_inscription" type="text" id="date_inscription">
</p>
</div>
<div id="txt_mini">
<p>
<br>
<input name="btn_majeur" type="radio" value="radiobutton">
Je certifie être majeur(e) et avoir lu et accepté les <a href="#">conditions générales de service</a>. <br>
<br>
<input name="btn_newsletter" type="radio" value="radiobutton">
Je souhaite recvoir la lettre d'information QuelVoyant.com.<br>
<br>
<input name="btn_annulation" type="radio" value="radiobutton">
Décocher cette case si vous ne souhaitez pas recevoir notre sélection d'invitations ou d'offres de nos partenaires.
</div></div>
<div id="bottom_windows_4"></div>
</div>
<div id="footer"></div>
<div id="copyright">© THEORIX s.a.r.l. 2006 - Informations légales - Déontologie - Charte de Confidentialité - Liens</div>
</div>
</body>
</html>
et le css
/*********************************
Général
*********************************/
body {
background: #ffffff url(bg.gif) 50% 0;
color: #333333;
padding: 0;
margin: 0px;
font-family: Verdana, Arial, sans-serif;
font-size:11px;
text-align: justify;
}
#wrapper {
margin-top: 10px;
margin-left:-460px;
width:920px;
text-align: left;
left: 245px;
top: -2px;
}
#wrapper {
width: 920px;
margin: -5px auto;
padding-left:0px;
}
#wrapper {
text-align: left;
}
#header {
left:0px;
margin-top:10px;
width:922px;
height:84px;
z-index:1;
background-image: url(header.jpg);
background-repeat:no-repeat;
}
#footer {
left:0px;
margin-top:0px;
width:920px;
height:24px;
z-index:1;
background-image: url(footer.jpg);
}
#center {
left:0px;
top:94px;
width:920px;
z-index:1;
background-image: url(bg.jpg);
}
#copyright {
width: 920px;
padding-bottom: 15px;
padding-top: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-align:center;
color:#636363;
}
#txt_mini{
font-family: Verdana, Arial, sans-serif;
font-size:9px;
text-align: justify;
}
#new_inscription{
text-align: right;
padding-right:20px;
}
/*********************************
Les Liens
*********************************/
a:link{
color:#0091ef;
text-decoration:none;
font-weight:bold;
}
a:visited {
color:#0091ef;
text-decoration:none;
font-weight:bold;
}
a:hover {
color:#004979;
text-decoration:none;
font-weight:bold;
}
a:active {
color:#004979;
text-decoration:none;
font-weight:bold;
}
/*********************************
Menu Navigation
*********************************/
#haut{
width:770px;
height:1.5em;
margin-top:.3em;
line-height:1.5em;
background-color:#8E6784;
border-top:1px solid #6C3089;
border-bottom:1px solid #6C3089;
}
#menuhaut li{
float:left;
list-style-type:none;
background-color:#8E6784;
}
#menuhaut a{
display:block;
padding-left:16px;
padding-right:16px;
color:#FFF;
font-size:0.8em;
letter-spacing:2px;
text-decoration:none;
text-align:center;
}
#menuhaut a#active{
background-color:white;
color:#6C3089;
}
#menuhaut a:hover{
color:#FFFFCC;
}
/*********************************
Bloc Windows
*********************************/
/*Windows 1*/
#top_windows_1 {
margin-left:30px;
top:10px;
width:514px;
height:31px;
z-index:1;
background-image: url(top_windows_1.jpg);
background-repeat:no-repeat;
}
#bg_windows_1 {
margin-left:30px;
top:124px;
width:513px;
height:351px;
z-index:2;
background-image: url(bg_windows.jpg);
background-repeat: repeat-y;
}
#bottom_windows_1{
margin-left:30px;
margin-bottom:20px;
top:466px;
width:513px;
height:16px;
z-index:3;
background-image: url(bottom_windows_1.jpg);
background-repeat:no-repeat;
}
/*Windows 2*/
#top_windows_2 {
margin-left:30px;
top:506px;
width:513px;
height:31px;
z-index:1;
background-image: url(top_windows_2.jpg);
background-repeat:no-repeat;
}
#bg_windows_2 {
margin-left:30px;
margin-top:0px;
width:476px;
height:57px;
z-index:2;
background-image: url(bg_windows.jpg);
background-repeat: repeat-y;
padding-left:20px;
padding-right:20px;
padding-top:2px;
padding-bottom:10px;
}
#bottom_windows_2{
margin-left:30px;
margin-top:0px;
width:513px;
height:16px;
z-index:3;
background-image: url(bottom_windows_1.jpg);
background-repeat:no-repeat;
}
/*Windows 3*/
#top_windows_3{
position:absolute;
left:808px;
top:95px;
width:328px;
height:31px;
z-index:1;
background-image: url(top_windows_3.jpg);
background-repeat:no-repeat;
}
#bg_windows_3{
position:absolute;
left:808px;
top:124px;
width:289px;
height:43px;
z-index:2;
background-image: url(bg_windows_1.jpg);
background-repeat: repeat-y;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
}
#bottom_windows_3{
position:absolute;
left:808px;
top:187px;
width:328px;
height:16px;
z-index:3;
background-image: url(bottom_windows_2.jpg);
background-repeat:no-repeat;
}
/*Windows 4*/
#top_windows_4 {
position:absolute;
left:809px;
top:213px;
width:328px;
height:31px;
z-index:1;
background-image: url(top_windows_4.jpg);
background-repeat:no-repeat;
}
#bg_windows_4 {
position:absolute;
left:809px;
top:241px;
width:289px;
height:346px;
z-index:2;
background-image: url(bg_windows_1.jpg);
background-repeat: repeat-y;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
}
#bottom_windows_4{
position:absolute;
left:809px;
top:615px;
width:328px;
height:9px;
z-index:3;
background-image: url(bottom_windows_2.jpg);
background-repeat:no-repeat;
}
J'ai le soucis autant sur FF et IE.
Par contre sur l'un de mes dernier test j'ai ma page qui fonctionne sur FF ( mais au lieu d'avoir 2 blov avec image de fond je n'en ai fait qu'un) mais sur le mode graphique de dreamweaver et IE c'est la catastrophe.[/i][/i][/i][/i][/i][/i]
Modifié par Otaking (07 Oct 2007 - 23:17)
