le positionnement

J'utilise depuis longtemps CSS pour la mise en forme de mon texte.

Cela fait longtemps que j'essaye, sans succès, de me mettre à la mise en page en CSS.

Alsacréations étant l'un de mes sites de références, c'est sur ce forum que j'avais fait connaître mon profond découragement, il y a plus d'un an.

Je vous rappelle : je ne suis pas un nul en informatique. J'ai su me former seul sur un grand nombre de techniques. Ajoutons que je n'utilise pas d'outils de design, et que je ne sais même pas comment fonctionne un éditeur Wysiwig. Si je fais des tableaux, c'est à la main, avec mon bon vieux notepad++. Ca marche très bien.

Dans ma précédente intervention, je pointais les nombreuses inconsistances dans la documentation qu'on trouve un peu partout sur internet, y compris sur ce site, par exemple : pour comprendre tel concept, aller voir sur cette page, et quand on y va, le concept ne s'y trouve pas (ou alors peut-être sous un autre nom).

En relisant ce fil, je me dis aussi que je n'ai jamais vu le moindre commencement de méthode pour expliquer comment on passe de la conception d'une page à sa réalisation en CSS (à la différence de la programmation, par exemple : il y a de multiples sites d'initiation à l'algorithmie, puis au passage à l'implémentation).

Alors voilà, je reviens ici pour voir s'il y a du nouveau dans la pédagogie de CSS.

Je commence par le billet de tête (A lire avant de poster).

Le cinquième et dernier conseil :

a écrit :
Si vous pensez avoir des lacunes au niveau des différentes méthodes de positionnement en CSS (relatif, absolu, flottant, flux, etc.)

C'est fait pour moi ! Je vais donc voir la page Openweb conseillée, au titre particulièrement
évocateur : La mise en page.

Premier essai : un tutoriel qui devrait vous prendre moins d'une heure. Là, je ne trouve rien sur la mise en page, à part une belle présentation des tableaux, qui explique :

a écrit :
Longtemps, les tableaux ont été utilisés pour effectuer la mise en page des éléments d'une page Web. Qu'on se le dise, cette période n'est plus.

Dans ce cas, pourquoi les mettre dans une formation rapide à la mise en page ? C'est vraiment du pousse-au-crime. Peut-être est-ce tout simplement qu'il est impossible d'expliquer simplement la mise en page sans les tableaux ?

Alors je passe à un deuxième lien : le positionnement CSS

Au début, je lis des choses que je trouve tout à fait intéressante, mais qui ne me donne aucune méthode. Et puis je redécouvre ceci :

a écrit :
Pour éviter cet effet parfois disgracieux, la solution la plus répandue est le spacer de Mark Newhouse : elle consiste à inclure dans la boîte verte un élément bloc au contenu fictif

Je ne sais pas si vous vous souvenez qu'on nous avait conseillé de mettre du CSS pour y mettre toute la mise en forme, et qu'il n'y ait dans HTML que le contenu.
J'ai donc appris un truc : quand je ferais ma mise en page avec des tableaux, j'appellerai cela du contenu fictif.

Voilà, je remercie les contributeurs CSS pour mes progrès en théorie de CSS. J'ai compris comment fonctionne le moteur, maintenant, il me reste à apprendre à piloter.

Grosso modo, mes tableaux de mise en page, je penserai à m'en passer :
- quand j'aurai trouvé un tutorial qui explique pas à pas comment réaliser une mise en page sans tableau, en partant d'une mise en page en tableau.
- et quand la page d'accueil de google aura mis ces beaux préceptes en pratique.

D'ici là, je considère que ce qui est bon pour google est aussi bon pour moi.

Vous ne croyez pas ?

Archeboc.

PS - si ma provocation ne vous a pas mis en colère contre moi, si vous souhaitez faire ce travail de conversion, et ne savez pas quoi prendre comme base de travail, je vous propose un petit truc simple ici : http://mnibjb.free.fr/test/inscription.inc.html
Une seule difficulté, il faut aligner les champs à gauche, les intitulés à droite. J'ai beau avoir mangé de la doc CSS jusqu'à plus faim, je ne vois toujours pas le début d'un commencement d'idée pour faire cela. Je ne demande même pas une idée simple.
Modifié par archeboc (08 Dec 2007 - 01:50)

Question qui peut paraitre un peut bête : pourquoi utiliser un tableau?

Si l'utilisation d'un tableau est nécessaire, pourquoi placer le libellé et le champ dans deux cellule différente? Les placer dans la même cellule te permet de gérer leur positions plus facilement

Bonjour,

Dis toi qu'un site réalise entièrement en tableau obtiendra un référencement moins rapide que le même bien codé (c'est-à-dire pas de tableaux de mise en page et utilisation pertinente des balises.)

