Demande d'aide: déformation IE et Firefox

Fermé
delphea - 12 mai 2010 à 17:00
 delphea - 17 mai 2010 à 13:09
Bonjour,
Je suis totalement désepérée, j'ai crée un site internet pour ma boite, alors que ce n'est absolument pas ma formation, mais j'ai plutôt réussi. Le site marche parfaitement sur l'ordi ou je l'ai crée et qui fonctionne sous internet explorer.

Le problème, c'est que dès que j'ouvre les pages sur un autre ordinateur ou mozilla, toute la mise n page est déformée, et notamment le fond du corps qui disparait.

Quelqu'un pourrait il m'aider et me dire comment vous envoyer les pages sur le forum, pour mieux comprendre la situation?



16 réponses

wpro Messages postés 53 Date d'inscription jeudi 6 mai 2010 Statut Membre Dernière intervention 15 mai 2010 7
12 mai 2010 à 17:23
Peut-on avoir l'adresse du site et eventuellement le code source sinon je crains qu'on ne puisse t'aider sans sa ...
0
Le site n'est pas encore en ligne c'est pour cela que je n'ai pas mis l'adresse.
Le fichier source de la première page
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Laboratoire d'Analyses et Expertises </title>

<meta name= "description" content="Expertise et analyse scientifique:"/>
<meta name="keywords" content="analyses,expertise,laboratoire "/>

<link rel="stylesheet" media="screen" type="text/css" title="page1" href="new1.css"/>


<script type="text/javascript">
var imgs=new Array();
imgs[0]="images/I1.png";
imgs[1]="images/I2.png";
imgs[2]="images/I3.png";
imgs[3]="images/I4.png";


var cpt=0;
function changeimages()
{
document.getElementById("ima").src=imgs[cpt];
cpt++;
if(cpt>=imgs.length) cpt=0;
setTimeout("changeimages()",3000);
}
</script>

</head>

<body onload="changeimages()">

<p>
<img id="ima" src="images/I1.png" alt="images"/><a href="http://www.editeurjavascript.com/mycircle"></a>
</p>

<h1> Laboratoire </h1>
<h2><em>L</em> aboratoire d'<em>A</em> nalyses et <em>E</em> xpertises </h2>
<h4>en archéologie et oeuvres d'art.</h4>
<h3>Depuis 1993</h3>


<div id="barre"></div>
<div id="barre4"></div>
<div id="barre5"></div>
<div id="barre6"></div>
<div id="rectanglea"></div>
<div id="rectanglec"></div>


<p>
<img class="logo" src="images/logo.png" alt="LAE"/>
</p>
<p>
<img class="fleura" src="images/fleurr.png" alt="LAE"/>
</p>
<p>
<img class="fleurb" src="images/fleur2.png" alt="LAE"/>
</p>
<p>
<img class="fleurc" src="images/fleur3.png" alt="LAE"/>
</p>
<p>
<img class="fleurd" src="images/fleur4.png" alt="LAE"/>
</p>


<div id="menu">
<ul>
<li><a href="page2.html"> Pôle bois <span class="dendclimat">Dendrochronologie/Climat</span></a></li>
<li><a href="page3.html"> Pôle art <br /> Expertises scientifiques </a></li>
<li><a href="page4.html"> Pôle patrimoine <br /> architecture/archéologie</a></li>
<li><a href="page5.html"> Pôle altération <br /> et conservation</a></li>
<li><a href="page6.html"> Pôle recherche <br /> et innovations </a></li>
<li><a href="page7.html"><br />Publications</a></li>
</ul>
</div>


<div id="corps">
<a href="page1.html"><img class="accueil" src="images/accueil.png" alt="accueil"/></a>
<a href="page8.html"><img class="contact" src="images/contact.png" alt="contact"/></a>

<a href="page2.html"><span class="polebois" title="Dendrochonologie/Climat">Pôle Bois</span></a>
<a href="page3.html"><span class="poleart" title="Expertises scientifiques et iconographiques">Pôle Art</span></a>
<a href="page4.html"><span class="etudes" title="Patrimoine architecturale/Archéologie">Pôle Patrimoine</span></a>
<a href="page5.html"><span class="conservation" title="Altérations du patrimoine">Pôle Conservation</span></a>
<a href="page9.html"><span class="liens">Liens</span></a>
<a href="page10.html"><span class="new">News</span></a>

</div>

