Sujet Précédent Sujet Suivant

Problémé sous firefox

Fermé
gaya_102 - 18 mars 2009 à 21:58
 gaya_102 - 19 mars 2009 à 09:37
Bonjour,
Je suis surprise car ma page fonctionne sous IE6 mais pas sous firefox. Je ne comprend pas pourquoi.

http://www.sandrineetgwen.fr/emelinejourj.php

ne pas regarder le code a partir de la page mais celui que je vais vous mettre car j'ai fait un include() 

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




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

	   
	   </head>
 
   <body>
       <div id="rubrique">        
           <div>
		   <?php
include("menu.php");
?> 
           <div id="texte"> 
		   
		   
		  Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de simplement taper le texte qu'il y aura dans son site, il faut aussi savoir placer ce texte, insérer des images, faire des liens etc...
Pour expliquer à l'ordinateur ce que vous voulez, il va falloir utiliser un langage qu'il comprend.

Il existe des langages qui servent à créer des programmes, comme le C++ ou encore le Java. Ces langages sont néanmoins complexes et destinés à des personnes qui ont déjà quelques connaissances en informatique.
Les langages XHTML et CSS, eux, servent précisément à créer des sites web, et ils ont été créés de manière à être simples à utiliser. Mon rôle sera de vous apprendre à vous en servir.

Bon, mais pourquoi apprendre 2 langages pour créer un site web ? Un seul n'aurait pas suffit ?

C'est vrai que, quand je vous dis que vous allez apprendre 2 langages à la fois, vous vous demandez si ce n'est pas déjà trop pour vous.
Pas d'inquiétude, vous allez vous rendre compte au fur et à mesure que tout a été très bien pensé. Chacun de ces 2 langages sert à faire quelque chose de précis, et les deux se complètent naturellement pour au final donner un site web :

    * XHTML : c'est l'abréviation de eXtensible HyperText Markup Language. Entre nous, si vous ne retenez pas ce que ça veut dire, ça ne vous empêchera pas de dormir ;)
      Ce langage XHTML, c'est celui avec lequel vous taperez le contenu de votre site web. Il contient des informations logiques : vous direz par exemple "Ceci est mon titre, ceci est mon menu, là c'est le texte principal de la page, là il y a une image etc etc...".

      Vous avez peut-être entendu parler aussi du HTML. En fait, le XHTML et le HTML se ressemblent beaucoup et peuvent tous les deux être utilisés pour créer des pages web. Ils sont quasiment identiques. Le XHTML fonctionne cependant sur des règles un peu plus strictes que le HTML.
      En bref, si vous savez programmer en XHTML, alors vous savez programmer en HTML. C'est pour cela que nous étudierons XHTML dans ce cours.
		   
		   
		   
		   
		   </div>
		 
		   </div>
		   </div>
		   <script type="text/javascript">
    initMenu();
</script>
		   
		   	<script type="text/javascript">
			var imgs = document.getElementsByTagName('img');
			
			for (var i = 0; i < imgs.length; i++)
			{
				if (imgs[i].className == 'rollOver')
				{
					imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].className = '';
				}
			}
			
			</script>
   </body>
</html>




body {
background-color: #FBE3DE;

} 


img {
border:0;
vertical-align:middle;
}

a { 
text-decoration:none; }

#unite
{
position:absolute;
left:50%;
margin-left:-490px;
width: 980px;
top:50%;
margin-top:-271px;
height: 542px;
background-image : url("image/fond_emeline.jpg");
background-repeat: no-repeat;
border :2px solid black;
}


#rubrique
{
position:absolute;
left:50%;
margin-left:-490px;
width: 980px;
top:50%;
margin-top:-271px;
height: 542px;
background-image: url("image/fond_rubrique.jpg");

background-repeat: no-repeat;
border :2px solid black;
}
 
 
 #texte
 {
overflow:auto;
width: 600px;
height: 420px;
margin-left:330px;
margin-top:15px;/* espace qui sépare de la ligne du dessus*/
 }


 


#rubrique2
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_rubrique.jpg");
background-repeat: no-repeat;
border :2px solid black;
}

.menu
{
width: 980px;
height: 126px;
}
.en_tete
{
width: 980px;
height: 173px;
}
.bas_page
{
width: 980px;
height: 243px;
}

/* pour le menu deroulant */


#menuderoulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}

#menuderoulant li
{
float: left;
margin: 0;
padding: 0;
border: 0;
}

#menuderoulant .sousmenu
{
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
background: yellow;
}

#menuderoulant .sousmenu li
{
margin: 0;
padding: 0;
border: 0;
}
/* on cache tout les menus avec la propriété display none*/

#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: 1%;
 color: #FFF;
 background: #3B4E77;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #F2462E;
}
A voir également:

5 réponses

