Quelques problèmes de mise en ligne...

Fermé
KARINE - Modifié par KARINE81 le 22/03/2013 à 23:47
KARINE81 Messages postés 8 Date d'inscription vendredi 22 mars 2013 Statut Membre Dernière intervention 23 mars 2013 - 23 mars 2013 à 18:16
Bonjour,

J'ai mis mon site en ligne, http://www.strategieetcourtage.com/index.html , et j'ai plusieurs problèmes que je n'arrive pas à résoudre.
En effet, étant débutante, je dois avoir fait quelques erreurs avec dreamweaver.
Mon site n'est pas centré sur tous les navigateurs et les photos en survol n'apparaisse pas sur internet explorer. De plus sur internet explorer 7, l'image de fond est décalé.

Pourriez vous m'aider à résoudre ces quelques problèmes?

Merci beaucoup pour votre aide.

Karine.
A voir également:

19 réponses

ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
23 mars 2013 à 10:44
je ne pense pas que c'est un problème de mise en ligne, mais plutôt un problème de programmation, regarde du côté du css.
0
Ok merci beaucoup. Mais que dois je mettre dans le CSS?
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
23 mars 2013 à 11:27
je ne connais ton code, c'est pas facile de donner des renseignements, mais essai de mettre margin:0 auto; dans le body.
sur ie 7 le chemin de l'image me semble pas correct, pour le survol de l'image tu utilises du javascript?
0
KARINE81 Messages postés 8 Date d'inscription vendredi 22 mars 2013 Statut Membre Dernière intervention 23 mars 2013
23 mars 2013 à 11:30
Voici mon code :

@charset "utf-8";
/* CSS Document */

#page {
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#contenu {
margin: 1em;
color: #FFF;
position: relative;
height: 184px;
right: -4px;
}
html {
background: url(images/fondaccueilgeneral.jpg) no-repeat;
background-color: #eef0ed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
right: -50px;
position: relative;
top: 0px;

}
#contenu #apDiv13 p {
color: #333;
}

a img
{
border: none;
}

Je te remercie pour ta précieuse aide.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
23 mars 2013 à 11:37
donne aussi le html
0
KARINE81 Messages postés 8 Date d'inscription vendredi 22 mars 2013 Statut Membre Dernière intervention 23 mars 2013
23 mars 2013 à 11:39
Voici le HTML de la page d'accueil

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>STRATEGIE & COURTAGE</title>
<link href="accueilgeneral.css" rel="stylesheet" type="text/css">
<style type="text/css">