<div class="slogan">
LAE<br />
Structure souple et pluridisciplinaire ,<br />
nous nous adaptons à vos besoins.<br />
</div>


<div id="pied_de_page">
<p>Copyright LAE_2010,tous droits réservés</p>
</div>

<div class="adresse">
<p>
<img class="adresse" src="images/adresse.png" alt="adresse"/>
</p>
</div>


</body>
</html>




Pour le CSS

body
{
margin-left: 1px;
margin-top: 10px;
margin-bottom: 5px;
background-color:rgb(64, 36, 36);
}

h1
{
color:rgb(64, 36, 36);
position:absolute;
left:310px;
top:45px;
font-size:25px;
height:50px;
padding-top:6px;
}

.logo
{
width:75px;
height:40px;
position:absolute;
top:30px;
left:25px;
z-index:40
}

.fleura
{
width:260px;
height:180px;
position:absolute;
top:-6px;
left:60px;
z-index:70;
}

.fleurb
{
width:160px;
height:340px;
position:absolute;
top:105px;
left:100px;
z-index:40;
}


.fleurc
{
width:220px;
height:120px;
position:absolute;
bottom:3px;
right:1px;
z-index:40;
}

.fleurd
{
width:130px;
height:230px;
position:absolute;
bottom:20px;
left:110px;
z-index:70;
}


h2
{
position:absolute;
right:160px;
top:18px;
font-size:19px;
color:rgb(71, 13, 13);
}

h4
{
position:absolute;
right:190px;
top:32px;
font-size:19px;
color:rgb(71, 13, 13);
}

h2 em
{
font-size:19px;
color:rgb(71, 13, 13);
font-family: "kunstler script", Arial, "serif", "sans serif"
}

h3
{
position:absolute;
right:265px;
top:68px;
font-size:14px;
color:rgb(71, 13, 13);
}

#barre4
{
height:2px;
width:230px;
color:rgb(71, 13, 13,);
position:absolute;
top:105px;
right:220px;
z-index:20
}

#corps a,img
{
border:none;
width:190px;
height:250px;
}

#corps
{
height:600px;
width:1235px;
margin-left:11px;
margin-top:3px;
margin-bottom:13px;
color: rgb(94, 10, 24);
background-repeat: repeat-x;
background-image:url("images/fonds.jpg");
border: 1px solid rgb(94, 10, 24);
border-color:rgb(94, 10, 24);
}

#ima
{
position:absolute;
left: 295px;
bottom: 10px;
height:310px;
width:850px;
border:0px;
border:none;
}

.polebois
{
position:absolute;
left:360px;
bottom:110px;
color:rgb(94, 10, 24);
font-size:18px;
font-weight:bolder;
z-index:60
}

.polebois:hover
{
text-decoration:underline;
}

.poleart
{
position:absolute;
left:580px;
bottom:110px;
color:rgb(94, 10, 24);
font-size:18px;
font-weight:bolder;
z-index:60
}

.poleart:hover
{
text-decoration:underline;
}

.conservation
{
position:absolute;
left:980px;
bottom:110px;
color:rgb(94, 10, 24);
font-size:18px;
font-weight:bolder;
z-index:60
}

.conservation:hover
{
text-decoration:underline;
}


.etudes
{
position:absolute;
left:765px;
bottom:110px;
color:rgb(94, 10, 24);
font-size:18px;
font-weight:bolder;
z-index:60
}

.etudes:hover
{
text-decoration:underline;
}

.slogan
{
font-family: times new roman, verdana;
color:rgb(94, 10, 24);
position:absolute;
bottom:360px;
left:550px;
text-align: center;
font-style:italic;
font-size:19px;
}

#menu
{
position:absolute;
left:190px;
bottom: 30px;
top:124px;
float: top;
width: 875px;
height:50px;
background-color:rgb(64, 36, 36);
}



#menu ul
{
position:absolute;
width:925px;
left: 10px;
top:-15px;
list-style-type:none;
}


#menu li a
{

display:block;
float:left;
width:125px;
height:35px;
background-color:rgb(64, 36, 36);
color:rgb(191, 191, 191);
font-size: small;
text-decoration:none;
text-align:center;
padding:5px;
border:1px solid;
border-color:rgb(191, 191, 191);
}

.dendclimat
{
font-size: 12px;
}


