Partage

Caractères bizarre

Ã© à la place des "é"; Ã à la place des "à"...

Sujet résolu

29 décembre 2008 à 9:42:32

Bonjour. Je suis en train de créer un site web mais le problèmes est qu'il affiche des caractère bizarre. Exemple: Il met "rÃ©sultats" à la place de "résultats".
J'ai essayer de mettre

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

ça marche mais il n'affiche plus la bannière du site insérer via le CSS. Je l'ai donc remis en

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

. Voici le code (x)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>
       <title>AST section escrime la Teste-Arcachon</title>
	 <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
   
   <div id="en_tete">

</div>
</div>
<div id="menu">
  <ul class="niveau1">
			<li><a href="index.php">Accueil</a></li>
			<li class="sousmenu"><a href="le_club.php">Le club</a>
			<ul class="niveau2">
			<li><a href="le_club/bureau.php">Le bureau</a></li>
			<li><a href="le_club/enseignant.php">L'enseignant</a></li>
			</ul>
			</li>
			<li class="sousmenu"><a href="infos.php">Infos pratiques</a>
			<ul class="niveau2">
			<li><a href="infos/horaires.php">Les horaires</a></li>
			<li><a href="infos/salle.php">La salle d'armes</a></li>
			<li><a href="infos/tarifs.php">Les tarifs</a></li>
			</ul>
			</li>
			<li><a href="resultats.php">Les résultats</a></li>
			<li><a href="photos.php">Album photo</a></li>
			<li><a href="telechargements.php">Téléchargements</a></li>
			<li><a href="liens.php">Liens/partenaires</a></li>
			<li><a href="contact.php">Contact</a></li>
			

			
			
			

</div>
<div id="corps">
<h1>Les résultats<h1>
<h3>Circuit ligue n°1 minimes à vétérans le 4 octobre 2008 à Talence</h3>
<p><a href="resultats/4_10_2008/4_10_2008_FH_minime.pdf">Minimes fleuret hommes</a><br/>
<a href="resultats/4_10_2008/4_10_2008_ED_veterans.pdf">Vétérans épée dames</a><br/>
<a href="resultats/4_10_2008/4_10_2008_EH_veterans.pdf">Vétérans épée hommes</a><br/>
</p>
<h3>Circuit ligue n°1 pupilles/benjamins le 12 octobre 2008 à Périgueux</h3>
<a href="resultats/12_10_2008/12_10_2008_FD_pupilles.pdf">Pupilles fleuret dames</a><br/>
<a href="resultats/12_10_2008/12_10_2008_FH_pupilles.pdf">Pupilles fleuret hommes</a><br/>
<a href="resultats/12_10_2008/12_10_2008_FH_benjamins.pdf">Benjamins fleuret hommes</a></p>
<div id="pied_de_page">
Salle d?Armes ? 05.56.66.45.15<br/>
Maison des associations ? Impasse des Glycines<br/>
33260 LA TESTE DE BUCH<br/>
   <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
</div>
</body>




</html>

Comment avoir des caractères normaux avec la bannière du site qui s'affiche via au CSS?

Merci de votre aide

ellm

29 décembre 2008 à 9:47:06

Bonjour,

De quelle bannière parles-tu ?

mathieu02

29 décembre 2008 à 11:25:46

La bannière que j'ai fait pour mon site. Image utilisateur

. Elle est insérer via au CSS comme une image de fond comme nous le conseille se tuto. Mais quand je met

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

, la bannière ne s'affiche plus.

ellm

29 décembre 2008 à 11:27:28

Tu as des caractères spéciaux dans le nom de ta bannière ?

mathieu02

29 décembre 2008 à 11:42:17

Se sont les caractères spéciaux de mon site qui sont bizarres pas ceux de la bannière!!!

Mais quand j'essaie de mettre

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

à la place de

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Les caractère spéciaux ne sont plus bizarre mais la bannière de mon site a disparue. Elle était insérer comme l'indique ce tuto par le CSS avec background-image. Voici le css:

body
{
background-image: url("images/test_4.png");
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;   
}

h1
{
font-family: "Cooper Black","Arial Black", Arial, Verdana, serif; /* On essaie d'avoir Arial Black en priorité */
text-align: Center;

   


}
h2
{
font-family: "Comic Sans MS", Arial, serif;
text-decoration:underline
}
h3
{
font-family: "Comic Sans MS", Arial, serif;
}
p
{
/* La police Comic Sans MS est agréable à lire pour les paragraphes je trouve */
   font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
   font-size: 0.9em;

}

.attention
{
color: red;
font-size: 1.1em;
text-decoration: blink;

}


   #en_tete
{
	width: 760px;
   height: 100px;

  background-image: url("images/bannière_2.png");
   background-repeat: no-repeat;
   margin-bottom: 10px;
   text-align:center;

}
#menu
{
   float: left;
   width: 120px;
	background-color: rgb(165,4,22);
  
   background-repeat: repeat-x;
   
   border: 2px solid black;
   
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
   
  }

