Probleme avec affichage des caracteres sur les pages

12 juin 2007, 21:09

Bonjour,

Voilà mon problème c'est que tout ce que la base de donnée transmet sur les pages ou tout se que j'écrit moi même en html bug.

Le bug est que tout les caractères é è à etc... sont remplacé par les codes html

C'est a dire que au lieu de voir Voilà sur la page on voit VoilÃ ou même ça pr�t �

J'ai chercher l'erreur dans le css mais rien trouvé

Je vous met mon css car je pense que sa vient de lui

Code : Tout sélectionner

/* General markup styles
---------------------------------------- */
* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	height: 100%;
	margin-bottom: 1px;
	background-color: #E4EDF0;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #536482;
	background: #E4EDF0 url("../images/bg_header.gif") 0 0 repeat-x;
	font-size: 62.5%;			/* This sets the default font size to be equivalent to 10px */
	margin: 0;
}

img {
	border: 0;
}

h1 {
	font: bold 1.8em "Lucida Grande", 'Trebuchet MS', Verdana, sans-serif;
	text-decoration: none; 
	color: #333333;
}

h2, caption {
	font: bold 1.2em "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	text-decoration: none; 
	line-height: 120%; 
	text-align: left;
	margin-top: 25px;
}

.rtl h2, .rtl caption {
	text-align: right;
}

h3, h4 {
	font: bold 1.2em "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	text-decoration: none; 
	line-height: 120%; 
	margin-top: 25px;
}

p {
	margin-bottom: 0.7em;
	line-height: 1.4em;
	font-size: 1.1em;
}

ul {
	list-style: disc;
	margin: 0 0 1em 2em;
}

.rtl ul {
	margin: 0 2em 1em 0;
}

hr {
	border: 0 none;
	border-top: 1px solid #999999;
	margin-bottom: 5px;
	padding-bottom: 5px;
	height: 1px;
}

.small { 
	font-size: 1em; 
}

table.line {
	width: 100%;
	border: 1px solid #CCCFD3;
	background-color: #FFFFFF;
	padding: 1px;
}



/* General links  */
a:link, a:active, a:visited { 
	color: #006699; 
	text-decoration: none; 
}

a:hover { 
	color: #DD6900; 
	text-decoration: underline; 
}


/* Main blocks
---------------------------------------- */
#wrap {
	padding: 0 20px 15px 20px;
	min-width: 615px;
}

#page-header {
	background: url("../images/logo.png") 0 0 no-repeat;
	background-position: center;
	height: 150px;
}

.rtl #page-header {
	text-align: center;
}

#page-header h1 {
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	font-weight: normal;
	padding-top: 15px;
}

#page-header p {
	font-size: 1.1em;
}

#page-body {
	clear: both;
}

#page-footer {
	clear: both;
	font-size: 1em;
	text-align: center;
}

#content {
	padding: 30px 10px 10px 10px;
}

#content h1 {
	line-height: 1.2em; 
	margin-bottom: 0px;
}

#main {
	float: left;
	width: 76%;
	margin: 0 0 0 3%;
	min-height: 350px;
}

.rtl #main {
	float: right;
	margin: 0 3% 0 0;
}

* html #main { 
	height: 350px; 
}


/* Main Panel
---------------------------------------- */
.panel {
	margin: 4px 0;
	background-color: #FFFFFF;
	border: solid 1px  #A9B8C2;
}

span.corners-top, span.corners-bottom, 
span.corners-top span, span.corners-bottom span {
	display: none;
}


/* Menu
---------------------------------------- */
#menu {
	float: left;
	width: 20%;
	font-size: 1.00em;
	padding: 0;
	border-right: 1px solid #CCCFD3;
}

.rtl #menu {
	float: right;
	border: none;
	border-left: 1px solid #CCCFD3;
}

#menu p {
	font-size: 0.85em;
}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}


/* Link styles for the sub-section links
---------------------------------------- */
#menu li.menu1 span {
	display: block;
	padding: 3px 3px 3px 8px;
	margin: 1px 0;
	text-decoration: none;
	font-weight: normal;
	color: #138ECB;
}

#menu li.menu1 a:hover, #menu li.menu1 a:hover span {
	text-decoration: none;
	background-color: #E4E8EB;
	color: #BC2A4D;
}

#menu li.menu2 span {
	display: block;
	padding: 3px 3px 3px 30px;
	margin: 1px 0;
	text-decoration: none;
	font-weight: normal;
	color: #138ECB;
}

#menu li.menu2 a:hover, #menu li.menu2 a:hover span {
	text-decoration: none;
	background-color: #DADFE4;
	color: #BC2A4D;
}

