élément li sur même ligne

Bonjour
Sur la mise à jour d'un site sur les logiciels libres, je ne vois pas avec le débogueur pourquoi il y a des <li> sur plusieurs lignes.
https://v2.clibre.eu/fr/logiciels-libres/audacity-enregistrez-et-editer-vos-sons
Je souhaite décaler le tout de l'image avec des lignes qui ne reviennent pas à la ligne

Re

Ta <div> parent est en inline-block; elle se mets donc à la taille de son contenu (ici l'image et la liste). Ensuite tu met l'image en float et elle viens pousser le contenu en sortant du flux mais ca n'impacte pas la largeur de ta div parent. Ne met pas cette div en inline-block ou alors mais une margin left de la taille de ton image sur ton <ul>

Re
Je ne peux pas toucher à la <div> parent, car généré par le cms
Après j'ai aussi d'autres contraintes :
1/l'éditeur tinyMce change parfois le code
2/ des auteurs non à l'aise avec le web vont avoir du mal à modifier un article

J'ai mis cela:

div[itemprop="articleBody"] div>ul{ /* décalage  */
padding-left: 300px;
}

J'ai tjs un retour à la ligne et c'est moi qui dois mettre la largeur de l'image qui peut varier selon le logo
est-ce qu'il y a une solution plus pérenne auto? Sinon tant pis, je serai obligé de mettre le texte avec un <ul> en dessous de l'image, en communiquant sur cette nécessité?!

Re
J'ai accès au code css

a écrit :
div.accroche + div {
display: inline-block!important;
}
faut juste faire pareil avec block.

Je n'ai pas compris !

L'éditeur https://www.tiny.cloud/docs/demo/ est dans joomla
parfois il change mon code html !

Ce site doit avoir plus d'une centaine d'articles avec un logo + description.
90% n'ont pas de problème car pas de <ul> juste à côté de l'image
Des logos peuvent avoir une largeur de <400px, 400 px ou > 400px
Je peux mettre la largeur=410px du block dans le code css :

div[itemprop="articleBody"] div>ul{ /* décalage  */
padding-left: 410px;
}

mais cela n'aura pas un bon rendu pour les autres cas
C'est pour cela que je me demandais s'il y avait une autre possibilité plus universelle sans donner une largeur.
Sinon tant pis, comme je le disais pour les quelques cas d'image avec une description contenant un ul sur la droite, je chercherai une autre solution car c'est un cas minoritaire

HDcms a écrit :
J'ai accès au code css

donc tu peux faire :

div.accroche + div {
    display: block !important;
}

ou alors supprimer le

div.accroche + div {
    display: inline-block!important;
}

qui est dans le CSS si jamais c'est toi qui l'a ajouté.

Du coup ton block devrait prendre toute la largeur de la page et pas juste une colonne

Re
Je me demandais a quoi servait ce code bizarre

div.accroche + div {
    display: inline-block!important;
}

Et bien cela permettait de faire un retour à la ligne

En mettant le code

div.accroche + div {
    display: block !important;
}

cela casse la mise en page et j'ai besoin de ce retour à la ligne
J'ai essayé plusieurs commandes dont

div[itemprop="articleBody"] > div.accroche{ /* retour à la ligne après la photo  */
/*flex-wrap: wrap;*/
white-space:wrap; 
}

, mais cela n'a pas fonctionné:
https://v2.clibre.eu/fr/logiciels-libres/audacity-enregistrez-et-editer-vos-sons
je dois pourtant sélectionner " div.accroche" ?
Modifié par HDcms (22 Feb 2022 - 17:25)

HDcms a écrit :
Et bien cela permettait de faire un retour à la ligne

Non pas exactement. Le display block c'est l'état par défaut des div. Ca lui dit juste de prendre toute la largeur possible.

HDcms a écrit :
cela casse la mise en page et j'ai besoin de ce retour à la ligne

Ah bah faudrait savoir si tu veux du retour à la ligne ou pas ! Je te rapelle que tes premieres phrases c'était :

HDcms a écrit :
Je souhaite décaler le tout de l'image avec des lignes qui ne reviennent pas à la ligne

donc bon...

Apres si tu dis que c'est cassé parceque l'image déborde en dessous, c'est du a ton float et c'est normal, c'est le fonctionnement du float. Ton image est trop grande, en tout cas plus grande que le texte donc elle déborde.

Le display:inline-block; ta donne un contexte de formatage (hop de la lecture : https://www.alsacreations.com/astuce/lire/1543-Le-contexte-de-formatage-block-en-CSS.html) qui donne ce comportement je pense.

Donc pour garder le display:block; tu peux rajouter overflow:hidden; ou auto en plus.

HDcms a écrit :
je dois pourtant sélectionner " div.accroche" ?

la div.accroche c'est le titre... c'est la div juste apres qui contient le float

et white-space:wrap; ca n'existe pas... https://developer.mozilla.org/fr/docs/Web/CSS/white-space tu tente des trucs au hasard ?

Bonjour
Bon en progrès.
Merci pour les éclaircissements?; Même avec les liens encore un peu confus pour moi. C'est pour cela que dès fois, je teste rapidement (surtout pour des travaux gratuits), ce que je vois dans les résultats des moteurs de recherche qui répondent à ma question.

En tout les cas, cela fonctionne avec

div.accroche + div {
    display: block !important;
overflow:hidden; 
}

Merci

HDcms a écrit :
Bonjour
Sur la mise à jour d'un site sur les logiciels libres, je ne vois pas avec le débogueur pourquoi il y a des &lt;li&gt; sur plusieurs lignes.
https://v2.clibre.eu/fr/logiciels-libres/audacity-enregistrez-et-editer-vos-sons
Je souhaite décaler le tout de l'image avec des lignes qui ne reviennent pas à la ligne

Salut, comment tu fais la grosse ombre au milieu ?