Problème de pied en CSS.

Problème de pied en CSS. - HTML/CSS - Programmation

Marsh Posté le 28-04-2005 à 18:09:58    

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/
 
 

Reply

Marsh Posté le 28-04-2005 à 18:09:58   

Reply

Marsh Posté le 28-04-2005 à 18:12:08    

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. ;)

Reply

Marsh Posté le 28-04-2005 à 18:31:00    

tu ouvre 5 tags <div> et en referme 6.  :D  
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.

Reply

Marsh Posté le 28-04-2005 à 18:35:38    

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. :/

Reply

Marsh Posté le 28-04-2005 à 18:43:05    

http://img220.echo.cx/img220/6681/image40pw.th.gif
 
ké méme.  [:airforceone]
 
edit:
essaye
 

Code :
  1. <html><head>
  2. <link rel="icon" href="http://192.168.0.1/gloriette/coagim/favicon.ico" type="image/x-icon">
  3. <link href="style.css" rel="stylesheet" type="text/css"></head>
  4. <body>
  5. <div id="conteneur">
  6. <div id="header">Ceci est le titre...
  7. </div>
  8. <div id="gauche">
  9. <form action="login.php" method="post"><div id="logdiv">IDENTIFICATION&nbsp;:<br>
  10.     <input name="login" value="" size="15" maxlength="15" type="text"><br>
  11.     <input name="mdp" value="" size="15" maxlength="15" type="password"><br>
  12.     <input name="loginbtn" value="Login" type="submit"><br>
  13. <a href="">S'enregistrer</a>
  14. <ul class="menugauche">
  15. <li><a href="">Accueil</a></li>
  16. <li><a href="">Menu 2</a></li>
  17. <li><a href="">Menu 3</a></li>
  18. <li><a href="">Menu 4</a></li>
  19. </ul>
  20.   
  21. </form>
  22. </div>
  23.    <div id="centre">
  24.  Ceci est le contenu...
  25.    </div>  
  26. <div id="pied">
  27.   Ceci est le pied
  28. </div>
  29. </div>
  30. </body></html>


 
pour essayer...


Message édité par pmusa le 28-04-2005 à 18:46:12
Reply

Marsh Posté le 28-04-2005 à 18:48:25    


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

Reply

Marsh Posté le 28-04-2005 à 18:51:20    

Reply

Marsh Posté le 28-04-2005 à 18:51:54    

ah ché pas compter http://www.designlaboratory.net/smileyyyy/ahah.gif
je vais voir en local ton truc... http://www.designlaboratory.net/smileyyyy/slurpt.gif

Reply

Marsh Posté le 28-04-2005 à 18:58:23    

Je te remercie. :jap:
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.

Reply

Marsh Posté le 28-04-2005 à 19:47:43    

mwouè je lache l'affaire il trop mal foutu ton code. http://www.designlaboratory.net/smileyyyy/ebeh.gif
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  :jap:

Reply

Marsh Posté le 28-04-2005 à 19:47:43   

Reply

Marsh Posté le 28-04-2005 à 19:52:13    

pmusa a écrit :

mwouè je lache l'affaire il trop mal foutu ton code. http://www.designlaboratory.net/smileyyyy/ebeh.gif
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  :jap:


C'est un truc que j'ai chopé sur Alsacréations, spa d'ma faute si c'est de la daube. :D
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. ;)

Reply

Marsh Posté le 28-04-2005 à 20:23:07    

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.

Reply

Marsh Posté le 28-04-2005 à 20:27:41    

gizmo a écrit :

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.


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.
 

gizmo a écrit :

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.


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.
 

gizmo a écrit :

Maintenant, ton problème me semble vraiment trivial, je vais regarder ça de suite.


Je t'en remercie. :jap:


Message édité par The-Shadow le 28-04-2005 à 20:28:06
Reply

Marsh Posté le 28-04-2005 à 20:30:53    

gizmo a écrit :


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.


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 :o