#apDiv1 {
position: relative;
width: 200px;
height: 115px;
z-index: 1;
right: -130px;
}
#apDiv2 {
position: relative;
width: 200px;
height: 63px;
z-index: 2;
left: 0px;
top: 0px;
right: -250px;
}
#apDiv3 {
position: relative;
width: 200px;
height: 115px;
z-index: 2;
right: -135px;
}
#apDiv4 {
position: relative;
width: 200px;
height: 115px;
z-index: 3;
}
#apDiv5 {
position: relative;
width: 173px;
height: 58px;
z-index: 3;
right: -270px;
}
#apDiv6 {
position: relative;
width: 200px;
height: 115px;
z-index: 4;
left: 0px;
top: 0px;
right: 0px;
}
#apDiv7 {
position: absolute;
width: 200px;
height: 115px;
z-index: 4;
left: 17px;
top: 45px;
}
#apDiv8 {
position: absolute;
width: 200px;
height: 115px;
z-index: 4;
left: 264px;
top: 45px;
}
#apDiv9 {
position: absolute;
width: 91px;
height: 27px;
z-index: 4;
left: 129px;
top: 294px;
}
#apDiv10 {
position: absolute;
width: 91px;
height: 24px;
z-index: 4;
left: 375px;
top: 296px;
}
#apDiv11 {
position: absolute;
width: 200px;
height: 115px;
z-index: 5;
left: 18px;
top: 45px;
}
#apDiv12 {
position: absolute;
width: 94px;
height: 26px;
z-index: 6;
left: 374px;
top: 293px;
}
#apDiv13 {
position: absolute;
width: 200px;
height: 115px;
z-index: 7;
left: 519px;
top: 118px;
}
#apDiv14 {
position: absolute;
width: 200px;
height: 115px;
z-index: 8;
left: 520px;
top: 175px;
}
#apDiv15 {
position: absolute;
width: 200px;
height: 115px;
z-index: 9;
left: 619px;
top: 289px;
}
#apDiv16 {
position: absolute;
width: 200px;
height: 115px;
z-index: 9;
left: 623px;
top: 294px;
}
</style>
<script type="text/javascript">
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_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_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('images/GESTION DE PAT COULEUR.jpg')">
<div id="page">
<body onload="MM_preloadImages('images/GESTION DE PAT COULEUR.jpg')">
<div id="page">
<div id="apDiv5">
<p> </p>
<p><a href="index.html"><img src="images/LOGO.png" width="478" height="51"></a></p>
</div>
<p> </p>
<p> </p>
<div id="apDiv1">
<div align="center"><img src="images/ECHECS.png" width="740" height="279"></div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="apDiv3">
<div id="apDiv13">
<form id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input type="text" name="textfield" id="textfield">
</form>
</div>
<div id="apDiv14">
<form id="form2" name="form2" method="post" action="">
<label for="textfield3"></label>
<input type="text" name="textfield2" id="textfield3">
</form>
</div>
<div id="apDiv16"><a href="index.html"><img src="images/CONNEXION.png" width="91" height="25"></a></div>
<img src="images/ENCADRES-OKOK.png" width="730" height="336">
<div id="apDiv12"><a href="accueilcourtage.html"><img src="images/EN-SAVOIR-PLUS.png" width="93" height="26"></a></div>
<div id="apDiv11"><a href="accueilgestion.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/GESTION DE PAT COULEUR.jpg',1)"><img src="images/GESTION DE PAT N&B.jpg" width="200" height="133" id="Image6"></a></div>
<div id="apDiv8"><a href="accueilcourtage.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/COURTAGE COULEUR.jpg',0)"><img src="images/COURTAGE N&B.jpg" width="200" height="133" id="Image5"></a></div>
<div id="apDiv9"><a href="accueilgestion.html"><img src="images/EN-SAVOIR-PLUS.png" width="93" height="26"></a></div>
<p> </p>
</div>
</body>
</h2>
</div>
</html>


Merci.
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
Modifié par ideal23 le 23/03/2013 à 11:59
déjà , pourquoi 2 balises body
<body onLoad="MM_preloadImages('images/GESTION DE PAT COULEUR.jpg')">
<div id="page">
<body onload="MM_preloadImages('images/GESTION DE PAT COULEUR.jpg')">
<div id="page">
0
KARINE81 Messages postés 8 Date d'inscription vendredi 22 mars 2013 Statut Membre Dernière intervention 23 mars 2013
23 mars 2013 à 12:03
Je pense que ça doit être une erreur.
Le html a été généré automatiquement par dreamweaver à partir des images de création, et de la fonction insertion image survolé.

Merci.
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
23 mars 2013 à 12:12
ca c'est pas correct:
</div>
</body>
</h2>
</div>
</html>
de plus je ne retrouve pas la div contenu qui correspond au css.
j'utilise également dreamweaver, je vais copier ton code et essayer de voir tout çà.
0
KARINE81 Messages postés 8 Date d'inscription vendredi 22 mars 2013 Statut Membre Dernière intervention 23 mars 2013
23 mars 2013 à 12:18
Merci beaucoup, c'est très gentil, çà va me sortir une épine du pied!
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
23 mars 2013 à 14:50
html pour le centrage et une bonne disposition:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>STRATEGIE & COURTAGE</title>
<link href="accueilgeneral.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- conteneur contient tout le contenu du site 1000px -->
<div id="conteneur">
<!-- header le titre ou bannière en général -->
<div id="header">
</div>
<!-- fin header -->
<!-- id echecs contient image echecs -->
<div id="echecs">
<img src="images/ECHECS.png" width="730" height="280" alt="">
</div>
<!-- fin echecs -->
<div id="apDiv1">
<img src="images/ENCADRES-OKOK.png" width="730" height="336" alt="">
</div>
</div>
</div>
</body>
</html>

