Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Images l’une à côté de l’autre

Patrice MOREL
le 20 octobre 2023
à 16:41
Rappel du sujet :

Bonjour,
Encore moi  😎 !
Je ne comprends pas pourquoi les images ne se mettent pas les unes à côté des autres ! Ceci dit pour simplifier la demande...
Si je veux faire [<doc70>->#AncreHautPage]{{{B}}} (même en mettant <img74|left>), mon image ne colle pas au B et il va à la ligne.
<doc70> est une petite flèche que je voudrai mettre devant chaque lettre d’une liste de biographies (voir article http://collectif-jeandeneyman.fr/spip.php?article23).
J’espère ne pas être trop lourd, car je sollicite beaucoup, mais l’installation n’est pas évidente pour moi.
Merci encore pour tout.
@micalement,
Patrice

Images l’une à côté de l’autre

Hello

Peux-tu me remettre une de ces images dans l’article pour que je voie ça ? Sûrement qu’avec un peu de css on doit pouvoir régler le problème.

Et non, tu n’est pas trop lourd. On a tous commencé un jour !

Images l’une à côté de l’autre

Merci beaucoup
J’ai mis dans la même page une démo : http://collectif-jeandeneyman.fr/spip.php?article23

J’aurais souhaité :
Démo 1 : la flèche, puis le B l’un à côté de l’autre
Démo 2 : les flèches les unes à côté des autres (cela pourrait être d’autres images que je souhaiterai dans la même configuration...)

Note : sous SPIP 3 çà fonctionnait bien, je l’avais fait avec des images de timbres poste !

Merci
@micalement
Patrice

Images l’une à côté de l’autre

Essaies de mettre ceci dans ton perso.css

.article23 .spip_doc_inner {
	float: left;
	margin: 0px 5px 0 0;
}

Sinon, pour mettre des images côte à côte, le solution la plus simple est de les mettre dans un tableau.

Images l’une à côté de l’autre

Merci beaucoup

çà fonctionne 2 pecaux (il va falloir que j’apprenne un peu comment on manipule les CSS).

Merci encore.

@micalement
Patrice

Images l’une à côté de l’autre

Je sors du sujet mais je remarque que tu as un souci avec la pagination (bloc "dans la même rubrique" par exemple). Comme si le modèle de pagination n’était pas le bon, qu’il s’agissait d’une ancienne version.
La date du fichier /prive/modeles/pagination.html correspond-elle aux autres dossiers/fichiers de spip ?

Images l’une à côté de l’autre (pagination)

Celle sur mon site sont 01/10/2023 et celle de SPIP téléchargée est du 01/09/2023 !
Idem pour tous les fichiers !
(Trop fort pour voir des trucs pareils !)
Que dois-je faire à ton avis ?

Images l’une à côté de l’autre (pagination)

Bizarre. Si tous tes fichiers sont du 01/10/2023 c’est que la mise à jour s’est déroulée correctement à priori.

Comment fais-tu tes mises à jour de SPIP ? Par FTP ou via spip_loader ?

Images l’une à côté de l’autre (pagination)

Pour l’instant je n’en ai pas fait sur ce site, c’est une première installation que j’ai fait par FTP ; sinon j’utilise via spip_loader (et il va falloir que j’en fasse une d’ailleur, je suis en SPIP 4.2.5).

Images l’une à côté de l’autre

Je t’avais posé une question sur le CSS que tu m’a fourni et je ne sais pas si tu l’as reçu (ou moi envoyé...).
Comment peut t’on faire, STP, pour que ce CSS concerne tous les articles (et pas seulement le 23).
J’ai fouillé sur le net et pas trouvé...
Merci

Images l’une à côté de l’autre (pagination)

Oui, bonne idée. C’est plus sûr et on verra si ça règle problème.

Images l’une à côté de l’autre (pagination)

Je fais çà demain car je vais faire une sauvegarde avant quand même...

Images l’une à côté de l’autre

Il suffit d’enlever le .article23 qui cible cet article précis.

Attention néanmoins aux effets de bord sur les autres images insérées dans le texte.

Il serait plus prudent de mettre ton image à gauche avec |left et de ne cibler que ces images avec

.spip_documents_left .spip_doc_inner {
	margin: 0px 5px 0 0;
}
Images l’une à côté de l’autre (pagination)

Bonjour,
Le café est pris.
J’ai voulu réinstaller avec spip_loader.php et au lancement j’ai l’image d’un ours blanc à côté d’un tas de sel sur la neige vus d’avion ; bref une page blanche !
J’ai sauvegardé ma base et les répertoires IMG, squelettes et plugins.
Crois-tu que je peux oser tout supprimer à la racine www et remettre le nouveau SPIP avec mon FTP ?
Merci pour ton aide (en espérant que ton petit déjeuner s’est bien passé aussi).
@micalement,
Patrice

Images l’une à côté de l’autre (pagination)

Je me réponds :
OSE
C’est fait par Ftp... je suis en SPIP 4.2.6 et PHP 8.1
çà a l’air de fonctionner !
@micalement,
Patrice

Images l’une à côté de l’autre (pagination)

Hello

Je ne vois aucun changement de mon côté en ce qui concerne les liens de pagination. (voir image jointe)

A la ligne 9 du fichier /prive/modeles/pagination.html, tu as bien ce code ?

<ul class="pagination-items pagination_#GET{type}">[
Images l’une à côté de l’autre (pagination)

Hello aussi

Effectivement c’est mieux chez toi !

et pourtant chez moi c’est pareille à la ligne 9 :
<ul class="pagination-items pagination_#GET{type}">[

Images l’une à côté de l’autre (pagination)

Ah, c’est donc qu’il doit y avoir un plugin qui surcharge le modèle de spip.
Si tu vas sur collectif-jeandeneyman.fr/spip.php ?rubrique16&var_mode=inclure que vois-tu pour cette pagination ? (ça te donne le chemin du fichier appelé)

Images l’une à côté de l’autre (pagination)

Voila :
plugins/auto/bootstrap/v2.1.14/bootstrap2spip/modeles/pagination.html

Images l’une à côté de l’autre

Ah ben voilà ! Désactive le plugin Bootstrap et tout rentrera dans l’ordre. De toutes façons il est inutile avec Escal.

Images l’une à côté de l’autre

Impeccable.

Je n’avais pas vu au départ et je ne comprenais pas le sujet de la "pagination" !). Avec la syntaxe de recherche que tu m’as donné, je dormirai moins bête (je reste poli  😎 ) ce soir...

Pour mon autre sujet, ce n’est pas évident ! J’ai essayé toute la matinée (prise de tête) d’enlever ou ajouter du code CSS, mais je reviens à ta 1ère proposition.
Donc 2 questions, si tu veux bien :

1 - Si je veux l’appliquer à d’autres articles, dois-je ajouter le même code en-dessous de ce CSS en changeant le n° d’article ou existe t’il une solution de type :

.article23,35,46 .spip_doc_inner {
        float: left;
        margin: 0px 5px 0 0;
}

ou construire un système qui fait que quand j’écris dans mon article une commande supplémentaire cela s’exécute ?
Par exemple <docXX|center|cotecote>

C’est peut-être même une suggestion pour Escal ?!...

2 - Connais-tu un site ou un bouquin qui pourrait m’apprendre un minimum le codage CSS ?

J’en ajouterai bien une autre : comment je peux faire pour te remercier ?

@+

Patrice

Images l’une à côté de l’autre

Ok on va y aller pas à pas. Peux-tu déjà mettre le raccourci
[<doc70>|left->#AncreHautPage]{{{B}}}
dans ton article 23

Images l’une à côté de l’autre

Pardon c’est
[<doc70|left>->#AncreHautPage]{{{B}}}
qu’il faut mettre.

Images l’une à côté de l’autre
Images l’une à côté de l’autre

Peut-être 74, en tout cas l’id de ta flèche.
Et sans la balise code.

Images l’une à côté de l’autre

N’oublie pas de mettre le |left !!

Images l’une à côté de l’autre

C’était le cas :
[<doc74>|left->#AncreHautPage]{{{B}}}

Pour info, le CSS en vigueur sur cet article est le 1er que tu m’as construit :

.article23 .spip_doc_inner {
        float: left;
        margin: 0px 5px 0 0;
}

http://collectif-jeandeneyman.fr/spip.php?article23

Images l’une à côté de l’autre

Lis bien mes messages, j’ai corrigé l’erreur que j’avais commise au premier jet et tu l’as reproduite. Il faut donc que tu corriges de ton côté.

Images l’une à côté de l’autre

J’ai changé le CSS en

.spip_documents_left .spip_doc_inner {
        margin: 0px 5px 0 0;
}

(c’est çà ?)

Images l’une à côté de l’autre

Oui on y reviendra après mais je ne vois toujours pas le test avec <doc74|left>.

Images l’une à côté de l’autre
Images l’une à côté de l’autre

Justement ton image est centrée et non à gauche !
Pourrais-tu me donner un accès webmestre temporaire pour gagner dutemps. (codes à m’envoyer en privé bien sûr)

Images l’une à côté de l’autre

Ok j’ai vu : tu n’avais pas corrigé le <doc70>|left en <doc70|left>.

Maintenant que c’est corrigé, tu mets ceci dans ton perso.css

.spip_document_left, .spip_doc_inner {
	margin: 5px 2px 0 0;
}

à la place de

.spip_documents_left .spip_doc_inner {
        margin: 0px 5px 0 0;
}

et hop !

Images l’une à côté de l’autre

çà m’a l’air parfait  😄

Merci beaucoup.

Patrice

Images l’une à côté de l’autre

Ah je vois que la taille des lettres est plus petite donc

.spip_document_left, .spip_doc_inner {
  margin: 2px 2px 0 0;
}

me paraît plus adapté.

Et pour finir, je ne connais pas de bouquin sur les CSS mais il y a plein de sites pour débuter.
J’aime assez celui-ci :
http://css.mammouthland.net/premiers-pas-en-css.php
Le plus compliqué est souvent de bien cibler le bon élément.

Prévoir un thermos de café au début  😎

Images l’une à côté de l’autre

J’ai fait fort (enfin je crois...  😳 ), j’ai adapté :
Les 3 accolades me déclenchait un sommaire (pluging) qui aurait fini par être trop long, donc j’en ai mis que 2 accolades et changé les marges du CSS.

.spip_document_left, .spip_doc_inner {
        margin: 1px 2px 0 0;
}

Merci
Patrice

Images l’une à côté de l’autre

Oui, très bien !
Les 3 accolades donnent un intertitre, donc un sommaire
Les 2 accolades mettent simplement en gras.

Ceci dit pour le sommaire, on peut l’enlever en mettant [!sommaire] au début de l’article avec le couteau suisse) ou <retire_sommaire> avec le plugin dédié.
Sinon, avec le couteau suisse ou avec le plugin dédié on peut choisir d’insérer le sommaire au coup par coup avec #SOMMAIRE ou <sommaire> selon le cas

Réagir au sujet
Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.
Attention ! Si votre message contient un lien, il devra être validé par le webmestre. Inutile de le poster à nouveau ;-)

Ajouter un document

Plan du site Contact Mentions légales Données personnelles et cookies Espace privé squelette RSS

2009-2025 © Escal - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 5.2.14