Problème de mise en page.

Bonjour,

j'ai un problème de mise en page sur le site suivant :

http://webotop.free.fr/

je ne comprend pas pourquoi le body de la page d'accueil n'est pas centré alors que celui de cette page http://webotop.free.fr/webmaster/sommaire.php est centré.

D'autre part le menu css cache la border line de l'élément corps

#corps
{
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
padding: 10px;
border: 2px solid #368DC5;


et je n'ai pas encore trouvé pourquoi.

Vous me direz j'ai qu'a bosser, mais en même temps bien qu'ayant lu le livre css 2 de ce site je ne trouve toujours pas.

Donc si quelqun peut me mettre sur la piste , le fichier css est la
http://webotop.free.fr/style.css


Merci d'avance pour vos conseils.

Mets align="center" sur ton table plutôt que sur un td...

Mais bon, les tableaux sont dépréciés de nos jours, penses-y.

Bonjour,

Ca serait bien de mettre un doctype sur l'index aussi et te pencher sur la validation W3C .. ta page sommaire,elle, possède un doctype pas l'autre .. :s

+1 pour rafale29: travailler la validité du code permettra de travailler sur une base saine pour résoudre les problèmes de rendu, s'ils persistent.

Merci de vos réponses.

J'ai rajouté le doctype perdu et miracle cela marche. Moi qui pensai que la validitée était à travailler mais ne changerait pas l'aspect


En fait sans le doctype je surprend un peu le navigateur à parler html tout un coup et il n'interprète pas tout ?

Sinon pour la validité w3c, le xhtml strict et le tout css, j'y travaille. Mais coimme il faut tout faire c'est long

Si quelqu'un comprend pourquoi le menu css cache la ligne de bordure de corps je suis preneur.

Merci.

Bonjour,

je suis arrivé a rétablir la ligne de bordure de "corps" en mettant #corps au dessus de #menu dans le fichier css. Apparament une mise en page d'un élément doit être définie avant celle de son conteneur non ?

Je ne savais pas que l'ordre dans le fichier css avait une importance.

Bon mes problèmes ne sont pas résolu il y un décalage entre les deux blocs qui font tous deux 1000 px.

Si quelqun a des infos

Merci.

skieur a écrit :
je suis arrivé a rétablir la ligne de bordure de "corps" en mettant #corps au dessus de #menu dans le fichier css

Le simple changement d'ordre n'est pas censé avoir un impact, si les deux sélecteurs ne s'appliquent pas aux mêmes éléments. Peut-être as-tu plutôt corrigé une erreur de syntaxe?

skieur a écrit :
Apparament une mise en page d'un élément doit être définie avant celle de son conteneur non ?

Non non.

skieur a écrit :
Je ne savais pas que l'ordre dans le fichier css avait une importance.

Il n'en a que si tu écrases les propriétés d'un élément en les définissant à deux endroits différents.

Ce qui compte, c'est la cascade CSS et la priorité des sélecteurs. Openweb a un article instructif à ce sujet:
http://openweb.eu.org/articles/cascade_css/

skieur a écrit :
Bon mes problèmes ne sont pas résolu il y un décalage entre les deux blocs qui font tous deux 1000 px.

Aucun des deux ne fait 1000px:
- le premier fait 1px + 1000px + 1px, soit 1002px;
- le deuxième fait 1px + 10px + 1000px + 10px + 1px, soit 1022px.

Si ça ne te semble pas clair, c'est que tu n'as pas encore travaillé la question du modèle de boite CSS.
CSS - Modèle de boîte.

Enfin, pour la validité et le Doctype: il s'agit de ce qu'on appelle le «Doctype switching», qui permet au navigateur de décider s'il doit utiliser un mode de rendu Quirks (à l'ancienne) ou Standard.
Plus d'info:
http://blog.alsacreations.com/2005/08/01/183-choix-dune-dtd-le-doctype-switching-nest-pas-pour-nous
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

Par ailleurs, 1000px c'est trop large pour un écran en 1024, avec barre de défilement, possibles bordures de la fenêtre, fenêtre du navigateur pas toujours maximisée, etc. On conseille généralement de ne pas dépasser 980px. Mais tabler sur du 900px (centré) permet d'avoir des respirations de chaque côté du site, ce qui est plutôt intéressant.

Bien sûr, l'idéal reste encore le design en largeur fluide, s'adaptant (avec quelques restrictions si on le souhaite) à la largeur du navigateur de l'utilisateur.
Cf. Faire un site pour toutes les résolutions.

Merci beaucoup pour ces réponses et les liens.

J'ai plus qu'a bosser tout cela

Pour l'ordre dans le fichier css je ne pense pas avoir modifié la syntaxe. Mais bon il faut que j'arrange tout cela.


Merci encore.