Dis-toi également que ce site à case sera (très) difficilement accessible.

Pour finir, une telle mise en page avec des ca-cases à remplir limite grandement les possibilités de design.

Je passe sur la maintenance d'un site à ca-cases.
Sinon, pompage, openweb, alsacreations te fourniront bien asses de cours et exemples sur ce vaste sujet.

Je vous remercie pour vos contributions, mais je vous rappelle que mes questions principales étaient :
- où sont les how to pour débutants en mise en page ?
- si c'est si facile de faire des mises en page sans tableau, pourquoi quand on cherche ce type de how-to on trouve à la place de la doc sur les tableaux ?
- pourquoi, si les tableaux sont un tel boulet dans la mise en page, la page d'accueil de Google est-elle mise en page avec un tableau ?

Et ma question subsidiaire était :
- comment je fais pour aligner les champs de mes tableaux à gauche, en ajoutant sur leur gauche le libellé des champs.

Archeboc.
Modifié par archeboc (08 Dec 2007 - 16:14)

Salut,

Les "how to" ma foi... un peu partout, sur ce forum, Le site du Zero j'en passe et des meilleurs ... Sinon quelques centaines d'heures devant un clavier aussi ça y fait

Quand il s'agit de données tabulaires, les tableaux ce n'est pas si mal non? Je ne pense pas qu'il y ait ici des d'ayatollahs du css

Pourquoi le background de la page d'accueil de Google est blanche et pas celle de tous les sites du Web?

Pour la question subsidiaire, suis pas sur d'avoir tout compris mais bon, je dois être barbu...

