Le Spiponoscope - commentaires

Le Spiponoscope

Bonjour,
Tu viens de semer le doute dans mon esprit, j'ai été vérifier, en faisant du copier/coller, non tout va bien.

Le Spiponoscope

n'aurais-tu pas oublié, en recopiant le code, l'espace avant first ???

[résolu]Le Spiponoscope

Bonjour,

Finalement, le rezo m'a permis de résoudre le problème, je vous donne donc le version finale du spiponoscope.

Le code « auteurstous »




 #NOM
 [(#LOGO_AUTEUR||image_reduire{80,80})] [(#BIO)]

Un peu de css

/*Un peu de code pour Spiponoscope*/
.auteurtous .auteur { list-style-type: none; float: left; width: 30%;
}
.auteurtous .auteur.first { clear: left;
}
.auteurtous{overflow:auto;overflow-y:hidden}

et dans l'article

Normalement, tout devrait bien se passer, bon courage et merci d'utiliser spiponoscope.

Le Spiponoscope

Et non, les images sont alignées verticalement, au lieu de par trois horizontalement.

Le Spiponoscope

pourquoi pas tout simplement :

[]

ce qui une fois sur trois produira :

et deux fois sur trois :

Le Spiponoscope

Bonsoir,

J'ai cherché et j'ai trouvé, il y a une petite erreur sur les balises, pour les > elle est de trop, en fait le code de départ est ainsi :

[(#COMPTEUR_BOUCLE|alterner{' class="first"','', ''})]>

alors qu'il doit être :

Voilà tout est rentré dans l'ordre et le code est propre, mais non conforme W3C

Le débat reste toujours ouvert

Merci

Le Spiponoscope

Bonjour,
Je ne sais pas depuis combien de temps le message a été posté, je suis désolé de n'être pas venu plus tôt, merci pour tes conseils, que j'ai suivi, sauf pour le plugin (je ne sais pas faire), je rencontre un problème, il y a des > , des class=« first »> on dirait un tag qui n'est pas fermé mais je ne trouve pas, en tout cas ce code est nettement plus propre, merci

Le Spiponoscope

Salut,

Et non pas d'entorse ;)

Ce qu'il est possible de faire, c'est d'utiliser les class :




[(#COMPTEUR_BOUCLE|alterner{' class="first"','', ''})]> #NOM
 [(#LOGO_AUTEUR||image_reduire{80,80})] [(#BIO)]

la css :

.auteurtous .auteur { list-style-type: none; float: left; width: 30%;
}
.auteurtous .auteur.first { clear: left;
}
.auteurtous{overflow:auto;overflow-y:hidden}

La dernière ligne permet d'enlver le br class=« nettoyeur », ca fonctionne sur les navigateurs modernes et performant.

Pour certaibs site, il vaut mieux rajouter le br class=« nettoyeur »

En tous cas félicitations, excellente contrib !

Et contrairement à toi, je ne pense pas qu'un plugin serait approprié. De toute façon, tu a fait tous le travail. Pour faire le plugin qui ajouterait ce modèle, il suffit d'ajouter un fichier plugin.xml avec :

 Spinoscope [mailou->http://www.spip-contrib.net/?auteur5939] avec la participation de Jacques J. denisb, et André Vincent 1.0 stable ...

Ensuite tu créé un répertoire spinoscope contenant :

plugin.xml
modèles/auteurstous.html

Tu compresse ce répertoire et tu l'envoi sur l'article.

Salut !

Le Spiponoscope

Effectivement, pour une liste c'est

, mais comme je l'ai expliqué ça modifie mes colonnes de gauche et de droite, alors pour rétablir j'ai mis , sinon je ne sais pas comment compenser, n'avons nous pas droit à quelques entorses ?

lia ?

Dans le code HTML que tu donnes, tu mets des éléments « lia »... Ça n'existe pas. Si tu veux faire une liste c'est « li », pas « lia ». :)

Le Spiponoscope

C'est bon maintenant, il manquait seulement un

"
"

maintenant tout est en ordre, merci, je vais changer le code sur la contrib.

Le Spiponoscope

Je me réponds, j'ai transformé les li en lia et ça supprime les trois colonnes des colonnes, mais ça dépasse toujours le cadre de l'article.

Le Spiponoscope

C'est super, merci, mais problème ça sort du cadre de l'article et en plus j'ai peut-être mal placé la définition css mais ça joue aussi sur les colonnes de droite et de gauche ??@ ??

Amélioration sémantique

Je te propose l'amélioration suivante. J'ai gardé autant que possible ton code à l'intérieur des fiches des auteurs, j'ai juste changé la structure de la liste.




 #NOM
 [(#LOGO_AUTEUR||image_reduire{80,80})] [(#BIO)]

Le style CSS :

li { list-style-type: none; float: left; width: 30%;
}
li.first { clear: left;
}

Les différences avec le code que tu proposes :
- Pas du tout de « tr » : juste une balise « ul » pour la liste, avec des « li » pour chaque élément.
- la balise « a » que tu avais oublié de fermer.
- pas de « hr » (quel intérêt ?).

J'ai mis une largeur de 30% pour les éléments de la liste, pour que ça rentre sur la page, mais c'est possible de changer cette largeur suivant l'espacement que tu veux entre les éléments, par exemple.

Vu qu'on veut 3 colonnes, le filtre « alterner » alterne sur 3 éléments, mais il suffit d'en rajouter ou enlever pour changer le nombre de colonnes (ne pas oublier d'adapter le « width » de la CSS, du coup).

Et bien sûr, le code CSS ici est minimaliste, si on veut quelque chose de plus sexy on peut rajouter des bordures, des couleurs et tout le tralala.

Le Spiponoscope

Bonjour Davux,
J'ai suivi ton conseil et voilà



[
(#COMPTEUR_BOUCLE|alterner{'',''})]  #NOM
[(#LOGO_AUTEUR||image_reduire{80,80})] [(#BIO)
] 
[
(#COMPTEUR_BOUCLE|alterner{'',''})
]

[(#TOTAL_BOUCLE|alterner{ '
','', ''})]

Mais j'aurais aimé que les auteurs viennent sur trois colonnes surtout quand il commence à y avoir du monde.
Qu'en penses-tu dois-je modifier ma contrib dans ce sens ?
Merci de tes conseils

Le Spiponoscope

Bonjour,

Il m'a été conseillé d'utiliser du css effectivement, mais je suis désolé d'avouer qu'en la matière je suis limité, il est clair que je vais essayer d'améliorer, ce que je souhaite, c'est que personne n'hésite à proposer quelque chose de mieux, pourquoi pas un plugin, je pense que nombreux seront preneur.

Merci pour ton avis
@+

Amélioration sémantique

Très bonne idée, en revanche l'utilisation d'un tableau n'est pas une très bonne idée, car il ne s'agit pas d'une information tabulaire : c'est simplement une liste.

Désolé de ne pas poster un remplacement complet, mais il faudrait utiliser un élément « ul » au lieu de « table », et des « li » au lieu de « td ». Ensuite la disposition visuelle des éléments peut se faire par le biais de quelques définitions CSS (jouer sur "float : left" et "width", je dirais).

En plus d'un contenu beaucoup plus "parlant" au niveau sémantique, ça permettrait beaucoup plus de souplesse en termes de personnalisation graphique, et d'autant plus si l'idée est de distribuer cette contrib sous forme de plugin.