Header espace

Bonjour
j'ai un problème avec cette page

http://www.randonnees-pyrenees-orientales.com/test/test/alsa.htm



Je comprends pas pour il y as un espace entre le header et le haut de la page, sa fait une heure que je cherche voir plus

Bonjour,

As-tu essayer d'utiliser Firebug pour vérifier les styles appliqués à chaque élément de ta page ?

passe ton code au W3C peut être que cela va t'aider (je viens de le faire passer tu as 25erreurs)

après si ca persiste mets nous un bout de code qu'on regarde mieux

Salut,

Met le font-size de ton body à 0px

PS: me demande pas pourquoi

Ok je te demande pas pourquoi
ça marche effectivement mais tout mon texte disparait vue qu'il est = à 0

étrange ce beug je comprends pas là

font-size ?? Et tu le rétablirais sur quel élément pour qu'on puisse lire le texte?

Avec Firebug, l'outil ultime des intégrateurs, je vois qu'il y a un élément div dont la hauteur est fixée à 21px

<div class="header-bar-bleu">

et que le conteneur du titre a des marges hautes et basses :

.main {
margin:10px 0;
}

Salut Felipe
Le problème se passe plus haut c'est l'espace entre le haut de la page et la div en rouge qui pose problème.

J'utilise firebug aussi mais j'arrive pas a trouver le problème. c'est étrange

Le seul truc qui marche c'est de mettre le font-size a 0 mais pas très pratique après plus de texte

pfoofen a écrit :
Met le font-size de ton body à 0px

N'en fais rien.