<form method="post" action="inscription.php3" >
	<input type="hidden" name="ok" value="ok">
	<fieldset>
	<div class="item">
		<p class="gauche"> votre adresse électronique : </p>
		<input type="text" name="email" size="18" maxlength="128">
		<p class="centre">(Attention à l'orthographe, une adresse erronée rendra votre inscription inopérante)</p>
	</div>

	<div class="item">
		<p class="gauche">votre login : </p>
		<input type="text" name="insLogin" size="12" maxlength="64">
		<p class="centre">(le nom sous lequel vous allez apparaître dans BeeP)</p>
	</div>	


		</fieldset>

<input type="submit" value="Validation">

</form>

*{padding: 0;
margin: 0;}

.item{
margin: 15px 0 15px 0;
}

form{
width: 600px;
margin: 0 auto;

}
fieldset{
margin-top: 50px;
border: 0;
border-top: 1px solid black;
}

.gauche{
float: left;
width: 50%;
font-size: 1em
}


.centre{
clear: both;
text-align: center;
}

Bonne continuation Inch'allah
Modifié par ghost (08 Dec 2007 - 18:15)

Bonjour,

Je ne sais pas trop si je dois répondre à ce genre de message. Dans certains cas (pas toujours), ça part en discussions stériles, et on s'épuise pour rien.

J'avoue avoir du mal à répondre à ce genre de questions/requêtes/défis. Pour ma part, j'ai appris la mise en page pour le Web directement avec les CSS, et cet apprentissage s'est fait sans heurt et progressivement. Me mettre à la place de quelqu'un qui utilise couramment les tableaux de mise en page n'est pas particulièrement aisé.

Au printemps, j'avais tout de même tenté de présenter une démarche d'intégration d'une maquette en page HTML/CSS. Ce n'est sans doute pas parfait, et ça ne répond pas à ta demande à la fois trop générale et trop spécifique...

Rappelons jusque qu'un tutoriel ou une collection de tutoriels n'est pas un cours. Je ne connais pas de cours CSS complet en ligne. Il y a des cours d'initiation, dont certains sont indiqués sur la page «Comment débuter avec XHTML et les CSS?», mais pas de cours exhaustif et structuré. La raison en est simple: cela demanderait un travail énorme (l'équivalent de la rédaction d'une suite de livres), et les personnes compétentes dans le domaine n'ont pas vraiment la possibilité de passer six à douze mois à plein temps sur ce travail.

Donc, ce dont on dispose se «résume» à:
- les spécifications HTML 4.01 et CSS 2.1 (ben oui, ce sont quand même les documents de référence, et on parle bien d'un sujet technique!);
- des cours d'introduction pour débutants;
- des tutoriels conçus comme des cas pratiques;
- des articles de référence sur des concepts précis;
- des expérimentations et tests divers;
- des discussions sur les forums et mailing lists.

Le tout réparti sur différents sites, blogs, forums, dont les principaux sont relativement bien identifiés (pour les ressources francophones: Openweb, Alsacréations, Pompage.net...).

Le personne qui souhaite se former à partir de tout ça doit être capable de mettre en relation les différents savoirs proposés, et à les structurer. En général, cela se fait avec 1) un minimum de capacité d'abstraction et 2) pas mal de pratique et d'essais.

Bref, rien d'exceptionnel, et un fonctionnement que l'on retrouve dans énormément de domaines du savoir humain.

archeboc a écrit :
Grosso modo, mes tableaux de mise en page, je penserai à m'en passer :
- quand j'aurai trouvé un tutorial qui explique pas à pas comment réaliser une mise en page sans tableau, en partant d'une mise en page en tableau.

Pour dire les choses clairement: personne ne pense utile d'écrire ce tutoriel. À l'inverse, la démarche proposée est la suivante:
- tu pars d'un contenu;
- tu le mets en page avec CSS.

Partir d'une mise en page existante en tableaux est un prise de tête inutile et surtout ce serait une erreur pédagogique monstrueuse.

Je ne peux que te déconseiller une telle démarche (transformer une mise en page en tableaux en mise en page CSS), car les principes de mise en page de la première méthode ne peuvent pas être transcrits dans l'autre méthode. Comme souvent dans les domaines qui évolue, il faut laisser de côté un savoir existant et acquérir de zéro un nouveau savoir. Le recyclage des savoirs existants n'est pas toujours possible.

Je remercie Ghost et Florent V. pour leurs conseils.

Florent V. a écrit :

Le personne qui souhaite se former à partir de tout ça doit être capable de mettre en relation les différents savoirs proposés, et à les structurer. En général, cela se fait avec 1) un minimum de capacité d'abstraction et 2) pas mal de pratique et d'essais.

Bref, rien d'exceptionnel, et un fonctionnement que l'on retrouve dans énormément de domaines du savoir humain.

Je ne pense pas manquer de capacités d'abstraction. Le temps m'est toujours un peu compté, mais j'en ai investi dans CSS, et je vois clairement le bénéfice colossal pour la mise en forme du texte. Pour la mise en page, je ne vois toujours rien venir, et de là vient mon découragement.

Et pourtant, comme dit précédemment, j'ai été capable, en appliquant la recette que tu donnes ici (abstraction et acharnement), de me former à un grand nombre de méthodes informatiques. Pour le positionnement CSS, le résultat reste totalement négatif.

