28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je viens de me rendre compte que sous Firefox mon site ne s'affiche pas comme il le devrait, je dois dire que par le passé c'est plutôt par IE que j'ai été embeté. Smiley fache

Cela fait bien longtemps que j'ai créer ce site et il est possible que j'ai oublier quelquechose dans mon CSS. Smiley sweatdrop

Voici l'adresse de mon site www.commandofireskull.fr .

De plus j'ai tout en haut à gauche de mon site ces symboles -> 
Que signifient-ils ?

Merci d'avance de votre aide.

/* BC2 TEMPLATE BY */
/* BY Commandofireskull.fr - N°1 Communauté francaise multi-jeux GF © Reproduction partielle ou totale interdite */

/* Mise en page générale */
body {
background: url("img/bc2-bg.jpg") top center #191919 no-repeat fixed;
font-family: Sans Serif, Verdana;
color: #656565;
padding: 0px;
margin: 0px;
}

#page {
width: 1000px;
margin: auto;
height: 100%;
background: url("img/85-blanc.png") repeat;
box-shadow: 5px 0px 8px #191919;
-moz-box-shadow: 5px 0px 8px #191919;
-webkit-box-shadow: 5px 0px 8px #191919;
}

#adsense {
width: 120px;
margin: auto;
}

img, a img {
border: none;
}

/* Mise en forme du texte */

p a:visited {
color: #FF9933;
}

p a {
color: #FF9933;
}

h2 {
text-decoration: underline;
}

h3 {
text-decoration: underline;
}

p:first-letter /* La première lettre de chaque paragraphe */
{
font-weight: bold;
font-size: 1.2em;
color: orange;
}

.date_news {
text-align: right;
}

/* Reglages menu */
#menu {
width: 1000px;
height: 60px;
background: url("img/85-noir.png") repeat;
float:right;
}

ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }
li {
 float:left; /*pour IE*/
 }
ul li a {
 display:block;
 float:left;   
 width:120px;
 height: 60px;
 line-height:50px; /*hauteur de l'image de fond*/
 color:#DCDCDC;
 text-decoration:none;
 text-align:center;
 }
ul li a:hover {
 background: url("img/85-noir.png") repeat;
 color:white;
 }  

 /* Organisation des blocs */
#header {
width: 1000px;
height: 240px;
background: url("img/header.jpg") #000000 no-repeat;
}

#conteneur {
width: 1000px;
}

#contenu {
width: 728px; /* Prise en compte du padding (750-2)-(2*10px) */
border-right: 2px #656565 dashed;
float: left;
padding: 10px;
}

#barre { 
width: 230px; /* Prise en compte du padding  250-(2*10px) */
float:  left;
padding: 10px;
}

#footer {
max-width: 1000px;
font-size: 12px;
background: url("img/85-noir.png");
clear: both;
padding-bottom: 10px;
padding-left: 10px;
}

Modifié par pansement (15 Jun 2012 - 17:29)
Pour les caractères, j'imagine que tu travailles avec un editeur de texte et celui-ci doit mal encoder tes fichiers.

Tu retrouves ces caractères au moins 3 fois dans ta page, donc je pense que tu fais Un include en haut, 1 en bas et ptet un troisieme au milieu et que ces cractères sont au début des fichiers.
Naemesis a écrit :
Pour les caractères, j'imagine que tu travailles avec un editeur de texte et celui-ci doit mal encoder tes fichiers.

Tu retrouves ces caractères au moins 3 fois dans ta page, donc je pense que tu fais Un include en haut, 1 en bas et ptet un troisieme au milieu et que ces cractères sont au début des fichiers.


Et bien oui j'utilise notepad ++ comme éditeur comme beaucoups de gens, et oui il y a 3 include (un pour le menu, un pour la sidebar, et un autre pour le footer). Smiley smile

Mais je ne comprends pas pourquoi ce bug survient QUE sur Firefox. Smiley rolleyes
Salut à toi