Réponse 1 / 5
lewis34 Messages postés 2557 Date d'inscription samedi 21 juillet 2007 Statut Membre Dernière intervention 30 mai 2015 352
18 mars 2009 à 22:06
bonsoir, deja une petite remarque ton css est ce que c'est normal qu'il soit en fin de page ou tu l'a mis dans un fichier a part ???

la syntaxe correcte c'est 
<html>
<head>
<link href="/le chemin de ton fichier css " rel="stylesheet" type="text/css" media="all" />
</head>
<body>
</body>
</html>


ou au pire 
<html>
<head>
<style type="text/css">
 /* ton code css */
</style>

</head>
<body>
</body>
</html>



petite precision au passage le css n'est pas au sens vrai du terme un langage de programation mais plutot un outils de mise en forme , tout comme le html le navigateur interprete à sa maniere les balises qu'ils rencontre , d'ou parfois des bugs.

A l'extreme il te faudra faire des feuilles de styles différentes suivant le navigateur du visiteur (ça m'est arrivé cette semaine au boulot lol !)
0
gaya_102
18 mars 2009 à 22:28
J'ai mis le css dans un fichier totalement à part comme ca.

Par contre qu'est ce que je dois changer pour ne plus avoir cette erreur?
0
Réponse 2 / 5
lewis34 Messages postés 2557 Date d'inscription samedi 21 juillet 2007 Statut Membre Dernière intervention 30 mai 2015 352
18 mars 2009 à 22:37
il faut que tu indique le bon chemin de ton css

dans ton cas tu a mis ca
href="design_emeline4.css" />

dans ce cas il faut que le fichier soit dans le meme repertoire que ta page sinon tu mettra ca
href="../design_emeline4.css" />

ou ça
href="../css/design_emeline4.css" />
si il est dans le dossier css

c'est quoi le probleme exactement ?
0
Réponse 3 / 5
lewis34 Messages postés 2557 Date d'inscription samedi 21 juillet 2007 Statut Membre Dernière intervention 30 mai 2015 352
18 mars 2009 à 22:45
s'cuse moi je viens de voir le probleme...
0
Réponse 4 / 5
lewis34 Messages postés 2557 Date d'inscription samedi 21 juillet 2007 Statut Membre Dernière intervention 30 mai 2015 352
18 mars 2009 à 22:50
essaye comme ça 

#texte
 {
position:absolute;
left:10px; /* modifie petit a petit la valeur*/
top:10px;/* modifie petit a petit la valeur*/
overflow:auto;
width: 600px;
height: 420px;
margin-top:15px;/* espace qui sépare de la ligne du dessus*/
 }


pense a mettre tout ton contenu de la page en position relative( quite a creer un nouveau div conteneur) et les differentes div à l'interieur en position absolute
0
gaya_102
18 mars 2009 à 22:55
quand tu dis "pense a mettre tout ton contenu de la page en position relative( quite a creer un nouveau div conteneur) et les differentes div à l'interieur en position absolute"

qu'est ce que tu veux dire en fait? je dois le faire dans le css?
0

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

Posez votre question
Réponse 5 / 5
lewis34 Messages postés 2557 Date d'inscription samedi 21 juillet 2007 Statut Membre Dernière intervention 30 mai 2015 352
19 mars 2009 à 05:17
tu pourrais faire un truc un peutr comme ça 
<body>
<div id="content">

     <div id="texte">
.....
...
..
    </div>
</div>


et dans ton css 

#content {
position:relative;
width:100%
height:100%;
top:0px;
margin-left:10px;
}

#texte
 {	
position:absolute;
width:600px;
left:0px;
top:108px;
font:Arial, Helvetica, sans-serif;
font-size:10px;
height:400px;
}



et si tu veut avoir une feuille de style pour IE et une pour FF ou safari entre <head> et </head> rajoute ceci 
<script type="text/javascript" language="javascript">
var nomnav = navigator.appName;

if (nomnav == 'Microsoft Internet Explorer')
 {
  document.write("<link rel='stylesheet' media='screen' type='text/css' href='css/styleie.css'>");
}
else
 {
  document.write("<link rel='stylesheet' media='screen' type='text/css' href='css/style.css'>");
}
</script>


biern sur il te faudra faire 2 feuilles de styles differentes , styleie.css pour IE et style.css pour les autres
0
gaya_102
19 mars 2009 à 09:37
En fait depuis hier soir je me suis rendu compte que j'avais un div en trop et du coup le texte c'est mis à la bonne place. Le seul hic c'est que sous IE y a bien les marges que je voulais mais firefox ne les gardes pas. Mon texte est collés
0

Discussions similaires

Méssage Firefox ''Couldn't load XPCOM''
pistouri -
pistouri -

0 réponse
Firefox mise à jour message XULrunner Error platform
Frances -
MPMP10 -

1 réponse
Firefox exe point d'entrée introuvable
Man -
Man -

2 réponses
Telecharger la version Firerfox 52.0.1 ou 52.0.2
Yrrep -
Dori@n -

1 réponse