The-Shadow a écrit :

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 code toujours en strict, je ne vois pas ce qu'il a de "trop strict", il interdit simplement les balises et attributs à la con [:spamafote]


Message édité par masklinn le 28-04-2005 à 20:32:15

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 28-04-2005 à 20:36:29    

masklinn a écrit :

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 :o


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.

Reply

Marsh Posté le 28-04-2005 à 20:37:12    

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


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 28-04-2005 à 20:52:20    

masklinn a écrit :

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


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.

Reply

Marsh Posté le 28-04-2005 à 21:09:37    

The-Shadow a écrit :


 
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/


 
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.


---------------
Expert en expertises
Reply

Marsh Posté le 28-04-2005 à 21:20:11    

Hermes le Messager a écrit :

Pour que le pied reste bien à sa place et sans utiliser de hacks CSS, la seule méthode est d'utiliser une table.


Je quote pour la postérité.
 

Hermes le Messager a écrit :

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.


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.
 

Hermes le Messager a écrit :

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.


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.
 

Hermes le Messager a écrit :

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.


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.
 

Hermes le Messager a écrit :

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.


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".
 

Hermes le Messager a écrit :

La meilleure solution reste donc une table UNIQUE qui décrit le haut, le menu de gauche, la partie contenu et le pied.


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

Hermes le Messager a écrit :

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.


Sans commentaires.


Message édité par The-Shadow le 28-04-2005 à 21:21:36
Reply

Marsh Posté le 28-04-2005 à 21:20:34    

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Page X</title>
  5. <style type="text/css">
  6. body {
  7.   font-family: Verdana, Arial, Helvetica, sans-serif;
  8.   font-size: 0.8em;
  9.   margin: 0;
  10.   padding: 0;
  11. }
  12. a:link {
  13.   color:#00F;
  14.   text-decoration:underline;
  15. }
  16. a:hover, a:focus {
  17.   color:#F00;
  18.   text-decoration:none;
  19. }
  20. a:visited {
  21.   color:#00F;
  22.   text-decoration:none;
  23. }
  24. form {
  25.   margin: 0;
  26.   padding: 0;
  27. }
  28. input {
  29.   font-size:11px;
  30.   font-family:"Courier New", Courier, mono;
  31. }
  32. #conteneur {
  33.   border: 2px solid black;
  34.   margin: 5px auto 0 auto;
  35.   width: 750px;
  36.   background: #fef8c9;
  37. }
  38. #header {
  39.   height: 124px;
  40.   background:#999;
  41. }
  42. #left {
  43.   float: left;
  44.   width: 120px;
  45. }
  46. #leftMenu {
  47.   list-style-type: none;
  48.   margin: 0;
  49.   padding:0;
  50. }
  51. #log {
  52.   text-align:center;
  53.   font-size:10px;
  54.   background-color:#AAA;
  55.   color:#FFF;
  56.   padding:2px 0;
  57.   margin-bottom:2px;
  58. }
  59. #leftMenu li {
  60.   font-size:12px;
  61. }
  62. #leftMenu a {
  63.   background-color:#CCC;
  64.   padding:4px 0 0 15px;
  65.   color: #000;
  66.   text-decoration: none;
  67.   display:block;
  68.   height:22px;
  69. }
  70. #leftMenu a:hover, #leftMenu a:active, #leftMenu a:focus {
  71.   background-color:#F00;
  72.   padding-left:10px;
  73. }
  74. #center {
  75.   margin-left: 130px;
  76. }
  77. #footer {
  78.   font-size:10px;
  79.   text-align:center;
  80.   padding-top:8px;
  81.   height:44px;
  82.   clear:both;
  83.   background-color:#0F0;
  84. }
  85. </style>
  86. </head>
  87. <body>
  88. <div id="conteneur">
  89.   <div id="header">
  90.     Ceci est le titre...
  91.   </div>
  92.   <div id="left">
  93.     <form action="" method="post">
  94.       <div id="log">
  95.         IDENTIFICATION&nbsp;:<br>
  96.         <input name="login" value="" size="15" maxlength="15" type="text"><br>
  97.         <input name="mdp" value="" size="15" maxlength="15" type="password"><br>
  98.         <input name="loginbtn" value="Login" type="submit"><br>
  99.         <a href="">S'enregistrer</a>
  100.       </div>
  101.     </form>
  102.     <ul id="leftMenu">
  103.       <li><a href="">Accueil</a></li>
  104.       <li><a href="">Menu 2</a></li>
  105.       <li><a href="">Menu 3</a></li>
  106.       <li><a href="">Menu 4</a></li>
  107.     </ul>
  108.   </div>
  109.   <div id="center">
  110.     Ceci est le contenu...
  111.   </div>
  112.   <div id="footer">
  113.     Ceci est le pied
  114.   </div>
  115. </div>
  116. </body>
  117. </html>


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 :D

