28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Ceci est mon premier message, je viens de m'inscrire bien que je consulte régulièrement le forum depuis un moment, quand je suis face à un problème ou autre.

Ce qui m'amène, c'est quelque chose d'étrange : je développe en ce moment une refonte totale de mon site personnel, qui fera office de CV en ligne.

Tout se passait bien, puis j'ai voulu tester mon formulaire mail et j'ai donc modifié le php.ini de WAMP, sans succès...

Après ça, une marge totalement imaginaire est apparu sur mes pages, elle n'était pas là avant et je n'ai pas touché au CSS ni au HTML.

http://img163.imageshack.us/img163/166/bugfirebug3.jpg

De plus, quand j'affiche le code source via CTRL + U, tout est normal, mais via Firebug, la moitié du contenu du head est dans le body (comme en témoigne l'image ci-dessous) :
http://img593.imageshack.us/img593/7281/bugfirebug.th.jpg

Le bug apparait sous la forme d'un espace entre les divs "page" et "footer", qui ont pourtant tous les deux des marges, respectivement inférieure et supérieure, de zéro.
Ce que j'ai aussi remarqué, plus difficilement, c'est l'espace au dessus du div "page", qui devrait commencer en haut de la fenêtre, collé au body.
C'est Firebug qui l'a révélé. Encore une fois, je joins une capture d'écran : on voit clairement que le div commence par un padding (en violet) puis est coloré en bleu. Mais le padding devrait être collé au haut de la fenêtre, puisque ni le body ni le div "page" n'ont de marge.
upload/35530-bugfirebug.jpg

J'aurais aimé proposer un aperçu en ligne, mais le site n'est pas encore terminé et les formulaires de mail sensibles au spam. Et comme il s'agit de la refonte d'un site existant, les robots passent déjà par là... Du coup, je préfère ne pas uploader tant que tout n'est pas terminé. (puis question de SEO, aussi.)

Je suis donc face à une impasse, à un bug qui me semble étrange et sans cause apparente, surtout que mon CSS et mon HTML sont parfaitement cleans. (et que l'erreur est apparu comme ça, d'un coup !)

Si quelqu'un a une explication, je suis preneur. Et si c'est une solution qu'on me propose, je le suis encore plus.

Merci d'avance ! Smiley smile

Edit à 4h45 : L'un des 2 bugs a disparru tout aussi spontanément. La marge qui s'était créée entre le haut de body et le haut du div "page" s'est résorbée d'elle même.
Vraiment bizarre.
Modifié par Pakito (12 Jan 2011 - 04:53)
Salut,

Ben, sans au moins le code source complet de la page, je crains qu'il ne soit pas possible de pouvoir t'aider.
Ayant demandé de l'aide hier sur Twitter, j'ai déjà publié les sources sur Pastebin, je les mets donc ici :
- html : http://pastebin.com/FJhWbCXT
- css : http://pastebin.com/qVYXFbbu

Le truc, c'est qu'au final n'ayant plus qu'un bug, je suis parvenu à le fixer avec un margin négatif, mais je ne supporte pas de ne pas comprendre.
Ce n'est pas la première fois, il me semble, que ce genre de choses m'arrivent, j'aimerais qu'on me dise que je ne suis pas le seul en fait...
Bonjour.
Je ne vois pas d'erreur, ni HTML ni CSS.
Par contre comme il n'y a pas de reset css tu risques d'avoir des marges indesirables.
Par exemple ton menu
Tu supprimes bien le padding mais pas le margin. Alors que par defaut il y a un margin-top sur les ul.
Egalement sur le body il y a des marges gauche et droite.
Comme ces valeurs par defaut ne sont pas les mêmes d'un navigateur à l'autre je te conseil un reset css.
Il ya un article sur alsacreation
Merci, je sais qu'il faut faire le reset oui. Si je ne l'ai pas fait pour l'instant, c'est parce que ça ne m'étais pas encore nécessaire, mais c'est bel et bien prévu.

Cela dit, pour ce que tu énonces, je l'ai fait :
- mon body a un margin:0;
- mon ul .nav n'a rien de spécifié en général, mais c'est fait dans #header .nav et #footer .nav, puisque le même menu est utilisé 2 fois, avec des positionnements différents. Et donc je devais spécifier des marges particulières selon le cas.

Et idem, je ne vois pas d'erreur ni HTML ni CSS dans mon code, je l'ai passé au Validator W3C, mais rien.
On m'a suggéré sur Twitter que c'était du à un problème local, mais j'ai fait un test sur mon ftp dans un dossier protégé, et y suis allé depuis mon pc fixe ainsi que mon laptop, le problème est survenu sur les deux.

Du coup, j'ai fait un margin-top: -16px; (pourquoi 16 ? Parce que c'est là que ça se rattache bien...) sur mon div #footer. Pour l'instant c'est correct.

Mais ce genre de bug me tue, surtout pour son caractère spontané et inexpliqué.
Il est impossible que la modification de php.ini ai influé sur l'affichage.
Je n'ai rien modifié lors de l'apparition du bug.
Et, le pire selon moi, c'est une partie du head qui se retrouve dans le body sur Firebug, mais pas dans le code source affiché par CTRL + U ...