Quelques problèmes de mise en ligne...
KARINE
-
KARINE81 Messages postés 8 Date d'inscription Statut Membre Dernière intervention -
KARINE81 Messages postés 8 Date d'inscription Statut Membre Dernière intervention -
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.
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:
- Quelques problèmes de mise en ligne...
- Partage de photos en ligne - Guide
- Mise en forme conditionnelle excel - Guide
- Mètre en ligne - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Mise en forme tableau word - Guide
19 réponses
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.
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?
sur ie 7 le chemin de l'image me semble pas correct, pour le survol de l'image tu utilises du javascript?
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.
@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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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.
<!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.
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">
<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">
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.
Le html a été généré automatiquement par dreamweaver à partir des images de création, et de la fonction insertion image survolé.
Merci.
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 çà.
</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 çà.
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
<!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
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
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.
Merci pour ton aide.
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.
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.
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
Ensuite que devrais je faire pour les autres pages?
Merci
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.
<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.