#menu li.header {
	font-family: Tahoma, Helvetica, sans-serif;
	display: block;
	font-weight: bold;
	color: #115098;
	border-bottom: 1px solid #327AA5;
	padding: 4px 0 2px;
	margin-top: 15px;
	text-transform: uppercase;
	font-size: 0.90em;
}

#menu li#activemenu a span {
	text-decoration: none;
	font-weight: bold;
	color: #000;
	background-color: #DADFE4;
}

#menu li#activemenu a:hover span {
	text-decoration: none;
	color: #000;
}


/* Nice method for clearing floated blocks without having to insert any extra markup
	From http://www.positioniseverything.net/easyclearing.html */
.clearfix:after, #tabs:after, .row:after, #content:after, fieldset dl:after, #page-body:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

/* Hide from Mac IE, Windows IE uses this as it doesn't support the :after method above \*/
.clearfix, #tabs, .row, #content, fieldset dl, #page-body {
	height: 1%;
}


/* Tabbed menu
   Based on: http://www.alistapart.com/articles/slidingdoors2/
----------------------------------------*/
#tabs {
	line-height: normal;
	margin: 0 0 -6px 7px;
	min-width: 570px;
}

.rtl #tabs {
	margin: 0 7px -6px 0;
}

#tabs ul {
	margin:0;
	padding: 0;
	list-style: none;
}

#tabs li {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-weight: bold;
}

#tabs a {
	float: left;
	background:url("../images/bg_tabs1.gif") no-repeat 0% -35px;
	margin: 0 1px 0 0;
	padding: 0 0 0 6px;
	text-decoration: none;
	position: relative;
}

.rtl #tabs a {
	float: right;
	margin: 0 0 0 1px;
	padding: 0 6px 0 0;
}

#tabs a span {
	float: left;
	display: block;
	background: url("../images/bg_tabs2.gif") no-repeat 100% -35px;
	padding: 7px 12px 6px 6px;
	color: #536482;
	white-space: nowrap;
	text-transform: uppercase;
}

.rtl #tabs a span {
	float: left;
	padding: 7px 6px 6px 12px;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span, .rtl #tabs a span { float:none;}
/* End hack */

#tabs a:hover span {
	color: #DD6900;
}

#tabs #activetab a {
	background-position: 0 0px;
	border-bottom: 1px solid #FFFFFF;
}

#tabs #activetab a span {
	background-position: 100% 0px;
	padding-bottom: 7px;
	color: #333333;
}

#tabs a:hover {
	background-position: 0 -70px;
}

#tabs a:hover span {
	background-position:100% -70px;
}

#tabs #activetab a:hover span {
	color: #333333;
}



img.icon {
	border:#dfdfdf 3px solid;
	cursor:default;
}
img.icon:hover {
	border:#c9c9c9 3px solid;
	cursor:default;
}

a.page {
    font-family: verdana;
    font-size: 10px;
	font-weight: bold;
	text-decoration:none;
	border: 1px solid #ccc;
	width: auto;
	padding: 1px 3px 1px 3px;
}
a.page:hover {
    font-family: verdana;
    font-size: 10px;
	font-weight: bold;
	text-decoration:none;
	background-color:#E4EDF0;
	border: 1px solid #ccc;
	width: auto;
	padding: 1px 3px 1px 3px;
}

a.tooltip em {
    display:none;
}
a.tooltip:hover {
	cursor:default;
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration:none;
}
a.tooltip:hover em {
	cursor:default;
    font-style: normal;
    display: block;
    position: absolute;
    top: 20px;
    left: -10px;
    padding: 5px;
    color: #000;
    border: 1px solid #ccc;
    background: #E4EDF0;
    width:50px;
	text-align:center;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #536482;
	font-size: 10px;
}
a.tooltip:hover em span {
	cursor:default;
	position:absolute;
    top: -7px;
    left: 15px;
    height: 7px;
    width: 11px;
    background: transparent url(../images/infobulle.png);
    margin:0;
    padding: 0;
    border: 0;
}

Merci d'avance.

12 juin 2007, 21:23

Non, ça vient du jeu de caractères que tu définis dans les en-têtes HTML.

C'est une ligne du type :

Code : Tout sélectionner

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

Dans cet exemple le jeu de caractères est "iso8859-1", qui correspond à notre alphabet occidental.

Seulement il y a une autre norme en vogue en ce moment c'est l'UTF-8, qui est plus complète que l'ISO. D'après les erreurs que tu as je crois que tes documents sont encodés en UTF-8 alors que tu les affiches en ISO.

Essaye d'indiquer cette ligne dans tes balises <head> :

Code : Tout sélectionner

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

12 juin 2007, 21:41

Ah bah moi j'ai pas cette ligne la

J'ai ça qui y ressemble

Code : Tout sélectionner

<meta http-equiv="Content-Language" content="fr">

je vais essayer ton code Klomac merci

12 juin 2007, 21:47