#corps
{
   margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

}


#pied_de_page
{
   padding: 5px;
   text-align: center;
   color: #B3B3B3;
   background-color: #990000;
   background-repeat: repeat-x;
   border: 2px solid black;

}
.telephone
{
 padding: 5px;
   text-align: center;
   color: #B3B3B3;
   background-color: #990000;
   background-repeat: repeat-x;
   border: 2px solid black;
   }

  

 /*on definit la taille de la div du menu ainsi que la taille de parties du menu.*/
div#menu {
          width: 135px;
         }

div#menu ul {
             padding: 0;
             width: 135px;
             border:1px solid;
             margin:0px;
            }

/*On positionne les elements du menu */
div#menu ul li {
                position:relative;
                list-style: none; /*on enleve les icones de liste */
                border-bottom:1px solid; /*ajout d'une bordure de separation d'element:*/
               }

div#menu ul ul {
                position: absolute;
                top: 0;
                left: 135px;/*100px correspond au décalage a droite, on décale de la taille du ul de base*/
               }  

div#menu li a {
               text-decoration: none; /* plus de soulignement pour les liens */
              } 
			   /*fond jaune pr les sous-menu*/
div#menu li.sousmenu {
                      background: yellow;
                     } 
					  /* fichier pour internet explorer */


/* On cache tous les sous menu avec la propriété display none */
div#menu ul ul {
                position: absolute;
                top: 0;
                left: 135px;
                display:none
               }

/*Lors du survol ,avec la souris, les sousmenu apparaissent grace a display: block */
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {
                                                  display:block;
                                                 }
												  /* fond blanc pour le menu */
div#menu a {
            color:#000000;
			
           }

/* fond different au survol de la souris entre les sous-menu et les "basiques"*/
div#menu li:hover {
                   background: #EBB
                  }

div#menu li.sousmenu:hover {
                            background: #EBB;
                           }

/* Rajout d'une petite fleche pour les sous menu (j'ai pioché cette astuce sur le web  )*/
div#menu li.sousmenu {
                      background: url(fleche.gif) 95% 50% no-repeat;
                     }

/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 */
div#menu li a {
               text-decoration: none;
               padding: 4px 0 4px 8px;
               display:block; 
			   border-left: 8px solid #BBB;
			   width:84px
              }

/* la bordure de chaque hauteur a une couleure de survol*/
div#menu li a:hover {
                     border-left-color: red;
                    }
div#menu ul ul li a:hover {
                           border-left-color: #00FF00;
                          }
div#menu ul ul ul li a:hover {
                              border-left-color: #0000FF;
                             } 
							 div#menu ul ul {
background-color: #FFF;
}

			 
		
.adresse
{
text-align: Center;
font-size:1.1em;
}
.e-mail
{
 
 font-weight: bold;
 text-decoration:underline
 }
.tel
{
 font-weight: bold;
 text-decoration:underline
 }
td /* Toutes les cellules des tableaux... */
{
   border:1px solid black; /* ... auront une bordure de 1px */
}
table
{
   border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
margin:auto;
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
font-size: 0.9em;
}

thead
{
text-align:center;
font-weight: bold;
 border:2px solid black;
}

tbody
{
border:2px solid black;
}
a
{

text-decoration:none;
font-size:0.9em;
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
color:#990000;
}
a:hover
{

text-decoration:underline;
}

J'espère avoir été assez claire dans mes propos.

ellm

29 décembre 2008 à 11:55:52

Citation : mathieu02

Se sont les caractères spéciaux de mon site qui sont bizarres pas ceux de la bannière!!!

Je ne parlais pas des caractères sur l'image, je parlais des caractères dans le nom du fichier image. Ce n'est pas la même chose.

Ton image s'appelle bannière_2.png. Il y a un caractère accentué dans le nom du fichier, le problème vient surement de là.

Les accents et les caractères spéciaux sont déconseillés dans les noms de fichiers images.

Renomme ton image en banniere_2.png, sans accent, et ça devrait aller mieux.

cerium50

29 décembre 2008 à 12:02:42

body
{
	background-image: url("images/test_4.png");
	width: 760px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;   
}

h1
{
	font-family: "Cooper Black","Arial Black", Arial, Verdana, serif; /* On essaie d'avoir Arial Black en priorité */
	text-align: Center;
}

h2
{
	font-family: "Comic Sans MS", Arial, serif;
	text-decoration: underline;
}

h3
{
	
}

p
{
/* La police Comic Sans MS est agréable à lire pour les paragraphes je trouve */
   font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
   font-size: 0.9em;
}

.attention
{
	color: red;
	font-size: 1.1em;
	text-decoration: blink;
}

