Probleme positionnement avec FireFox

Bonjour,

Je fais quelques essais pour me mettre au CSS, mais je suis confronté à un probleme. Pour le moment ma page marche sur IE, mais il y a un probleme de decalage avec FF.

http://img511.imageshack.us/img511/3140/compardz9.jpg

<style>
body { background-color:#deebd6; text-align:center; background-image:url(images/fond.png); background-repeat:repeat-x}

.conteneur { display:inline-table; width:896px; height:300px; background-color:#FFFFFF; text-align:center;}

.header { width:901px;}

.menu a, .menu a:visited {display:table-cell; background-image:url(images/font_menu1.png); width:224px; height:38px; padding:7px; text-decoration:none; font-family:Georgia, "Times New Roman", Times, serif; color: #818181;}

.menu a:hover { color:#000000; border-bottom:6px #FFFFFF solid; background-image:url(images/font_menu3.png);}

#contenue { border:  1px dashed; width:100%; height:100%; margin:20px;}


</style>

<title>Sample .fr : Essais de site Internet</title>

<div align="center">
<div class="header"><img src="images/header.png" width="896" height="92"></div>
<div class="conteneur">
<div class="menu"><a href="#">Accueil</a><a href="#">Presentation</a><a href="#">Nos activités</a><a href="#">Nous contacter</a></div>

<div id="contenue"> Essais </div>

</div></div>

Le probleme vient de "contenue". Voila il ne se positionne pas bien ! Merci de votre aide !
Modifié par Aikawa (14 Feb 2009 - 14:08)

Bonjour,

Tu ne donnes pas le code HTML de la page complète, ce qui ne nous aide pas à identifier le problème. D'après ta très brève description et la capture d'écran, je dirais que tu travailles en mode Quirks, ce qui est bien entendu une erreur à corriger de toute urgence.

Je te conseille donc:

1. De te renseigner sur le mode Quirks, l'utilisation correcte d'un Doctype, et le modèle de boite CSS. Il y a plusieurs articles à ce sujet sur Alsacréations.

2. Éventuellement, et si ces lectures ne suffisent pas à t'aider à régler ton problème, nous présenter le code HTML complet de la page, ou directement la page en ligne (de préférence).

Par ailleurs, ce code HTML et CSS me semble un peu bricolé, l'usage des classes et des identifiants m'a l'air plutôt aléatoire (pourquoi une classe "conteneur" et un identifiant "contenue"?). La convention est plutôt d'utiliser des identifiants pour les principaux conteneurs (header, menu, etc.). Ensuite, le code HTML n'est pas commenté pour identifier les différents blocs, ce qui est source d'erreur et n'en facilite pas la lecture. Enfin, le code CSS est difficilement lisible avec toutes les déclarations (couples propriété-valeurs) sur une seule ligne, et pas de commentaires pour introduire les différentes sections.

Bref, ça manque un peu d'organisation.

J'ai donné tout le code a ma page !

C'est vrai que les noms ne sont pas trés explicite , mais les boites sont bien organisé.

Par contre je ne connais pas le mode Quirks, je vais regarder ça.

Pour ce qui concerne l'id, j'ai juste mis ça pour essayer car le "class" ne marchais pas, j'ai remis un "class" depuis ! Mais ce ne marche toujours pas.

merci de ta reponse ! ^^

Edit ; j'ai ajouté un doctype, maintenant, ca bug aussi sur IE, mais je ne vois pas d'ou peut venir le faite que mon block sorte de la zone.
Modifié par Aikawa (14 Feb 2009 - 16:31)

Aikawa a écrit :
J'ai donné tout le code a ma page !

Ok. Alors ce code HTML est faux, il n'a pas de Doctype, pas d'élément HTML, HEAD ou BODY, bref rien du strict nécessaire d'une structure de page HTML. Bouh.

Je te conseille de partir à partir d'un modèle de page XHTML 1.0 Strict généré via l'outil suivant:
http://www.alsacreations.com/page/squelettor/

Et de toujours valider tes pages HTML:
http://validator.w3.org

Aikawa a écrit :
Pour ce qui concerne l'id, j'ai juste mis ça pour essayer car le "class" ne marchais pas, j'ai remis un "class" depuis ! Mais ce ne marche toujours pas.

Houlà... je constate qu'il y a de très grosses lacunes sur les bases de HTML et CSS... il faudrait peut-être commencer par revoir ces bases?

Aikawa a écrit :
Edit ; j'ai ajouté un doctype, maintenant, ca bug aussi sur IE, mais je ne vois pas d'ou peut venir le faite que mon block sorte de la zone.

Modèle de boite CSS. Ton bloc fait 100% de largeur, et tu rajoutes une bordure, des marges sur les côtés, etc. Donc ça dépasse largement. Ne pas utiliser de largeur fixe si ça n'est pas nécessaire!

ok, je vais regarder, merci !