#menu ul li a:hover
{
background-color:rgb(205, 201, 197);
border-color:black;
border-style:outset;
color:black;
height: 37px;
width:125px;
}

#id1
{
position:absolute;
bottom:85px;
left:184px;
height:365px;
width:100px;
border:0px;
z-index:40
}

#id1 img
{
height: 100px;
width:83px;
border:0px;
z-index:40
}

#barre
{
height:520px;
background-color:rgb(64, 36, 36);
width:4px;
position:absolute;
bottom:8px;
left:190px;
z-index:40
}


#barre5
{
height:3px;
background-color:rgb(142, 92, 88);
width:875px;
position:absolute;
top:121px;
left:190px;
z-index:30
}


#barre6
{
height:3px;
background-color:rgb(142, 92, 88);
width:875px;
position:absolute;
top:174px;
left:190px;
z-index:30
}

.accueil
{
width:70px;
height:55px;
position:absolute;
top:192px;
right:16px;
z-index:40
}

.contact
{
width:73px;
height:55px;
position:absolute;
bottom:41px;
left:25px;
z-index:40
}

.adresse
{
width:320px;
height:28px;
position:absolute;
bottom:5px;
left:2px;
z-index:60
}

.liens
{
color:rgb(94, 10, 24);
font-size:15px;
font-weight:bold;
position:absolute;
bottom:25px;
right:60px;
z-index:50
}

.liens:hover
{
text-decoration:underline;
}

.new
{
color:rgb(94, 10, 24);
font-size:17px;
font-weight:bold;
position:absolute;
top:140px;
right:120px;
z-index:50
}

.new:hover
{
text-decoration:underline;
}

#rectanglea
{
height:40px;
width:85px;
background-color:rgb(64, 36, 36);
position:absolute;
top:204px;
right:8px;
z-index:30
}

#rectanglec
{
height:40px;
width:95px;
background-color:rgb(64, 36, 36);
position:absolute;
bottom:45px;
left:8px;
z-index:30
}


#pied_de_page
{
color:white;
width:390px;
position:absolute;
bottom:-9px;
left:12px;
font-size:xx-small;
}




Je vous remercie par avance de votre aide
0
wpro Messages postés 53 Date d'inscription jeudi 6 mai 2010 Statut Membre Dernière intervention 15 mai 2010 7
12 mai 2010 à 19:19
As tu installé un serveur http (apache) ou un "pack" de serveur preconfiguré (easyphp, wamp etc) ? car à priori je ne vois pas d'erreur dans ton code source. Question : Lorsque tu déclenche ta page, fais tu un double clic dessus ou tape tu ton adresse ip ou localhost dans la barre d'adresse ?
0
Je n'ai rien installé de tout ca (ni apache ni easyphp...)
Et je double clique sur la page située dans mon fichier. Je n'ai pas d'adresse ip ou localhost et je ne sais ce que sais pour tout te dire.

En tout cas merci beaucoup de te pencher sur mon cas.
0

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

Posez votre question
je ne sais ce que " c'est" oups
0
wpro Messages postés 53 Date d'inscription jeudi 6 mai 2010 Statut Membre Dernière intervention 15 mai 2010 7
12 mai 2010 à 22:38
Dans ce cas lorsque tu declenche ta page sur un autre ordinateur, veille à avoir également les dossiers contenant tes images utilisées par ton site.
0
Oui, bien sur, j'ai tout le dossier qui suit. Mais le problème n'est pas le images mais la mise en page. Le fond du corps, normalement gris, disparait et ne laisse voir que le fond du body pourpre. Le menu déroulant horizontal devient vertical...
0
wpro Messages postés 53 Date d'inscription jeudi 6 mai 2010 Statut Membre Dernière intervention 15 mai 2010 7
14 mai 2010 à 00:08
Je te conseil tout de même d'installé easyphp ou autres "pack" de serveur, cela te permettra de testé ton site comme s'il été chez un hebergeur.
0
J'ai télécharger easyphp, mais d'une part je n'arrive pas trop a l'utiliser, et lorsque j'ouvre une page en passant par explorer la mise en page est déformée aussi.
et d'autre part, je n'ai que du code html et css pas de php.

Dois je telecharger apache seulement?
y a t il une explication par rapport a la disparition du fond?