#en_tete
{
	width: 760px;
	height: 100px;
	background-image: url("images/bannière_2.png"); /*CHANGE LE NOM*/
	background-repeat: no-repeat;
	margin-bottom: 10px;
	text-align:center;
}

#menu
{
	float: left;
	width: 120px;
	background-color: rgb(165,4,22);
	background-repeat: repeat-x;
	border: 2px solid black;
	margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */   
  }

#corps
{
   margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
}


#pied_de_page
{
   padding: 5px;
   text-align: center;
   color: #B3B3B3;
   background-color: #990000;
   background-repeat: repeat-x;
   border: 2px solid black;
}

.telephone
{
	padding: 5px;
	text-align: center;
	color: #B3B3B3;
	background-color: #990000;
	background-repeat: repeat-x;
	border: 2px solid black;
}

  

 /*on definit la taille de la div du menu ainsi que la taille de parties du menu.*/
div#menu 
{
	width: 135px;
}

div#menu ul
 {
	padding: 0;
	width: 135px;
	border:1px solid;
	margin:0px;
}

/*On positionne les elements du menu */
div#menu ul li 
{
	position:relative;
	list-style: none; /*on enleve les icones de liste */
	border-bottom:1px solid; /*ajout d'une bordure de separation d'element:*/
}

div#menu ul ul
 {
	position: absolute;
	top: 0;
	left: 135px;/*100px correspond au décalage a droite, on décale de la taille du ul de base*/
}  

div#menu li a
 {
	text-decoration: none; /* plus de soulignement pour les liens */
	
} 

/*fond jaune pr les sous-menu*/
div#menu li.sousmenu 
{
	background: yellow;
} 

 /* fichier pour internet explorer */


/* On cache tous les sous menu avec la propriété display none */
div#menu ul ul 
{
	position: absolute;
	top: 0;
	left: 135px;
	display: none;
}

/*Lors du survol ,avec la souris, les sousmenu apparaissent grace a display: block */
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 
{
	display:block;
}

/* fond blanc pour le menu */
div#menu a
 {
	color:#000000;
}

/* fond different au survol de la souris entre les sous-menu et les "basiques"*/
div#menu li:hover 
{
	background: #EBB;
}

div#menu li.sousmenu:hover 
{
	background: #EBB;
}

/* Rajout d'une petite fleche pour les sous menu (j'ai pioché cette astuce sur le web  )*/
div#menu li.sousmenu 
{
	background: url(fleche.gif) 95% 50% no-repeat;
}

/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 */
div#menu li a 
{
   text-decoration: none;
   padding: 4px 0 4px 8px;
   display:block; 
   border-left: 8px solid #BBB;
   width:84px;
}

/* la bordure de chaque hauteur a une couleure de survol*/
div#menu li a:hover 
{
	border-left-color: red;

	}
div#menu ul ul li a:hover 
{
	border-left-color: #00FF00;
}

div#menu ul ul ul li a:hover 
{
	border-left-color: #0000FF;
} 

div#menu ul ul 
{
	background-color: #FFF;
}

.adresse
{
	text-align: Center;
	font-size:1.1em;
}

.e-mail
{ 
	font-weight: bold;
	text-decoration: underline;
}

.tel
{
	font-weight: bold;
	text-decoration: underline;
 }
 
td /* Toutes les cellules des tableaux... */
{
	border:1px solid black; /* ... auront une bordure de 1px */
}
table
{
	border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
	margin:auto;
	font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
	font-size: 0.9em;
}

thead
{
	text-align:center;
	font-weight: bold;
	border:2px solid black;
}

tbody
{
	border:2px solid black;
}

a
{
	text-decoration:none;
	font-size:0.9em;
	font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
	color:#990000;
}

a:hover
{
	text-decoration:underline;
}

Il a raison pour le nom de l'image, ligne 43du CSS, j'en ai profité pour corriger ton CSS des ";" oublié et le réindenter plus proprement pour que tu t'y retrouves plus facilement

Yellow Panther

29 décembre 2008 à 12:05:53

Tu utilises quoi comme éditeur de texte ? T'as regardé sur quel encodage il est réglé ? Si tu déclares un encodage autre que celui que t'as utilisé, les caractères non ASCII standard peuvent poser problème.

mathieu02

29 décembre 2008 à 12:52:14

Merci de vos réponses. J'utilise notepad++

Yellow Panther

29 décembre 2008 à 13:15:36

Citation : mathieu02

J'utilise notepad++

OK. T'as un menu qui s'appelle “Format”, à cet endroit du peut choisir l'encodage.

Avec UTF-8, il faut mettre ça :

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

Avec ANSI, c'est du Windows Latin 1, il faut mettre ça :

<meta http-equiv="content-type" content="text/html; charset=windows-1252"/>

mathieu02

29 décembre 2008 à 13:35:59

Merci beaucoup