Il y a pourtant un vrai enjeu, car je forme une promo d'ingénieurs chaque année aux techniques du web et pour le moment, la mise en page avec CSS, je leur dit honnêtement que les tests que j'ai pu faire sont des échecs, mais que s'ils arrivent à faire mieux que moi tant mieux pour eux.

Florent V. a écrit :
Je ne peux que te déconseiller une telle démarche (transformer une mise en page en tableaux en mise en page CSS), car les principes de mise en page de la première méthode ne peuvent pas être transcrits dans l'autre méthode.

Evidemment ! Ce que je voulais dire, c'est : prendre un résultat graphique pas trop complexe, facile à obtenir avec des tableaux, et montrer que c'est encore plus facile à obtenir avec de la mise en page CSS.

Florent V. a écrit :

J'avoue avoir du mal à répondre à ce genre de questions/requêtes/défis.

Si ce n'est que toi, ce n'est pas grave. Si cela touche la totalité des experts CSS, c'est plus inquiétant quant à la capacité de CSS à faire plus de choses que les tableaux.

a écrit :
Donc, ce dont on dispose se «résume» à:
[..]
- des tutoriels conçus comme des cas pratiques;
- des articles de référence sur des concepts précis;
- des expérimentations et tests divers;
- des discussions sur les forums et mailing lists.

- La plupart des tutoriels ne sont pas des cas pratiques.
- Lorsqu'ils abordent un cas pratique, ce dernier reste très élémentaire.
- Les articles de référence montre l'application directe d'un procédé, sans son insertion dans le contexte d'une vraie page.
- Les expérimentations traitent plutôt des patchs et des trucs et astuces pour pallier les hétérogénéités des navigateurs. Pas le plus exaltant pour convaincre un client dubitatif.

Mais le plus extraordinaire, c'est que lorsqu'on est guidé par les concepts de "mise en page" et "CSS", on tombe plus facilement sur de la documentation sur les tableaux que sur les blocks, les float et autres clear:both. N'est-ce pas le signe qu'il y a un problème conceptuel ?

Reste les discussions sur les forum. Ben justement, c'est ce que je fais aujourd'hui.

Ghost a proposé une solution avec CSS. Je l'ai un peu retravaillée, et je vous la soumets :
Avec CSS, je n'obtiens pas encore ce que je voudrais obtenir.

Pour le dire avec des mots, je voudrais un formulaire :
- où les champs sont les uns au dessus des autres,
- où ils sont alignés à gauche les uns par rapport aux autres
- où chaque champ est précédé de son intitulé
- cet intitulé étant lui-même aligné à droite
- de tel sorte que les caractères ":" qui séparent les champs de leurs intitulés soient tous dans le même alignement vertical.

Archeboc.

archeboc a écrit :

je forme une promo d'ingénieurs chaque année aux techniques du web et pour le moment, la mise en page avec CSS, je leur dit honnêtement que les tests que j'ai pu faire sont des échecs

Mon dieu… C'est effrayant de lire des choses comme ça.

Re,

Sans relancer une polémique qui me semble stérile, juste une légère modif à la porté de moins grand des amateurs de code.(notamment moi)

.gauche{
float: left;
width: 50%;
font-size: 1em;
text-align: right;
margin-right: 15px;
}

Benjamin D.C. a écrit :

Mon dieu… C'est effrayant de lire des choses comme ça.

Ouaip, désolé pour la faute d'orthographe.

Je ne leur dis pas que cela, évidemment. Je leur dis aussi que comme google fait sa mise en page en tableau, il n'y a pas de raison qu'ils se sentent gênés de faire pareil.

Archeboc.

Bon, j'ai testé la proposition de Ghost, j'y ai remis un peu du mien, et cela commence à ressembler à quelque chose.

Ce n'est pas encore parfait, mais je commence à comprendre.

Je bloque sur le centrage vertical des intitulés, lorsque le champ fait plusieurs lignes (pour les deux dernier champ, dans le bas du formulaire). J'ai testé vertical-align:middle, sans effet.