Reply

Marsh Posté le 28-04-2005 à 21:26:57    

gizmo a écrit :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Page X</title>
  5. <style type="text/css">
  6. body {
  7.   font-family: Verdana, Arial, Helvetica, sans-serif;
  8.   font-size: 0.8em;
  9.   margin: 0;
  10.   padding: 0;
  11. }
  12. a:link {
  13.   color:#00F;
  14.   text-decoration:underline;
  15. }
  16. a:hover, a:focus {
  17.   color:#F00;
  18.   text-decoration:none;
  19. }
  20. a:visited {
  21.   color:#00F;
  22.   text-decoration:none;
  23. }
  24. form {
  25.   margin: 0;
  26.   padding: 0;
  27. }
  28. input {
  29.   font-size:11px;
  30.   font-family:"Courier New", Courier, mono;
  31. }
  32. #conteneur {
  33.   border: 2px solid black;
  34.   margin: 5px auto 0 auto;
  35.   width: 750px;
  36.   background: #fef8c9;
  37. }
  38. #header {
  39.   height: 124px;
  40.   background:#999;
  41. }
  42. #left {
  43.   float: left;
  44.   width: 120px;
  45. }
  46. #leftMenu {
  47.   list-style-type: none;
  48.   margin: 0;
  49.   padding:0;
  50. }
  51. #log {
  52.   text-align:center;
  53.   font-size:10px;
  54.   background-color:#AAA;
  55.   color:#FFF;
  56.   padding:2px 0;
  57.   margin-bottom:2px;
  58. }
  59. #leftMenu li {
  60.   font-size:12px;
  61. }
  62. #leftMenu a {
  63.   background-color:#CCC;
  64.   padding:4px 0 0 15px;
  65.   color: #000;
  66.   text-decoration: none;
  67.   display:block;
  68.   height:22px;
  69. }
  70. #leftMenu a:hover, #leftMenu a:active, #leftMenu a:focus {
  71.   background-color:#F00;
  72.   padding-left:10px;
  73. }
  74. #center {
  75.   margin-left: 130px;
  76. }
  77. #footer {
  78.   font-size:10px;
  79.   text-align:center;
  80.   padding-top:8px;
  81.   height:44px;
  82.   clear:both;
  83.   background-color:#0F0;
  84. }
  85. </style>
  86. </head>
  87. <body>
  88. <div id="conteneur">
  89.   <div id="header">
  90.     Ceci est le titre...
  91.   </div>
  92.   <div id="left">
  93.     <form action="" method="post">
  94.       <div id="log">
  95.         IDENTIFICATION&nbsp;:<br>
  96.         <input name="login" value="" size="15" maxlength="15" type="text"><br>
  97.         <input name="mdp" value="" size="15" maxlength="15" type="password"><br>
  98.         <input name="loginbtn" value="Login" type="submit"><br>
  99.         <a href="">S'enregistrer</a>
  100.       </div>
  101.     </form>
  102.     <ul id="leftMenu">
  103.       <li><a href="">Accueil</a></li>
  104.       <li><a href="">Menu 2</a></li>
  105.       <li><a href="">Menu 3</a></li>
  106.       <li><a href="">Menu 4</a></li>
  107.     </ul>
  108.   </div>
  109.   <div id="center">
  110.     Ceci est le contenu...
  111.   </div>
  112.   <div id="footer">
  113.     Ceci est le pied
  114.   </div>
  115. </div>
  116. </body>
  117. </html>


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 :D


 
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. ;)


