[Résolu]Problème de décalage

Salut,

J'ai un petit problème dans mon design, j'aimerais collé mon header avec le corp de ma page. Pour le moment pas de problème, dans un second temps je veux ajouter un titre dans le corp de ma page, je met donc un <h1> et la un problème survient, le <h1> décalle le corp de ma page vers le bas .

Je n'ai pas trouvé comment faire pour empécher ça mis à part en faisant un margin-top négatif, est-ce que vous avez une idée de comment je pourrais faire autrement ?
Et de pourquoi le <h1> décale le corp de ma page ?

Voilà une petite capture « explicative »;
Et voici le lien vers le design en question, attention les menu à gauche et à droite ne sont pas encore extensibles et il passe donc relativement mal si notre résolution est différente de 1280*1024.

Merci d'avance
Modifié par TR3NT (03 Sep 2008 - 10:15)

Il me semble que les balises hx ont des propriétés de margin ou de padding par défaut. Donc une solution, tu applique une classe ou tu donnes un id à ton h1 afin de pouvoir l'identifier par CSS, puis de lui enlever ses propriétés par défaut (ou de les redéfinires).

Je ne suis pas super calé et il me semble que ça pourrait être légèrement plus compliqué que de redéfinir les propriétés par défaut des balises hn.

Ce que je fais sur mes sites, c'est que je supprimme tous les paddings et toutes les marges (et toutes les autres choses indésirables ) afin de les redéfinir quand j'en ai besoin

Voici le début d'une de mes feuilles de style CSS, afin de te donner un exemple :

/* Suppression de toutes les valeurs par défaut */
* {
margin: 0px auto;
padding: 0px;
font-family: sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

L'astérisque de la 2e ligne sert à identifier tous les éléments

-- Edit --

Je viens de retrouver deux articles qui parlent de cette technique sur le site d'alsacréation (qui déconseillent en fait son usage )
Article sur le rendu par défaut en général : http://css.alsacreations.com/outils/rendu/rendu-css-elements.html
Article sur la technique Reset CSS en particulier (le lien est d'ailleurs dans le premier article) : http://blog.alsacreations.com/2007/07/02/369-reset-css-une-technique-a-manier-avec-precaution
Modifié par superjun (03 Sep 2008 - 03:34)

Merci beaucoup, il semble que le problème venait du margin car en tapant margin:0px; tout est revenu à la normale.

Toutefois, ce problème m'ébaubis car j'étais carrément obliger de mettre un margin: -27px; par le passé pour le corriger, je ne sais pas ce que j'ai changé dans mon CSS pour que ce soit correct maintenant avec simplement un margin:0px;

Merci encore dans tout les cas, problème résolu .

Si tu devais mettre un margin négatif, c'est peut-être qu'en fait il corrigeait un padding. Alors que là c'était un margin positif par défaut, que tu remets à zéro
Certains navigateurs n'utilisent pas les mêmes propriétés pour arriver à un certain rendu (c'est expliqué dans le premier lien que je t'ai donné).

PS : Il me semble (et ce serait d'ailleurs plutot logique) que les margin/padding par défaut sont en valeur relatives (%, em, etc)... donc éviter les unités en pixels pour éviter des problèmes lors de l'agrandissement du texte (pour 0px, change rien, mais pour -27px, ça peut être problématique)
Modifié par superjun (03 Sep 2008 - 14:29)