css , le tout dans un fichier:
@charset "utf-8";
/* CSS Document */
body {
padding:0;
margin:0;
background-image: url(images/fondaccueilgeneral.jpg);
background-repeat: no-repeat;
background-position: top center;
}
#header{/* logo */
background-image: url(images/LOGO.png);
height: 180px;
background-repeat: no-repeat;
background-position: center;
}
#contenueur { /* l'ensemble du contenu du site */
width: 1000px;
margin: 0 auto;
position: relative;
}

#echecs{
text-align:center;
}
#apDiv1{
text-align:center;
margin-top: 30px;
}

réduire au maxi les images à la taille des div, travail en local pour l'instant,
dream apporte beaucoup de code , pour le survol un petit javascript ou css fera l'affaire.
je m'absente quelques heures et je fini le travail au niveau du bloc encadrés
0
KARINE81 Messages postés 8 Date d'inscription vendredi 22 mars 2013 Statut Membre Dernière intervention 23 mars 2013
23 mars 2013 à 14:56
Merci beaucoup, je vais tester tous cela! A toute à l'heure!
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
23 mars 2013 à 16:06
en, programmation web , pour les images, pas de GESTION DE PAT COULEUR.jpg, pas de majuscule, pas d'espace ni de tiret, faire: gestion_de_pat_couleur.jpg , sinon l'image n'apparaît pas sur le net
0
Je vais les renommer toutes. J'ai essayer ton CSS et ton HTML. J'ai un problème car le fond se centre mais n'est pas extensible. D'autre part si je mets ton CSS j'ai toutes les autres pages HTML qui ne sont plus centré. Que me conseilles tu de faire?
Merci pour ton aide.
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
23 mars 2013 à 17:10
pour étirer l'image , c'est pas top, en javascript je pense on a des exemples sur google sinon tu la fait plus large ou tu fait un dégradé sur les cotés pour harmoniser les couleurs ou tu mets une autre couleur que le blanc.
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
23 mars 2013 à 17:35
j'ai réduit ton image de fond à 579 de hauteur , en prenant que le haut et j'ai ensuite mis les dimensions suivantes: largeur 1600, hauteur toujours 579px, le reste c'est le blanc du background du de la page ca rend bien , tu peux essayer ou je t'envoie l'image.
0
KARINE81 Messages postés 8 Date d'inscription vendredi 22 mars 2013 Statut Membre Dernière intervention 23 mars 2013
23 mars 2013 à 17:43
Je veux bien l'image si tu peux. La je suis en train de renommer toutes les images, un boulot de fou!
Ensuite que devrais je faire pour les autres pages?

Merci
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
23 mars 2013 à 17:59
utilise le css qui centre bien, mais il faut que mettes tout le css dans le fichier
<link href="accueilgeneral.css" rel="stylesheet" type="text/css"> et ce lien sur toutes les pages, donne-moi ton email pour la photo , par mp si tu veux pas l'afficher sur le forum.
0
KARINE81 Messages postés 8 Date d'inscription vendredi 22 mars 2013 Statut Membre Dernière intervention 23 mars 2013
23 mars 2013 à 18:16
mon mail : contact@st-co.fr

Merci.

Pour les photos survolés, j'ai mis les photos en minuscules et ça ne fonctionne toujours pas, que faire?

Quand je met le css que tu m'as fait, j'ai aucune page de centrer, je comprend pas!! Que puis je faire?
0