Message édité par Hermes le Messager le 28-04-2005 à 21:31:05

---------------
Expert en expertises
Reply

Marsh Posté le 28-04-2005 à 21:30:27    

The-Shadow a écrit :

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.


 
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. [:spamafote]
 
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%.  
 

Citation :


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.


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

Citation :

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.


 
En effet c'est certain.
 

Citation :

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".


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


---------------
Expert en expertises
Reply

Marsh Posté le 28-04-2005 à 21:30:29    

Hermes le Messager a écrit :

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


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


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 28-04-2005 à 21:31:01    

Hermes le Messager a écrit :

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


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. :jap:


Message édité par The-Shadow le 28-04-2005 à 21:32:24
Reply

Marsh Posté le 28-04-2005 à 21:32:08    

Hermes le Messager a écrit :

Pour que le pied reste bien à sa place et sans utiliser de hacks CSS, la seule méthode est d'utiliser une table.


 
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.
 

Citation :


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.  


 
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.
 

Citation :


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.


 
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).
 

Citation :


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.


 
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.
 

Citation :


La meilleure solution reste donc une table UNIQUE qui décrit le haut, le menu de gauche, la partie contenu et le pied.


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

Citation :


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.


 
Pas spécialement. Il faut juste penser autrement.

Reply

Marsh Posté le 28-04-2005 à 21:35:04    

The-Shadow a écrit :


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. :jap:


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.

Reply

Marsh Posté le 28-04-2005 à 21:38:49    

Bon, maintenant, reste à intégrer le design à mon vrai site, je vous tiens au courant. :D
 
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. :D )

Reply

Marsh Posté le 28-04-2005 à 21:44:36    

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 :D ). 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.

Reply

Marsh Posté le 28-04-2005 à 22:30:39    

The-Shadow a écrit :

N'importe quoi, si esthétiquement un site est plus jolie en occupant la totalité de la hauteur, pourquoi s'en priver ?


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.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 28-04-2005 à 22:32:27    

Hermes le Messager a écrit :

Tu ne peux pas demander une hauteur de 100% avec un contenu inconnu à l'avance. [:spamafote]


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

Hermes le Messager a écrit :

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%.


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)


Message édité par gm_superstar le 28-04-2005 à 22:33:40

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 28-04-2005 à 22:58:13    

masklinn a écrit :

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


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

Hermes le Messager a écrit :

Pour que le pied reste bien à sa place et sans utiliser de hacks CSS, la seule méthode est d'utiliser une table.


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

Reply

Marsh Posté le 28-04-2005 à 23:01:01    

gm_superstar a écrit :

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.


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.

Reply

Marsh Posté le 28-04-2005 à 23:02:49    

The-Shadow a écrit :

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 :D

Reply

Marsh Posté le 28-04-2005 à 23:05:16    

The-Shadow a écrit :

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.


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.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 28-04-2005 à 23:18:42    

FlorentG a écrit :

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


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


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 28-04-2005 à 23:19:41    

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

Citation :

  This DTD module is identified by the PUBLIC and SYSTEM identifiers:
 
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"


Donc on n'y touche pas :o

Reply

Marsh Posté le 28-04-2005 à 23:21:02    

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


Message édité par masklinn le 28-04-2005 à 23:21:16

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 28-04-2005 à 23:23:04    

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é :/

Reply

Marsh Posté le 28-04-2005 à 23:37:41    

gm_superstar a écrit :

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.


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.

Reply

Marsh Posté le 28-04-2005 à 23:39:43    

The-Shadow a écrit :

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 :D
 
Le web n'est absolument pas un outil graphique ;) C'est un simple moyen de diffuser de l'information :)

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed