[Débutant en CSS] - affichage du menu impossible avec doctype.

Bonjour,

Au départ je suis codeur en C++, donc PHP ne me pose pas de problème.

La ou je sèche, c'est pour faire coller un doctype à ce que je voudrais faire.

Il y à 5 ans (date ou j'ai programmer mon dernier site) on attachait pas autant d'importance au doctype, donc j'ai commencer ma page sans en mettre, en me disant, si je le met plus tard, ça fera rien.

Au moment ou je me dis, je vais choisir le doctype approprié (xHtml transitionnal dans mon cas), rien y fait, mon menu de gauche disparait.

Je ne sais pas si xHtml est un bon choix, je ne sais pas non plus quoi choisir qui correspondrait mieux à ce que je veux faire (application de gestion intranet).

ici je vous met le liens de la page avec et sans doctype que vous puissiez voir et m'aider à avoir mon foutu menu à gauche :

sans doctype : http://bindcraft.dyndns.info/index2.php
avec doctype : http://bindcraft.dyndns.info/

ps : la page s'affiche comme je le souhaite sur firefox, et google chrome, sous internet explorer le CSS 3 n'est pas pris en charge (je crois), ce qui fait que je n'ai pas l'effet sur la barre du haut (ce qui n'est pas gênant en soit), je n'ai pas essayé sur autre chose.

Merci à tout ceux qui prendrons la peine de répondre à mon soucis.

mtxrider

a écrit :
Il y à 5 ans (date ou j'ai programmer mon dernier site) on attachait pas autant d'importance au doctype, donc j'ai commencer ma page sans en mettre, en me disant, si je le met plus tard, ça fera rien.

Bin si, selon que le doctype est présent/absent ou correct/incorrect, cela modifie l'interprétation des dimensions des éléments par le navigateur.

Avec un doctype correct, les dimensions des éléments sont calculés comme suit (le problème concerne surtout la largeur des éléments) :

largeur totale d'un élément = width + padding-right et left + border-width

Un élément ayant un width: 100px, des padding-right et -left de 20px et un border de 2px aura une largeur de 100px + (2 x 20px) + (2 x 2px) = 144px.

Ainsi, dans IE, sans doctype ou avec un doctype incorrect, la largeur totale égale le width, duquel sont soustaits les padding-right et -left et les border-width.

L'élément précité aura alors une largeur totale de 100px et des padding-right et left et des border-width inclus dans ces 100px et aura donc une zone de contenu de 100px - (2 x 20px) - (2 x 2px) = 56px.

Ce deuxième mode d'interprétation des dimensions s'appelle le mode quirks ou mode natif, et il peut différer d'un navigateur à l'autre. Seul un doctype correct, quel qu'il soit, permet un rendu uniforme des dimensions dans tous les navigateurs

Tu dois refaire ta CSS avec une page avec un doctype.

De plus, en CSS, tu ne peux pas spécifier de dimensions sans unités, sauf avec la valeur zéro.

Bonne continuation.

Je ne demande pas mieux qu'avoir un doctype, mais, lequel choisir qui gère CSS 3 et HTML 4, ou 5 au mieux ?

Et en dehors de ça, comment faire pour afficher le menu de gauche en gardant la place pour le contenu, le tout avec le doctype ?

J'ai beau essayé toute les combinaisons en CSS, rien y fait.

Je reconnais sans problème mon faible niveau en CSS, le dernier site que j'ai programmer était fait en tableau, pour dire que ça change radicalement.

Pour ton menu, la div est vide donc il ne l'affiche pas, si tu mets un texte, tu verras un bout de ton image de fond.

Ensuite n'oublie pas de mettre les unités dans ton CSS => width:270px
Reste le problème de la hauteur, il n'a pas l'air de prendre le 100%, par contre quand tu lui mets un height:800px, ça fonctionne. A toi de faire des tests dans ton CSS pour que ça colle avec ce que tu veux.

ok ok,

je vais mettre en place le width déjà.

Par contre, comment faire pour que le menu aille jusqu'en bas quelque soit la résolution, y a-til une solution, même en JS au pire je sais pas, si quelqu'un à une idée.

En le mettant en position absolute, ça fonctionne.

edit : pense à mettre des unités sur toutes tes mesures... le padding-top de ton menu n'est toujours pas pris en compte.
Modifié par MattBPA (20 Sep 2012 - 23:34)

Merci à tous, ce forum est d'enfer, et les participant aussi !

J'ai un doctype donc je ne peu normalement plus me tromper, et j'ai mis les mesures partout, dans l'instant ça fonctionne et réponds à mes attentes pour ce que je vais en faire par la suite, un grand merci, je reviendrais peut être vers vous pour d'autres soucis futur.

Bon courage