Le truc c'est que primo t'a pas de doctype (question d'hygiène si on peut dire ^^ (blague))

Et que a mon avis tu dois tester avec dans ton body un heigh 100% et non dans #page


Actuellement, dans le body (CSS) si tu met un height 100% sa marche pas. si tu met 800% ça marche.. alors je sais pas pourquoi

Peut etre parce que tu utilise des iframe pour charger tes pages, et du coup t'a plusieurs balise <body> SANS ID ni CLASS et du coup le navigateur ce mélange...

à tester si tu met un ID dans le body primaire, et que tu met le height a 100%.
JuseN a écrit :
Salut à toi


Le truc c'est que primo t'a pas de doctype (question d'hygiène si on peut dire ^^ (blague))

Et que a mon avis tu dois tester avec dans ton body un heigh 100% et non dans #page


Actuellement, dans le body (CSS) si tu met un height 100% sa marche pas. si tu met 800% ça marche.. alors je sais pas pourquoi

Peut etre parce que tu utilise des iframe pour charger tes pages, et du coup t'a plusieurs balise &lt;body&gt; SANS ID ni CLASS et du coup le navigateur ce mélange...

à tester si tu met un ID dans le body primaire, et que tu met le height a 100%.


Bon beh en bidouillant ca s'affiche bien, en fait au lieu de modifier le pourcentage du height je l'ai carrément enlever. Allez comprendre !!! Smiley langue

Reste plus que le problème des symboles bizarres...

En tous cas merki JuseN Smiley confused
bah ces symboles là, avec firebug ils apparaissent en texte... comme je n'ai pas vu de doctype, donc UT8 absent, les accents prennent des apparence bizarre ^^

met un doctype, regarde si ça a changer, sinon ... c'est peut etre un "é" qui traine entre deux balises.
JuseN a écrit :
Sinon, je te conseille ça

http://www.alsacreations.com/astuce/lire/86-ma-pagemon-code-source-commence-par-de-quoi-sagit-ilnbsp.html


qui traite ces fameux 



Re,

J'ai essayer de mettre en UTF-8 (sans bom) mais ca à fait n'importe quoi sur le contenu de mes pages, donc j'ai remis en AINSI partout.

La tout va bien ça s'affiche comme il faut par contre à chaque fois que je créer une news et qu'elle contient un accent par exemple ça coupe la news a partir du premier accent Smiley decu .

J'ai essayer de regler la base de donnée sur utf-8 general ou unicode, ca a rien fait.

La pages news.php et en ainsi si je la met en utf-8 ca bug.

Que dois-je faire ?
pansement a écrit :
Que dois-je faire ?

Tout gérer en UTF-8 partout:
- Base de données.
- Données en base (techniquement tu peux stocker tout et n'importe quoi dans une base qui se dit "utf8" ou "latin1", y compris des données corrompues...).
- Connexion entre ta base de données et ton script PHP (voir du côté de la directive SET NAMES).
- Gestion des caractères en PHP (normalement rien à faire, mais certaines fonctions ont besoin qu'on leur indique clairement que l'on travaille en UTF-8 sinon elles supposent de l'ISO-8859-1 et font n'importe quoi).
- Enregistrement de tes fichiers de template en UTF-8 sans BOM.
- Déclaration de tes pages HTML en UTF-8 (via une balise <meta> et idéalement l'en-tête HTTP Content-Type).

Si tu as construit ton site sans tenir compte du codage de caractères à chaque niveau, ça peut être compliqué de revenir en arrière et de voir à chaque niveau si tout est ok, surtout quand on connait mal la problématique. Du coup je te souhaite bon courage. Smiley smile

En passant, le codage de caractères AINSI n'existe pas. Notepad++ parle de ANSI (pas AINSI), et c'est à priori un nom abusif pour parler de ISO-8859-1. (Est-ce que ta version de Notepad++ est à jour? Il me semble qu'ils avaient corrigé cette histoire de nom abusif dans la dernière version majeure.)

Ah, et si tu as des fichiers de template avec un BOM en début de fichier (les trois octets qui te donnent ce fameux  quand ils apparaissent au milieu du code généré ou en début d'une page déclarée en ISO-8859-1 au lieu de UTF-8), c'est tout de même vachement étonnant qu'en enregistrant ces fichiers en UTF-8 sans BOM ça te crée le moindre souci de rendu. Tes fichiers sont censés être déjà en UTF-8, et la seule chose que ça change c'est que tu retires les trois octets du BOM au début du fichier. Smiley ohwell

Edit: bon en fait tes pages envoient des données en ISO-8859-1, pas en UTF-8.
Ton code HTML dit: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Mais l'en-tête HTTP envoyée, qui est prioritaire, dit: Content-Type:text/html; charset=iso-8859-1
Donc si tu veux travailler en ISO-8859-1, il faut enregistrer tes fichiers avec ce codage (si certains ont été enregistrés en UTF-8), et corriger ta balise <meta> pour déclarer de l'ISO-8859-1.
À noter: un fichier UTF-8 qui ne contient que des caractères ASCII (lettres latines non accentuées notamment) est techniquement identique au même fichier enregistré en ISO-8859-1, donc pas besoin de le transcoder.
Modifié par fvsch (14 Jun 2012 - 10:42)
fvsch a écrit :

Mais l'en-tête HTTP envoyée, qui est prioritaire, dit: Content-Type:text/html; charset=iso-8859-1


Tout d'abord merci de ta réponse fvsch Smiley biggrin , j'étais un peu en mode désespérer la Smiley lol
Comme tu l'as préciser mon DTD etait déja régler sur UTF-8, mais ou est ce que tu vois que l'entête (prioritaire) demande de l'iso-bidule et comment changer se réglage ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Team/Clan = CFS = | Communauté des Commando.Fire.Skull | =CF$=</title>
	<link rel="stylesheet" media="screen" type="text/css" href="themes/bc2/style.css" />
	<link rel="shortcut icon" rel="icon" type="image/x-icon" href="images/favicon.ico" />
</head>


Idéalement je préfère travailler en UTF8, mais je me suis taper le dl de tous les .php et .html et j'ai traquer le moindre petit signe de iso mais je n'ai rien trouvé, donc comment as-tu pû le voir ? Smiley biggol

PS: En changeant le codage par le navigateur sur utf8 ca marche, mais pourquoi se met-il automatiquement sur iso ?

Et ma base de donées est bien réglée sur UTF-8 normalement.

<?php
	// File is authentif_bdd
try
{
	// Connexion a la BDD Mysql
	$bdd = new PDO('mysql:host=sql.1and1.com;dbname=web****', '****', '******');
}
catch (Exception $e)
{
		// Si les identifiants sont mauvais, on affiche un message d'erreur
        die('Erreur : ' . $e->getMessage());
		echo "Connection à la base de donnée impossible !";
}
	$bdd->exec('SET NAMES utf8');
?>

Modifié par pansement (14 Jun 2012 - 15:51)
Re,

Dans le lien que tu m'as donné je n'ai pas trouver comment modifier le charset dans les en-têtes HTTP, tout ce que j'ai trouver à ce propos c'est de mettre ADDdefaultcharset dans apache.conf fichier auquel je n'ai pas accès (hébergement mutualisé).

Smiley murf Ce que j'ai quand même essayer de faire :

- Déclarer l'encodage UTF8 dans la balise META.
- Demander l'encodage par défaut en UTF8 dans le .htaccess

Toujours le même problème d'affichage sur mon site www.commandofireskull.fr , sauf que la les caractères sont mal affichés sur tout les navigateur... au moins ca ne veut uniformément rien dire ! Smiley sweatdrop


Quelle autre option me reste-t-il ?
Modifié par pansement (14 Jun 2012 - 16:48)
pansement a écrit :
Dans le lien que tu m'as donné je n'ai pas trouver comment modifier le charset dans les en-têtes HTTP, tout ce que j'ai trouver à ce propos c'est de mettre ADDdefaultcharset dans apache.conf

Non, l'article dit très clairement qu'on ne va pas s'occuper de modifier la configuration globale d'Apache, et la partie qui propose d'utiliser AddDefaultCharset parle bien d'un fichier .htaccess à la racine du site.

pansement a écrit :
- Demander l'encodage par défaut en UTF8 dans le .htaccess

Oui, c'est normalement la solution. Si ça ne prend pas, après avoir vérifié que ton fichier s'appelle très exactement ".htaccess" (le premier caractère est un point), tu peux tester les directives suivantes une par une:

AddDefaultCharset utf-8
AddDefaultCharset Off
AddCharset utf-8 .html
AddCharset utf-8 .php
AddCharset utf-8 text/html

Si rien ne passe, deux raisons possibles:
- Ton code PHP déclare un codage ISO-8859-1 via la fonction header(). Le corriger le cas échéant.
- C'est bien le serveur qui est en mode AddDefaultCharset On (avec un charset par défaut sur ISO-8859-1 comme c'est typiquement le cas avec Apache), et ton fichier .htaccess est ignoré parce que l'hébergeur a configuré Apache pour ignorer les .htaccess ou ignorer cette directive. Dans ce cas, contacter l'hébergeur.
fvsch a écrit :

Non, l'article dit très clairement qu'on ne va pas s'occuper de modifier la configuration globale d'Apache, et la partie qui propose d'utiliser AddDefaultCharset parle bien d'un fichier .htaccess à la racine du site.


Oui, c'est normalement la solution. Si ça ne prend pas, après avoir vérifié que ton fichier s'appelle très exactement &quot;.htaccess&quot; (le premier caractère est un point), tu peux tester les directives suivantes une par une:

AddDefaultCharset utf-8
AddDefaultCharset Off
AddCharset utf-8 .html
AddCharset utf-8 .php
AddCharset utf-8 text/html

Si rien ne passe, deux raisons possibles:
- Ton code PHP déclare un codage ISO-8859-1 via la fonction header(). Le corriger le cas échéant.
- C'est bien le serveur qui est en mode AddDefaultCharset On (avec un charset par défaut sur ISO-8859-1 comme c'est typiquement le cas avec Apache), et ton fichier .htaccess est ignoré parce que l'hébergeur a configuré Apache pour ignorer les .htaccess ou ignorer cette directive. Dans ce cas, contacter l'hébergeur.


Je vais essayer ça dans la journée, je vous dirai ce qui à marcher !
pansement a écrit :


Je vais essayer ça dans la journée, je vous dirai ce qui à marcher !


Coucou les amis Smiley lol

Si je suis de si bonne humeur c'est que mon problème est réglé ! Smiley biggrin

En fait en verifiant que mon code PHP ne déclarai pas un codage ISO-8859-1 via la fonction header(), Smiley murf je me suis dit et pourquoi pas le lui demander pour l'UTF8.

J'ai donc mis un petit coup de :
<?php
	header('Content-type: text/html; charset=utf-8');
?>
à mon index.php et c'est repartit comme à quatorze. Smiley biggol

Bref, me reste à vous remercie pour votre aide, particulièrement à fvsch et JuseN.

@ très bientôt Smiley cligne