PS: me demande pas pourquoi (mais je masteurize plus CSS que pfoofen, sans vouloir l'offenser, donc fais moi confiance).

Salut Florent V.
Si je fait rien sa resoud pas mon problème et si je mets le font size a 0 non plus
personne a de solution ?

Je pense que tu as un '.' qui c'est glissé juste avant le div <div class="header-container">

Supprime-le et ton problème sera résolut.

PS: tu as oublié de fermer tes balises méta et tes balises link (petit indice ce sont des balises autofermantes)

PS2: change de doctype

salut je ne vois aucun point.
j'ai fait afficher le code source avec firefox je vois pas de '.' (tu as de bon yeux )

<!-- <div class="wrapper"> -->
	    <div class="page">
        &#65279;<div class="header-container">
    <div class="header">

il a quoi mon doctype ?

Bon, j'explique quand même.

Le coup du font-size à 0px (ou 0 tout court), c'est intéressant car ça permet de constater que cet écart correspond à une hauteur de ligne de texte. Pour être plus précis, l'écart correspond à une hauteur de ligne, soit la hauteur du texte multipliée par le ratio par défaut de hauteur de ligne (line-height). Donc pour un font-size: 20px, on aura un écart dans les 25 ou 26px. (Ça va dépendre de la fonte si on ne spécifie pas un line-height précis.)

Avec quelques recherches en plus, on peut constater que:
- cet écart est inclus dans div.page (mettre une couleur de fond visible à div.page pour le vérifier);
- Firebug affiche une ligne vide entre la balise ouvrante de div.page et div.header-container;
- Opera Dragonfly affiche la même chose;
- on a donc probablement des caractères de texte autres que des espaces, tabulations et retours à la ligne, qui seraient pris en compte et entraineraient la création par le navigateur d'une ligne de texte.

Et c'est là que c'est pas évident à trouver, car mon éditeur de code n'affiche rien de bizarre. Même si je supprime tout l'espace entre <div class="page"> et <div class="header-container">, ça ne donne rien. Par contre, si je supprime un peu plus de caractères avant et après, et que je réécris le code concerné, paf, problème corrigé.

Donc je sors mon éditeur hexadécimal pour voir ce qui peut bien se cacher là, et je trouve les trois octets suivants qui ne s'affichent pas visuellement:

EF BB BF

Je supprime ces trois octets, j'enregistre, et voilà: bug corrigé.

Donc le problème est que tu as des caractères invisibles dans ton code qui sont malgré tout pris en compte par les navigateurs. Il s'agit à priori de caractères non imprimables en UTF-8.

J'allais conclure en disant que je ne savais pas ce que c'était ni d'où ça venait, et puis là: trois caractères non imprimables dans un fichier en UTF-8? Bon sang mais c'est bien sûr! (Insérer ici la tête de l'inspecteur Bougret et celle de son fidèle adjoint Charolles.) C'est le BOM.

Une manipulation tout simple pour voir ce machin (sans passer par un éditeur hexadécimal): aller sur la page de test, et faire Affichage > Encodage des caractères > ISO-8859-1. Et voilà.

Moralité: brûler sur un bûcher celui qui enregistre ses fichiers en UTF-8 avec BOM. Sagouin.
Modifié par Florent V. (16 Nov 2009 - 21:17)

Bah t'as essayé de valider ton document sur le validateur du W3C tu vas avoir des surprises.

Le point apparaît quand je fais Ctrl + U (affiche le code source) puis je copie/colle tout le code dans notepad++

Mais là dans le code que tu viens de citer tu vois bien "&#65279;" qu'est-ce que ça fait là ?
Modifié par pfoofen (16 Nov 2009 - 21:18)

Alors la chapeau inspecteur cluzo heu pardon inspecteur Bougret et son célèbre adjoint firebug. Quel esprit de déduction faut dire il était pas facile à trouver celui la de beug bravo.

Il s'avère que c'est un problème d'encodage, mes fichiers sont en utf8 tout cours pas BOM, mais d'origine il sont en AINSI. C'est une maquette magento que j'intègre.

Donc j'avais le fichier header en utf8 qui généré un caractère bizarre. je l'ai remis en AINSI et tout vas bien. J'etais a des années lumière de penser que sa pouvais venir de là.

Mais je comprends pas pourquoi, en tout cas merci beaucoup car j'ai passé beaucoup de temps à chercher.

maca a écrit :
Il s'avère que c'est un problème d'encodage, mes fichiers sont en utf8 tout cours pas BOM, mais d'origine il sont en AINSI.

Non en fait ils ne sont pas en AINSI. Ils ne sont pas non plus en ANSI (le mot utilisé par ton éditeur de code), car en fait ton éditeur de code qui est sans doute Notepad++ te dit des bêtises et parle de «ANSI» alors que ça ne veut rien dire*.

C'est super les encodages et jeux de caractères. Déjà que c'est pas évident à comprendre à la base, mais en plus les outils qu'on utilise nous racontent que des bêtises ou compliquent inutilement les choses. Je pense à Notepad++ (très bon outil à certains égards, à la fois trompeur et limité pour la gestion des encodages, sauf dans les versions les plus récentes où c'est moins pire), mais aussi à MySQL/phpMyAdmin.

Je ne sais plus exactement ce que Notepad++ (ou du moins les anciennes versions) entend par ANSI. Soit il parle d'ASCII, soit il parle d'ISO-8859-1, soit de UTF-8 avec BOM (ou sans?). Je vote pour ISO-8859-1 mais ça serait à vérifier.

Moralité: mettre à jour Notepad++, ou bien changer d'éditeur de code.

----
* Pour la petite histoire, l'ANSI est l'organisme américain de normalisation, équivalent de l'AFNOR français.
Modifié par Florent V. (17 Nov 2009 - 18:01)

Je me rappelle il y avait un temps où j'écrivais mes pages en html 4.01 transitional avec encodage ISO-8859-1, même édité avec notepad, ca passait alors que ce programme prétendait écrire en ANSI. Enfin j'espère ne pas me tromper.

Cette enquête est mené avec brio !
Beaucoup de rebondissements, une histoire prenante avec un soupçon de désespoir au milieu du chapitre... Cependant, quand le héros arrive, tout va très vite ! vraiment un scénario à couper le souffle .

Sinon pour trouver ça comme erreur wahou ! vraiment bravo
Modifié par Wamdeus (18 Nov 2009 - 10:15)

Salut merci pour les précisions
c'est codé dans un autre format oui et dans un autre systeme d'exploitation Linux, ça doit pas être facile pour le pauvre notepad++
c'est bien notepad ++ que j'utilise. si tu peux me conseiller un éditeur aussi bien et qui encode correctement je suis preneur

J'utilise aussi neatbeans mais là c'est l'usine on peut allez boire café quand on le lance