Merci
0
wpro Messages postés 53 Date d'inscription jeudi 6 mai 2010 Statut Membre Dernière intervention 15 mai 2010 7
14 mai 2010 à 10:32
oui après faudra configuré apache aussi ... https://archive.framalibre.org/IMG/pdf/installation_configuration_serveur_web_sous_windows_05-12-2005.pdf
en espérant que sa t'aide
0
Je ne comprend pas une chose:
Que me permettra de faire le serveur web apache par rapport à un hébergeur de site web?
Je précise en effet, que j'ai envoyer toutes mes pages html et css + fichier images à un hébergeur et que celui ci me répond que les pages sont "illisibles" c'est a dire que le mise en page est déformée. Ce qui est logique puisque moi même lorsque je les ouvre d'un autre ordi ou autre navigateur c'est également déformé.
Il nous propose donc "reconcevoir le site" en entier et bien sur de le refacturer.
Or je suis sur qu'il y a une solution, un cod a modifier...

C'est pour cela que je ne comprend pas en quoi intervient apache, pouvez vous me l'expliquer?

Merci
0
Si je comprend bien cela voudrait dire que je m'auto héberge?
Mais est ce la solution?
0
wpro Messages postés 53 Date d'inscription jeudi 6 mai 2010 Statut Membre Dernière intervention 15 mai 2010 7
14 mai 2010 à 12:10
Non le but est de testé ton site comme s'il été chez un hebergeur. Personnellement lorsque je developpe un site, j'ai un easyphp ainsi je peux corrigé mes erreurs avant de le mettre en ligne chez l'hebergeur.
Maintenant comme tu est certaine d'avoir une erreur de mise en page, as tu fait attention à ce que ton site soit compatible avec les ecran qui pourrait avoir une resolution de 1024*768, dans le cas contraire cela peut ruiné ta mise en page.
Je doute que non en voyant notamment :
#corps
{
height:600px;
width:1235px; <-----

Mise à part sa, j'ai moi même testé ton code source et tout s'affiche (sauf les images que je n'ai pas lol)
0
bg62 Messages postés 23666 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 2 janvier 2025 2 392
14 mai 2010 à 12:14
?
0
Je pense que tu as entièrement raison wpro, mais:
1- comment dois je modifier mon code pour qu'il s'adapte aux différentes résolutions d'écran?

2- Comment faire pour qu'il s'adapte a tous les navigateurs? Car sur l'ordi ou ca fonctionne, si je change de navigateur il y a aussi le problème, donc ce n'est as que la résolution

3- ca me rassure de voir que tu peux le lire. Tu vois bien le fond gris sur fond pourpre? Et sous firefox, tu vois quoi?
Si c'est le cas, penses tu que mon hébergeur me ment pour me reconcevoir le site et le facturer? Parce que si c'est juste une question de code à changer par rapport a la résolution et le navigateur, il pourrait me le faire, a petit prix voir gratuitement!

4- Dois je vraiment utiliser easyphp, puisqu'il n'y a pas de php dans mon site?
ou apache suffit il?
Dans les deux cas, une fois qu'il sont configurer, comment j'ouvre et surtout modifie mes pages dans ces logiciels?

Je sais que c'est beaucoup de question, mais ton aide m'est d'un grand secours.
0
wpro Messages postés 53 Date d'inscription jeudi 6 mai 2010 Statut Membre Dernière intervention 15 mai 2010 7
15 mai 2010 à 11:54
Commence par modifier déjà celui ci :
#corps
{
height:600px;
width:1235px; <-----

Perso je vois tout etant donné que j'ai un ecran recent et donc une forte resolution. Comme je l'ai dit adapte ton css pour le 1024 bien que la resolution minimum étant le 800*600 celui ci est de plus en plus rare donc on peut se permettre de passé au 1024.

easyphp = preconfiguré, il reste juste à installer ton site dans le bon dossier
apache seul = non configuré, il te le faudra le configuré et ensuite ajouté ton site dans le bon dossier.

Tu est chez quel hébergeur ?
0
Le site avait été crée sur un petit ordi (15pouces) Mais j'ai également un écran avec une forte résolution et pourtant, je ne parviens pas à le lire correctement.
Par contre, excuse moi d'être "pesante", mais qu'entends tu par "adapte" ton css pour du 1024. Que dois je faire concrètement, que dois je changer? les codes du corps?, du body?

J'ai telecharger easyphp, il faudra que je colle toutes mes pages html, css plus dossier images dans un dossier d'easyphp. Je nesais pas encore comment faire mais je vais chercher sur internet.
0