[ajout de tuto] design fluide et 4 coins ou bordures graphiques

Bon voilà quoi, je propose un travail collaboratif sur la base de ce que j'ai eu l'occasion d'exposer ici :
http://clb56.freezee.org/test_roundcorner/

En élargissant la partie exposé à la question de quatre bordures (ce qui n'est pas fait sur mon site).

En évaluant le système proposé (problème de l'utilisation de la class="last_element" dans le cas de contenus générés).

En recherchant des solutions, si possible, au point précédent.
Modifié par clb56 (28 Aug 2006 - 23:17)

Aaah le fameux Graal du coin arrondi fluide

J'avoue que je ne me suis pas penché sur ta méthode, mais il y'aurait sans-doute de quoi faire en utilisant JavaScript : un peu comme NiftyCorners mais sans avoir à utiliser plein de <div> imbriqués.

Raphael a écrit :
Aaah le fameux Graal du coin arrondi fluide

J'avoue que je ne me suis pas penché sur ta méthode, mais il y'aurait sans-doute de quoi faire en utilisant JavaScript : un peu comme NiftyCorners mais sans avoir à utiliser plein de <div> imbriqués.

Ben justement ce que j'ai essayé c'est d'arriver au résultat en m'en tenant au maximum à l'html existant, celui qui s'élabore en fonction de la structuration du contenu. Au plus, et pas toujours, j'ai besoin d'un double conteneur et c'est tout.

Si tu as quelques minutes à consacrer pour suivre le lien que j'ai mis dans le premier message et bien ce sera tant mieux

Je confirme la démarche de clb56, par contre on touche une population ayant une base sérieuse de l'utilisation des css, ce qui ne veut pas dire qu'ils sont très difficiles, loin de là, mais qu'avoir déja une bonne idée des comportements aide pas mal à les apréhender.

Après lecture rapide, j'ai quelques remarques :
1- c'est très sympa, et ça c'est un bon début
2- ce qui va être gênant, dans le cadre d'un tuto, c'est que beaucoup vont croire que cela ne s'applique qu'à une liste et nombreux vont dire "oui, mais moi je n'ai pas de <li> et ça ne marche pas, pourquoi ?".

Bref, c'est peut-être un peu trop "spécialisé" comme tutoriel. Il faudrait peut-être une étape préliminaire qui expliquerait comment procéder sans liste, ou de façon générale.

Raphael a écrit :
ce qui va être gênant, dans le cadre d'un tuto,

Oui, oui...

Je n'ai surtout pas dit que cela avait à être repris comme tel. C'est une base de travail que je propose parce que j'y ai pas mal réfléchi et travaillé mais pas plus.

En fait je ne considère pas du tout ce que j'écrit dans mon site comme des tutoriels. Il s'agit simplement de tests dont j'essaye de faire des exposés aussi précis que possible.

Une précision néanmoins. J'aurais tendance à penser que c'est toute la problématique, l'intérêt et sans doute la richesse des css que de ne pas s'appliquer de façon générale mais bien de manière concrète et déterminée sur un code html concret et déterminé, et c'est bien cela qui fait que la surenchère de div (imbriquées ou vides) est finalement très peu utile y compris dans la perspective de rendus assez complexes.
Modifié par clb56 (29 Aug 2006 - 11:20)

Sinon on peut aussi commencer par plus simple, avec une largeur fixe par exemple.
Ou faire deux tutos.

À tout hasard, je rappelle mes deux petits tests sur la question :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html (celui-ci concerne les largeurs fixes uniquement, et se présente comme un tutoriel)

http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html
(Simple example de page fluide. clb56 en a une version alternative – peut-être plus robuste, d'ailleurs).

Dans les deux cas, il ne s'agit pas uniquement de coins, mais des coins ET des bordures, bref d'un habillage un peu plus complexe.

mpop a écrit :
Sinon on peut aussi commencer par plus simple, avec une largeur fixe par exemple.
Ou faire deux tutos.

C'est une bonne idée de procéder en deux étapes, car cela relève effectivement de deux niveaux de compétences.

Tes exemples sont très intéressants aussi mpop.

En fait, je me pose la question : plutôt que de repomper ce qui existe déjà, ne vaudrait-il pas mieux présenter ce qu'il se fait déjà (parfois très bien) ailleurs en expliquant la technique de chacun et en donnant un lien direct vers le site de l'auteur ?
Ce serait plutôt gratifiant pour les auteurs en terme de visibilité, non ?

J'en profite pour ressortir le point de la FAQ qui en parle : http://forum.alsacreations.com/faq/#item73

... Et je rappelle qu'il existe une méthode très propre, sans ajout de structure, qui est celle de before/after : http://www.nanoum.net/blog/5_before_et_after.html
Elle ne fonctionne pas sous IE6 mais doit être signalée.

Autre rappel : les border-radius à signaler également.

Bref, y'a de quoi faire
Modifié par Raphael (29 Aug 2006 - 13:36)

Je suis pour faire ce que suggère Raphaël (si j'ai bien tout pigé).

C'est à dire sur la partie "tuto" d'Alsa, créer un tuto "coin arrondi" par exemple. Et là, plutôt que de réinventer la roue, expliquer le principe et indiquer les ressources existantes eventuellement en commentant si besoin.

Ca diminue (un peu et à l'echelle d'Alsa bien sûr) l'éparpillement des ressources, apporte l'information recherchée par l'utilisateur.

Il faut bien sûr l'accord des auteurs des dits tutos il me semble.

Ca me paraît être à creuser comme idée.

Raphael a écrit :
C'est une bonne idée de procéder en deux étapes, car cela relève effectivement de deux niveaux de compétences.

Je retiens donc l'idée qu'un tutoriel simple pour réaliser une « boîte en largeur fixe avec bordures/coins arrondis en images » ne serait pas de trop, et ferait une bonne introduction pour les débutants -- comparé à un tutoriel complexe sur les différentes solutions pour atteindre le graal du « fluide avec coins arrondis (ou pire, bordures en images) ».

J'ouvre un sujet à part ?

Raphael a écrit :
En fait, je me pose la question : plutôt que de repomper ce qui existe déjà, ne vaudrait-il pas mieux présenter ce qu'il se fait déjà (parfois très bien) ailleurs en expliquant la technique de chacun et en donnant un lien direct vers le site de l'auteur ?
Ce serait plutôt gratifiant pour les auteurs en terme de visibilité, non ?

Pour mon tutoriel sur une boîte de largeur fixe avec bordures en images (par ici pour ceux qui n'ont pas suivi), ça ne me dérangerait pas de le reprendre pour en faire un turoriel pour Alsacréations. Et pour ce qui est de la visibilité, vu que mon site parle pour l'essentiel d'autre chose, ça ne gène pas que le tutoriel soit sur Alsa plutôt que sur mon site, au contraire.

Votre avis :
- reprise du tutoriel (avec des modifications légères pour l'affûter) ?
- faire un tutoriel sur le sujet mais peut-être différent (et en discuter d'abord dans un sujet) ?
- ou rien du tout ?

mpop a écrit :
Votre avis :
- reprise du tutoriel (avec des modifications légères pour l'affûter) ?
- faire un tutoriel sur le sujet mais peut-être différent (et en discuter d'abord dans un sujet) ?
- ou rien du tout ?

Je ne voudrais froisser personne, mais je suis de l'avis que chaque méthode trouvée sur chaque site a des avantages (et des inconvénients).
Si on expose plusieurs méthodes (donc une explication de 3-4 techniques), chacun devrait pouvoir y trouver son compte, plutôt que de n'imposer qu'une seule méthode.

Mais si quelqu'un se sent vraiment d'attaque pour présenter sa méthode en tant que tuto sur Alsa, je ne suis pas contre non-plus.

Raphael a écrit :
Je ne voudrais froisser personne, mais je suis de l'avis que chaque méthode trouvée sur chaque site a des avantages (et des inconvénients).
Si on expose plusieurs méthodes (donc une explication de 3-4 techniques), chacun devrait pouvoir y trouver son compte, plutôt que de n'imposer qu'une seule méthode.

Je pensais à un tuto sur Alsa pour ce qui est du cas d'une boîte de largeur fixe (cas relativement simple), à côté du tutoriel plus général qui présente et référence les solutions pour le cas plus complexe des largeurs fluides...

Ah oui, ça me semble une bonne solution.

Comment tu vois les choses concrètement ?
Et clb56, tu es de la partie ?
Je peux vous laisser carte blanche et gérer ça entre vous ?

Raphael a écrit :
Ah oui, ça me semble une bonne solution.

Comment tu vois les choses concrètement ?

Je me charge d'adapter mon petit tuto (largeur fixe), histoire de corriger ce qui doit l'être. Je vais de ce pas créer un sujet sur la question, histoire d'avoir quelques retours.

Edition : voilà, c'est fait.

Raphael a écrit :
Et clb56, tu es de la partie ?
Je peux vous laisser carte blanche et gérer ça entre vous ?

Si clb56 voulait se charger de coordonner la rédaction d'un(e) tuto/référence sur le design fluide avec coins arrondis/bordures, ça serait pas mal.

Je verrais bien quelque chose avec :
- introduction ;
- et pour chaque technique (intéressante) recensée :
1. exposé rapide de chaque technique ;
2. (si utile) schéma mettant à jour la structure HTML utilisée par la technique ;
3. lien vers le tuto d'origine de la technique présentée ;
4. et évaluation avantages/inconvénients.

clb56, tu en dis quoi ?
Modifié par mpop (30 Aug 2006 - 16:55)

mpop a écrit :
- et pour chaque technique (intéressante) recensée :

A ce propos :
http://articles.e-t172.net/round/
et
http://css-discuss.incutio.com/?page=RoundedCorners

Bonjour à tous,

Aucun problème je suis partant...

Je vais voir à remettre un peu à plat les méthodes existant

suivant deux axes :

. Il faut que ce soit fluide.

. Faire la différence entre les rendus de bordures/coins exigeant des images (ombres portées par exemple) et les rendus ne l'exigeant pas.

Ce sera une bonne base de travail quoiqu'il en soit.

clb56 a écrit :
suivant deux axes :

. Il faut que ce soit fluide.
. Faire la différence entre les rendus de bordures/coins exigeant des images (ombres portées par exemple) et les rendus ne l'exigeant pas.

Ça me semble bien.

Bon alors je peux espérer voir quelque chose de concrèt à mon retour de vacances ?

Raphael a écrit :
Bon alors je peux espérer voir quelque chose de concrèt à mon retour de vacances ?

C'est quand ?

Si je peut me permettre clb, il y a une petite erreur dans le code de ton exemple (le premier, le code final):

 <div id="conteneur_test>
<h3>Ceci est une liste</h3>
<ul>
<li>Premier item</li>
<li>Deuxième item</li>
<li class="last_element">Troisième item</li>
</ul>
</div>

Sur la première ligne, il manque le " fermant
Modifié par Vikchill (02 Sep 2006 - 00:30)