Bonjour,
Bon, pour le peu qui me connaissent, je suis un développeur web professionnel mais tablator.
Histoire de renforcer ce professionalisme, étant sur un nouveau projet (qui ne me rapportera rien, je précise pour les déontologues), j'ai commencé ce nouveau projet entièrement en CSS et XHTML trans Compliant.
Bon, ça c'était pour la partie 3615 MyLife, c'était juste pour que les programmeurs du topic Blabla puissent se féliciter que leur bourrage de crane est lourd mais rempli son office. Comme ça, ils pourront se féliciter d'avoir rempli leur mission sur au moins une personne. Une ovation pour ses pauvres programmeurs qui manquent clairement d'affection et de reconnaissance (si y'a des blondes dans le coin, allez faire un tour dans le topic Blabla, ça leur fera plaisir).
 
Bref, les CSS, c'est bien il parait, c'est super, mais bon, premier projet intégralement en CSS, je fais comme tous les débutants en CSS, je vais choper un gabarit sur Alsacréations.
Jusque là, tout va bien, Alsa présente un gabarit quelquesoit notre vision du projet final, c'est réjouissant, je chope un gabarit, sauf que, une journée et déjà un hic.
Voilà, un exemple vaut mieux qu'un long discours, j'ai modifié mon projet pour faire un gabarit standard et virer toute trace d'un quelquonque rapport avec le vrai site pour ne pas être accuser de pub.
 
Voilà, si vous pouviez me dire comment fair en sorte que si le contenu est tout petit, le pied reste bien à sa place... ...en pied.
 
http://orolam.online.fr/testcss/
 
 

Edit => Bien sûr, je cherche une solution compatible au minimum avec FireFox et IE, autrement, en se contentant de FireFox, je saurais m'en sortir.

tu ouvre 5 tags <div> et en referme 6.    
en fait tu referme celui de l'id conteneur en plein milieu du code puis tout en bas (2 fois). essaye de virer celui qui sert a rien au milieu et laisse celui en bas, comme ça ça nikera pas ton menu aussi en même temps.

Non, il y a autant d'ouverture de div que de fermeture, d'ailleurs, le site ne passerait surement pas au W3C autrement.
si je sépare le pied du conteneur global, il se retrouve en tête en haut.

 
ké méme.  
 
edit:
essaye
 

 
pour essayer...

T'as oublié de numéro un div sur ton screenshot.    
 
J'essaye ton test.
Et merci d'avance, même si ça ne fonctionne pas, tu y auras au moins réfléchi.

http://orolam.online.fr/testcss/index2.php

ah ché pas compter
je vais voir en local ton truc...

Je te remercie.
Autrement, il y a la solution de faire en sorte d'avoir toujours un contenu, mais bon, quand le contenu est juste une phrase type genre : "Vous êtes correctement identifié", ça m'oblige à mettre des gros paddings moches, surtout que le menu aura surement par la suite bien plus que 4 entrées.

mwouè je lache l'affaire il trop mal foutu ton code.
il faudrait que je le reprenne à zero et là... j'ai pas envie.
 
essaye de revoir le CSS parce que c'est la cata hein... des ABSOLUTE par ci par là, des trucs qui n'ont rien a faire ci et là. documente toi egalement sur FLOAT ça pourrais s'averer utile.
 
bon courage  

C'est un truc que j'ai chopé sur Alsacréations, spa d'ma faute si c'est de la daube.
Cela dit, il peut y avoir des codes qui ne servent surement à rien, c'est parce que j'ai purger par rapport au design du site que je ne voulais pas montrer.

Bon, alors, tout d'abord, avant de pleurer sur les CSS-c-est-trop-dur, et tout le toutim, vaudrait mieux commencer par lire ce que disent les spécifications.
 
Quand tu utilises du XHTML Transitional, les moteurs de rendu passent pour la plupart en mode de rendu approximatif, car justement, ce format est hybride et entre en conflit avec les deux véritables spécifications que sont XHTML strict et HTML 4.01 strict. Tu auras donc vraisemblablement des abérations dues à ce choix de DTD.
 
Maintenant, ton problème me semble vraiment trivial, je vais regarder ça de suite.

Je ne pleure pas, je constate, je ne dis pas que les CSS sont trop dures, juste que les tables sont plus simples mais que j'aimerais bien faire, donc, je fais un effort. Spa de ma faute si j'ai commencé le développement Web à une époque où les DIV n'existait pas, comme quoi le développement Web est un domaine où l'expérience n'est pas forcément une bonne chose.
 

Le XTHML strict est trop strict à mon gout et à moins d'être un codeur hors pair, de faire une impasse sur le design et d'accepter de multiplier par 3 le temps de développement, j'en reste au transitionnal.
 

Je t'en remercie.

moyennement vrai, mais ici je suis pas sûr que les browsers apprécient le //FR, donc j'ai idée qu'ils sont tous en quirk

Je code toujours en strict, je ne vois pas ce qu'il a de "trop strict", il interdit simplement les balises et attributs à la con

Bonne remarque, je me posais la question.
C'est pas le bon topic, mais en fait, j'ai un site sur les cockers anglais pour ma femme, fait avec plein de table, mais XHTML compliant, etc. Je suis super bien référencé sur Google International, mais très loin sur Google France alors que mes métas ont l'air correctes.
du coup, j'ai changer le //EN en //FR.
Si cela résoud un problème, je ne vois pas d'inconvénient à repasser en //EN.

Benn la déclaration de doctype c'est //EN, j'ai jamais vu nulle part qu'on pouvait jouer avec

Moi non plus, mais ça semble logique et ça n'empêche pas le W3C Validator de valider mes pages, je pensais donc être dans le bon.

 
Pour que le pied reste bien à sa place et sans utiliser de hacks CSS, la seule méthode est d'utiliser une table.
 
Sache en outre qu'un site ne devrait JAMAIS avoir une hauteur de 100%. Cela ne signifie strictement rien. Un site web n'a pas de hauteur. La hauteur dépend toujours du contenu. Il peut à la rigueur avoir une largeur par contre.
C'est pour cela que si ton idée est d'avoir une page de 100% de haut, c'est déjà contraire à l'esprit du web. Cela ne se justifie que dans le cas où tu as une demande particulière d'un client.  
 
Sache enfin que se passer COMPLETEMENT des tables n'est pas forcément toujours la meilleure solution. On s'en passe quand on peut s'en passer et quand la solution de remplacement ne devient pas plus lourde que la précédente solution ou qu'on est sûr qu'elle n'entrainera pas de bug sur tel ou tel navigateur.
 
Dans ton cas, il est possible de faire mumuse avec un div global de 100% de haut avec un html,body également de 100% de haut, mais de toutes manières, il faudra ruser avec une position en absolute et un padding-bottom dans ton div global pour empêcher le contenu d'écraser le pied. En clair, cette solution est du grand bricolage et du grand n'importe quoi à tous points de vue.
 
La meilleure solution reste donc une table UNIQUE qui décrit le haut, le menu de gauche, la partie contenu et le pied.
 
Quand on veut faire un site FULL CSS SANS TABLE, on doit également abandonner les modèles de sites qui sont contre les principes élémentaires du web.

Je quote pour la postérité.
 

N'importe quoi, si esthétiquement un site est plus jolie en occupant la totalité de la hauteur, pourquoi s'en priver ? Dans le cas bien sûr où le contenu n'impose pas d'être supérieur à la hauteur maximum du navigateur.
 

Mon problème n'a rien à voir avec la possibilité d'avoir une hauteur de 100%, tout ce que je veux, c'est que si mon contenu est ridicule (en taille), je veux juste que mon pied reste à sa place, en pied du site, au moins sous le menu, pas en pied de la fenêtre du navigateur.
 

L'utilisation dans mon cas de table serait la solution de facilité, mais sémantiquement, l'utilisation des tables serait contraire à mon désidératat de faire un effort et de prouver que les CSS me permettent la même liberté que les tables.
 

C'est pas de ma faute, je suis infographiste maquettiste PAO, ce que je demande ressemble à un design tout ce qu'il y a de plus simple, je fais des choses bien plus complexe sur papier, un entête, une partie à gauche contenant une section login et une section menu, un contenu, un pied de page, ça fait 2 ans qu'on me dit d'abandonner les tables que les CSS c'est mieux, si sur un principe aussi élementaire que ça, les CSS ne s'en sortent pas, il va falloir arrêter la propagande "sémantique".
 

Bon bah je vais finir comme ça, je regrette, je voulais faire un effort.
 

Sans commentaires.

Voila, testé sur IE6, Firefox 1.0.3 et Opera 8, ton pied le résultat est identique excepté l'écart entre le formulaire et le menu qui est bouffé par IE.
Le tout est en HTML 4.01 strict parce que tu n'as pas besoin de plus, et surtout, IE n'aimerait vraiment pas se bouffer du véritable XHTML strict

 
Heu oui mais non ou alors j'ai mal compris : Il veut que le pied soit en bas de la page je pense.
 
EDIT : j'avais effectivement mal compris.

 
Ben non. ça n'a pas de sens, plus joli ou pas. Tu ne peux pas demander une hauteur de 100% avec un contenu inconnu à l'avance.
 
Les solutions à base de table reposent sur un bug en réalité, car si le contenu dépasse, il pousse la hauteur de la table qui n'est plus de 100%.  
 

 
Ok, j'avais mal compris ce que tu voulais.
 
 

 
En effet c'est certain.
 

 
Sisi c'est bon, je pensais que tu voulais un pied en bas de la page.
 
 

BTW on peut "faker" un plein écran de ce type en mettant le pied en absolute bottom 0  
avec un overflow sur le contenu et des tailles en pourcentage ça passe  
 
enfin 99% du temps IE merdouille, mais on fait avec

Non non, ça me plairait bien, mais j'ai fait des recherches, c'est trop compliqué tant qu'IE6 dominera le marché.
Tout ce que je veux, c'est que mon pied ne passe pas sous mon menu quand le contenu est trop petit.
 
Gizmo => ça a l'air de fonctionner, peux-tu me résumer tes modifications ? (sinon, je vais faire ligne par ligne, mais vu que tu l'as corriger, ça irai surement plus vite pour toi de me dire ce qui n'allait pas. )
P.S.: Même si tu ne le fais pas, je te remercie d'avance.

 
Tu confonds pied de document et bas de fenêtre. Un bas de document est relatif à sa longueur, et ne pose donc pas de problème. Ensuite, pour ce qui est de hack pour le bas de fenêtre, il ne faut en utiliser que pour contourner des bugs de IE, tout comme ou doit en utiliser si on veut obtenir le même résultat avec des tables.
 

 
Une largeur de 100% par rapport à la fenêtre ne signifie pas plus qu'une hauteur de 100%. Ce sont juste nos conventions/habitudes de lecture qui font que nous contraignons cettre première.
 

 
On utilise des données tables quand on a des données tabulaires à montrer. Il est plus rare d'avoir une solution avec table qui ne soit pas plus pénible pour les agents vocaux que le contraire (par exemple).
 

 
Spéculations. Les spécifications actuellent ne précisent pas ce qu'un agent doit considéré comme "fenêtre" d'affichage. Cela peut varier d'un agent à l'autre, que ce soit le tag html, le tag body, ou le widget de la fenêtre. Tu seras donc totalement dépendant des navigateurs visuels et des leurs multiples implémentations.
 

 
La meilleur solution est d'adpoter un design fluide a dégradation graduelle pour offrir à chacun un environnement le plus adapté possible.
 

 
Pas spécialement. Il faut juste penser autrement.

Rapidement:
Utilisation d'un float pour la parti gauche, gros nettoyage du redondant et inutilisé, utilisation d'un DTD 4.01 strict (comme ça tout le monde passe en strict), un clear pour le pied de document.

Bon, maintenant, reste à intégrer le design à mon vrai site, je vous tiens au courant.
 
Par contre, pour ma culture perso (je suis venu sur ce forum justement pour me cultiver, sérieusement), quelle différence y a-t-il à utiliser un DTD 4 Strict et un DTD XHTML trans dans le cas présent ?
(Je demande, parce que là, j'avais repris une partie du design, mais du coup, je dois modifier tous mes includes pour les passer en HTML4. )

le HTML est issu du SGML, une sorte de gros monstre ultra-complexe mais puissant dont Mr Tim Berner-Lee a créé un subset pour publication de document scientifiques (à l'origine). Le XHTML est issu du XML et reprend quasiment la syntaxe du HTML, en l'épurant au maximum. Le problème, c'est que le XHTML casse en partie la compatibilité avec le SGML (notament pour les tag comme <br /> ). Du coup, si tu veux vraiment faire du XHTML, ton serveur doit envoyer un code MIME différent au browser, pour que celui-ci soit sûr qu'il a bien du XML (qui est nettement plus facil à lire), et puisse utiliser un moteur "optimisé".
Problème, IE ne reconnait pas ce type MIME et propose donc de télécharger la page, plutôt que de la voir (ce qui est assez gènant ). Du coup, tout le monde est obligé de créer des routines de détection, en espérant que le document corresponde bient à ce que le DTD indique.

C'est très suggestif ce que tu dis là. Moi j'aurais tendance à penser l'inverse : à la base, un site web n'est pas une présentation Powerpoint.

En théorie si, avec min-height: 100%;

Ce n'est pas un bug, c'est le comportement normal des éléments qui ont la propriété table-cell (ce qui revient à appliquer un min-height en fait)

En fait le //EN représente la langue dans laquelle a été rédigée la DTD

Non. La seule méthode c'est en CSS, et en oubliant IE

A l'inverse, j'aurais tendance à penser qu'un site Web doit être jolie et plaire à son concepteur graphique et agréable à l'oeil du visiteur, autrement, il suffisait d'attendre le haut débit sur Minitel et s'en contenter.

C'est là où les CSS peuvent t'aider, mais c'est aussi là où IE peut t'enculer

Je ne vois pas pourquoi tu fais un lien entre "joli" et "qui doit occuper la totalité de la fenêtre"
 
On peut faire des sites riches graphiquement et défilants.

Oui mais comme c'est également la seule...
 
 

Et ouais
 
De toute manière, il est bien stipulé dans la DTD :

Donc on n'y touche pas

On peut se créer une custom DTD aussi
 
C'est super s3x comme technique

Déjà fait une fois, pour inclure de l'xhtml dans quelque chose d'autre. Ca pouvait bien marcher. Si l'extensions DOM XML de php4 arrêtais de planter dès le premier &nbsp; rencontré

Parce que c'est une des bases de la communication graphique.
Tu vois souvent des publicité imprimées en 6cmx4cm au milieu d'une page A4 dans un magazine parce que la pub a été prévu pour une demi page format poche à la base ?
Non, bah le web c'est pareil.
De plus, l'important dans une création graphique est avant tout de répondre au désidérata de celui qui la conçoit. Le web est un outil graphiques de transmission de l'information, comme tout outil graphique, il doit être pensé graphiquement.

C'est l'erreur que tous les web-designers mauvais font
 
Le web n'est absolument pas un outil graphique C'est un simple moyen de diffuser de l'information