Le centrage du bouton submit, laissez-le moi, j'ai les biscuits pour le faire tout seul. Le vertical-align, par contre, je ne comprends pas pourquoi il ne fonctionne pas.

En tout cas, cela pourrait bien se terminer sur un petit tutorial.

Archeboc.

PS : un autre truc qu'il me faudra faire, c'est de supprimer tous les margin, pour les remplacer par des padding.
Modifié par archeboc (09 Dec 2007 - 00:33)

Re,

Tu peux tenter de centrer verticalement avec line-height (edit désolé, un pti coup de sommeil)

.gauche{ 
float: left; 
width: 50%; 
line-height: 1em;
font-size: 1em; 
text-align: right; 
margin-right: 15px;
}

.notabene{ 
clear: both; 
text-align: center; 
font-size:.65em;}

input{
line-height: 1em;
}

textarea{
height: 60px;
}

.gauche_textarea{ 
float: left; 
width: 50%; 
line-height: 60px;
font-size: 1em; 
text-align: right; 
margin-right: 15px;
}

Donner les bonnes class dans le code
Modifié par ghost (09 Dec 2007 - 10:16)

archeboc a écrit :
Je leur dis aussi que comme google fait sa mise en page en tableau, il n'y a pas de raison qu'ils se sentent gênés de faire pareil.

Ça fait longtemps que je n'avais pas croisé un argument aussi con que celui-là. C'est vraiment débile...

Prenne une référence du Web pour justifier son incurie (oui, parce que si on enseigne les métiers du Web et qu'on en zappe une technologie essentielle sous prétexte que «moi, j'y arrive pas bien», j'affirme qu'on manque sérieusement de professionnalisme), c'est vraiment une solution de facilité.

Mais tant qu'on est dans les arguments d'autorité, voici la réponse du berger à la bergère:
- la page d'accueil «style classique» de Google, ainsi que les pages de résultats qui vont avec, utilisent peu les CSS;
- la page d'accueil plus récente iGoogle utilise massivement les CSS;
- de même que Google Calendar;
- de même que Google Mail (Gmail);
- de même que Google Analytics.

On notera au passage que des applications comme iGoogle, Google Calendar et Gmail utilisent quelques tableaux de mise en page en supplément du positionnement CSS... bref, une méthode mixte. Google Analytics utilise uniquement le positionnement CSS par contre, de même qu'un balisage HTML sémantique.

Voilà pour un petit panel, en partant de quelques services Google. Mais je maintiens que l'argument de départ est une bêtise (et que de même cette réponse ne doit pas constituer un argument d'autorité).

Franchement, ça ne me gêne pas plus que ça qu'on utilise intelligemment des tableaux pour la mise en page (intelligemment = en ne les multipliant pas à l'excès, et en veillant à la bonne linéarisation du contenu par exemple). Il y a même des cas où c'est tout à fait pertinent, parce qu'on est face à des limites des implémentations de CSS (implémentations de display: table-cell ou display: inline-block, notamment) et que l'usage d'un tableau dans tel ou tel cas précis fait gagner en productivité. Au passage, la mise en page d'un formulaire sur deux colonnes peut faire partie de ces cas (bien qu'on puisse faire autrement, bien sûr).

Enfin bref, on pourrait discuter de tout ça longtemps, mais c'est un sujet archi-débattu, et fin 2007 je crois qu'on peut dire que nous arrivons après la guerre, l'heure est clairement à la réactualisation des compétences.
Mais l'idée qu'on puisse, en 2007, transmettre un «c'est pas concluant» mal informé a des étudiants qui attendent une information solide, ça me reste en travers de la gorge. Et j'ai cru lire ci-dessus un jeune enseignant qui avait la même réaction (en une ligne au lieu de cinquante, certes).


PS: je suis conscient du fait que cette réponse n'est ni modérée, ni diplomate. Ce que j'assume totalement, en dépit de mes attributions de modérateur ici complètement mises en veille...