Non ce n'est pas ça. Rajoute la ligne que je t'ai donné, si tu ne l'avais pas indiqué je suppose que l'ISO a été utilisé par défaut.

12 juin 2007, 21:47

Désolé pour le double post

Mais c'est cette ligne là qu'il me fallait

Code : Tout sélectionner

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

Merci bien

12 juin 2007, 21:56

Au plaisir

12 juin 2007, 21:58

Désolé Klomac

Mais j'ai tjr un problème car les info transmise par ma bdd ont tjr le même problème

Ca met les code à place des bon caractères

12 juin 2007, 22:01

Pour ce qui est des jeux de caractères avec MySQL je te propose de lire ce tutorial très clair à mon sens, écrit par un membre du Site du Zéro : http://www.siteduzero.com/tuto-3-6276-1 ... ments.html

12 juin 2007, 22:04

Même avec la balise méta que tu m'as dis de mettre le problème reviens quand même même si se n'est pas du mysql

13 juin 2007, 01:10

Alors j'ai regardé il me faut c'est 2 balise méta

Celle-ci pour les données de ma bdd:

Code : Tout sélectionner

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

Et celle là pour le html:

Code : Tout sélectionner

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

Mais comment faire pour regrouper les 2 car si je met les 2 il ne prend en fonction la première et pas la deuxième

Idem si je les inverse

13 juin 2007, 01:57

Ton encodage est soit UTF8, soit ISO. Si tu veux que la bdd et le code soient du même encodage, il faut soit encoder la base en ISO, soit le fichier en UTF8.
Pour transformer l'encodage du fichier, il suffit de le réenregistrer en UTF8.

13 juin 2007, 06:17

Je crois que tu n'a pas lu le lien que je t'ai donné, il t'indique la marche à suivre pour encoder les informations en DB dans le jeu de caractères que tu souhaites, et ça ne passe pas par une balise <meta>.

En fait il faut distinguer plusieurs choses :
- l'encodage de tes fichiers (que tu règles dans ton logiciel)
- l'encodage des informations dans la base de données (que tu indique dans l'administration de ta BDD)
- l'encodage des informations qui transitent par PHP (que tu indique avec des instructions du type header() )
- l'encodage des pages HTML qui sont produites au final (que tu indique avec une balise meta)

Ce qui est primordial, c'est que le jeu de caractères que tu indique à tel ou tel endroit soit bien le jeu de caractères réel utilisé. Par exemple, si tu as encodé un fichier HTML en UTF-8 et que tu mets une balise <meta> pour indiquer que c'est de l'ISO, tu vas te retrouver avec des ? à la placé de tes accents etc...

L'idéal c'est que tu encodes tes fichiers et tu règles ta BDD sur le même jeu de caractères, ça évite les confusions. Cela dit il peut arriver que ce ne soit pas le cas, et alors tu doit faire appel à des techniques de conversion (pour MySQL il y a des infos dans le lien que je t'ai passé ; sinon il y a des fonctions PHP pour ça).

13 juin 2007, 09:31

Bonjour,

J'utilise un language UTF-8 pour la base de donnée et j'ai remarqué que le footer de mon site est aussi en UTF-8 hors que celui-ci est construit de la même manière que le contenu de mon index hors mon index me met des � alors comment faire pour coder un language html en UTF-8 car là je sais pas du tout.

13 juin 2007, 11:20

Hello,

J'ai le même problème que toi en ce moment (et j'imagine que cela va durer),
Il semblerait que, pour mon cas, base de données en utf8, charset de pages en utf8, le probleme vienne du client mysql qui est en latin1.

Si quelqu'un d'un peu plus culturé peut expliquer le bidule... moi non en tout cas

Toujours est il que, pour mon cas, le probleme se résoud en faisant systématiquement une premiere requete apres la connexion :

Code : Tout sélectionner

SET NAMES utf8

Sinon, à ce que j'ai pu lire, faut aller bidouiller dans le my.cnf ou my.ini mais cela résoudra ton probleme en local, mais il est peu probable que tu puisse le faire sur un serveur mutualisé

Donc essaye cette requete au cas où, sans garantie que ton problème se situe à ce niveau bien entendu.

Bon courage !

13 juin 2007, 14:05

Le problème que j'ai ne viens pas de mon mysql mais de mon texte que j'écris en html.

Alors voilà j'ai fait un site en html, php, mysql sur mon hébergeur.

Puis j'ai refait un autre site sur le même hébergeur la même bdd le script php et les requêtes sql sont les mêmes a l'identique sauf que maintenant je suis en xhtml, php, mysql.

Moi je pense que cela vient du xhtml car en html basique je n'ai pas se problème je le rencontre que en xhtml

Probleme avec affichage des caracteres sur les pages

Qui est en ligne