27799 sujets

CSS et mise en forme, CSS3

Modérateur
Re Smiley smile

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 Smiley confus
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é?!
Modérateur
HDcms a écrit :
Je ne peux pas toucher à la &lt;div&gt; parent, car généré par le cms

Comem totu a l'heure, c'est pas parcequ'elle est générée que tu peux pas y toucher en CSS. regarde dans le code :
div.accroche + div {
    display: inline-block!important;
}

faut juste faire pareil avec block.

HDcms a écrit :
Après j'ai aussi d'autres contraintes :
1/l'éditeur tinyMce change parfois le code[quote=HDcms]
Tu met du code dans un editeur tinyMce ?

[quote=HDcms]2/ des auteurs non à l'aise avec le web vont avoir du mal à modifier un article
ouais normal c'est pas a eux de faire le code de la page.

HDcms a écrit :
J'ai mis cela:
div[itemprop="articleBody"] div&gt;ul{ /* décalage  */
padding-left: 300px;
}

Dans l'éditeur tinyMce ? Smiley biggol j'ai rien compris

HDcms a écrit :
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 Smiley confus
bahs déjà ton image fait 400px donc mets 400px et pas 300px. Apres si ton image change de taille bah met la div en block comme préconisé au dessus.

J'ai franchement du mal a te suivre. c'est ton site ? c'est toi qui le dev ? Comment tu arrive a mettre du CSS si c'est pas le tiens ?
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 Smiley eek
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
Modérateur
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 Smiley eek
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)
Modérateur
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 ? Smiley lol
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