Florent V. a écrit :
PS: je suis conscient du fait que cette réponse n'est ni modérée, ni diplomate. Ce que j'assume totalement, en dépit de mes attributions de modérateur ici complètement mises en veille...

C'est normal, je suis le roi des troll. Devant moi, même les modérateurs succombent.

Florent V. a écrit :

Mais l'idée qu'on puisse, en 2007, transmettre un «c'est pas concluant» mal informé a des étudiants qui attendent une information solide, ça me reste en travers de la gorge. Et j'ai cru lire ci-dessus un jeune enseignant qui avait la même réaction (en une ligne au lieu de cinquante, certes).

J'aurais peut-être dû donner le contexte : j'ai une dizaine de technologies à enseigner à des étudiants. La direction des études m'alloue pour cela 10 séances. Je vais au plus court. Si il y a un truc que je n'arrive pas à faire, je le dis aux étudiants, je leur donne les références les plus populaires, et je leur souhaite bonne chance. Je devrais faire quoi de plus ou de moins ?

Quand je vois les difficultés que vous avez à expliquer la mise en page sans les tableaux (avec retour sans cesse des tableaux dans la documentation), je me dis qu'il serait bien présomptueux de ma part de tenter de vous concurrencer.

Je vous rappelle aussi que former un ingénieur, c'est lui apprendre à s'auto-former. A lui d'aller chercher sur internet les éléments de technologie qui lui permettront d'aller plus loin que son prof. Je lui donne toutes les clefs pour cela. Je ne lui cache rien, même pas mon découragement.

Archeboc.

ghost a écrit :
Re,

Tu peux tenter de centrer verticalement avec vertical-align

Je ne vois pas de vertical-align dans le code que tu proposes.

Par ailleurs, j'ai l'impression que tu dois fixer à deux endroits différents la hauteur du textarea. Je trouve cela dangereux. Il n'y a pas moyen d'éviter cela ?

J'ajoute un avantage pour les tableaux, que je n'ai pas encore réussi à compenser en CSS : pour mettre en place ma mise en page, il me suffit d'un border=1 au bon endroit (ou d'un replace all si j'ai plusieurs tableaux) pour avoir des marques de placement. Avec CSS, y a-t-il un équivalent ?

Archeboc.

ghost a écrit :

.gauche{ 
float: left; 
width: 50%; 
line-height: 1em;
font-size: 1em; 
text-align: right; 
margin-right: 15px;
}

.notabene{ 
clear: both; 
text-align: center; 
font-size:.65em;}

input{
line-height: 1em;
}

textarea{
height: 60px;
}

.gauche_textarea{ 
float: left; 
width: 50%; 
line-height: 60px;
font-size: 1em; 
text-align: right; 
margin-right: 15px;
}

Donner les bonnes class dans le code

Florent V. a écrit :

Et j'ai cru lire ci-dessus un jeune enseignant qui avait la même réaction (en une ligne au lieu de cinquante, certes).

C'est simplement parce que j'étais sûr que tu viendrais développer ça bien mieux que moi…

archeboc a écrit :

Ghost a proposé une solution avec CSS. Je l'ai un peu retravaillée, et je vous la soumets :
Avec CSS, je n'obtiens pas encore ce que je voudrais obtenir.

Pour le dire avec des mots, je voudrais un formulaire :
- où les champs sont les uns au dessus des autres,
- où ils sont alignés à gauche les uns par rapport aux autres
- où chaque champ est précédé de son intitulé
- cet intitulé étant lui-même aligné à droite
- de tel sorte que les caractères ":" qui séparent les champs de leurs intitulés soient tous dans le même alignement vertical.

Bonjour,

Un tutoriel qui vas au delà du simple habillage de formulaire avec CSS, mais qui explique également comment les réaliser correctement avec html : Des formulaires plus simples Tu y trouveras toutes les techniques dont tu as besoin pour arriver au résultat souhaité.