[résolu] Décalage de qq pixels en haut sous Firefox ?

Décalage de qq pixels en haut sous Firefox ? [résolu] - HTML/CSS - Programmation

Marsh Posté le 20-01-2010 à 18:50:29    

Bonjour à vous,
 
 
J'ai un curieux léger décalage en haut de ma page web, une fois n'est pas  
coutume uniquement sur Firefox, pas sur IE (7).
 
Auriez-vous une idée ? Je ne vois pas la moindre trace de quoi que ce soit  
(paragraphe html, marge-top en css, etc...)
 
 
http://nsa10.casimages.com/img/2010/01/20/100120064817234149.jpg
(en jaune-beige un bloc CSS #contenant, en blanc mon fond...)


Message édité par toum_toum le 26-01-2010 à 13:39:21

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 20-01-2010 à 18:50:29   

Reply

Marsh Posté le 21-01-2010 à 14:18:32    

CODE CODE CODE CODE CODE merci


---------------
Blablaté par Harko
Reply

Marsh Posté le 21-01-2010 à 17:38:02    

J'ai l'explication, mais sans avoir la soluce...
 
 
J'ai créé, dans mon en-tête, un menu, et j'ai dû ajouter "artificiellement" qq paragraphes pour "descendre" ce menu (qui est dans un tableau) vers le bas de l'en-tête...
 
 
Pour simplifier, ça donne :
  <div id="entete">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
     Tableau dans lequel mon menu...
  </div>
 
 
Du coup un seul de ces <p>&nbsp;</p> suffit pour que ce décalage apparaisse (en fait comme si un paragraphe venait s'incruster curieusement "par dessus" l'en-tête...). Je ne sais pas pourquoi... (mais j'avais déjà observé ça il y a qq années...).
 
 
 
1. Bref, n'y a-t-il par un moyen de positionner différemment ce tableau ?
 
2. Voire (autre solution) je pourrais créer une nouvelle Div, nommée par exemple <div id="menu">, que je placerais en dessous ma <div id="entete"> (séparant en-tête, menu de navigation et contenant).
 
 
Que pensez-vous au sujet de ces 2 questions  :o ?


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 21-01-2010 à 18:25:26    

Ton problème vient d'un concept CSS, pas un bug, un concept normal.
le traping margin. En gros, la marche du <p> que tu rajoute, est reportée l'élément parent, donc le div "entete".
 
Pour résoudre ton pb, tu peux rajouter un padding-top de 1px sur #entete.
 
Sinon pour décaler ton tableau par rapport au debut de entete, sois tu applique un padding-top sur #entete de plusieurs pixel (40, 50px comme tuveux)
soit tu utilises un margin-top sur ton tableau.


---------------
Blablaté par Harko
Reply

Marsh Posté le 21-01-2010 à 18:31:41    

Merci pour la réponse.
 
Je vais potasser tout ça à tete reposée en soirée... :)
 
 
Une question tout de même (sur le dernier paragraphe) : en utilisant un padding-top sur #entete, je vais faire tout decaler vers le bas : pas seulement le menu, mais aussi une photo-background qui est placée au dessus, non ?
Donc le margin-top sur le tableau serait mieux approprié ?
 
Et une autre question : est-ce que mon point 2 était une mauvaise solution (un div "special menu" ) ?


Message édité par toum_toum le 21-01-2010 à 18:37:47

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 21-01-2010 à 20:49:38    

mais ton image en background tu vas pas la décaler hein, enfin tout dépend comment est codé ton site, mais j'ai bien peur que tu as bien bricolé ton site.
le margin top à ton menu est plus approprié
 
ton point 2 n'était pas une solution à ton probleme


---------------
Blablaté par Harko
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed