27295 sujets

CSS et mise en forme, CSS3

Pages :
Merci beaucoup Smiley merci
ça semble marcher Smiley clapclap .
Reste pour moi à comprendre pourquoi
1) HTML https://tests.osirisnet.net/monument/chaproug/@@chaproug.html?fr
2) CSS: https://tests.osirisnet.net/slideshow2.css
Si j'osais Smiley confused
Mon script fait une chose supplémentaire que je ne vois pas comment faire en CSS:
Il regarde si le texte de <figcaption> tient sur une ligne:
- si oui, il laisse le text-align:center
- si non, il met le text-align:justify
Y a-t-il un moyen de faire ça en CSS ?
Modérateur
PapyJP a écrit :
Merci beaucoup Smiley merci

Si j'osais Smiley confused
Mon script fait une chose supplémentaire que je ne vois pas comment faire en CSS:
Il regarde si le texte de &lt;figcaption&gt; tient sur une ligne:
- si oui, il laisse le text-align:center
- si non, il met le text-align:justify
Y a-t-il un moyen de faire ça en CSS ?


Vu la structure, flex à nouveau Smiley smile

je tenterais :
figcaption {display:flex;justify-content:center;}
figcaption span {text-align:justify;}/*optionnel*/

le span est centré, jusqu’à ce qu'il occupe toute la largeur, text-align n'aura pas d'incidence avant.

voici une reprise de ton architecture avec juste flex pour le layout : https://codepen.io/gc-nomade/pen/bGdyyWO flex en imbrication sur main et figure/figcaption. un seul figcaption pour les 2 textes et quelques bordures. Si cela t'aide a mieux visualisé les effets de flex.
Modifié par gcyrillus (04 Apr 2020 - 12:59)
Whaou! C'est génial de jouer sut justify-content vs justify.
Je vais reprendre tout ce code pour tirer parti de cette techno
Merci mille fois!!!
J'ai reporté dans mon code sans tout chambouler pour le moment.
1) HTML https://tests.osirisnet.net/monument/chaproug/@@chaproug.html?fr
2) CSS: https://tests.osirisnet.net/slideshow2.css
Le seul point qui ne suit pas les specs, c'est que l'image n'est pas cadrée en haut de son conteneur.
Dans ce cas précis, ce n'est pas gênant, mais il y dans dans ces carrousels des images plus petites qui vont poser problème. Quand on passe d'une image à une autre, en fonction de la hauteur de l'image on aura l'impression de montagnes russes.
Modérateur
Je pense qu'un img{margin-bottom:auto;} devrait pousser ton image vers le haut et suffire à ton besoin.

Cdt
Modifié par gcyrillus (04 Apr 2020 - 18:30)
Merci, c'est (center) top!!! Smiley biggrin
Je vois qu'il me reste des tas de domaines du CSS à investiguer. Le problème c'est que c'est tellement vaste que je vais m'y perdre, d'autant qu'il y a des tas de choses dont je n'ai pas et n'aurai sans doute jamais besoin, compte tenu de mon âge et du peu de sites que je gère.
Yapuka reprendre tout mon code pour générer les bonne balises, mettre de l'ordre dans mon CSS, etc...

Pour CodePen, je ne l'utilise qu'exceptionnellement, car mon code sort de générateurs PHP ou JavaScript (ou les deux) et fait appel à mes librairies de JavaScript (mon jQuery perso). Pour mettre du code sur CodePen, il faut faire des captures de code avec les outils de debugging, mettre ça en forme... c'est pas mal de choses à faire et je ne suis jamais sûr que je n'ai pas tellement transformé le code que ça n'a plus grand chose à voir avec le code originel.
Modérateur
Hello,
J'avais écrit ce message fin semaine passée mais je vois que d'autres réponses sont arrivées entre temps. J'ai du interrompre ce message pour partir à l'hopital et voir l'arrivée de notre petite fille Elisabeth Smiley smile
Bref, nous sommes rentré, tout va bien et je te poste quand même le message même si je vois que ça a bien évolué Smiley ravi


---


Hello Papy,

Sorry, pas mal de boulot de mon coté, on a la chance de pouvoir faire du télétravail (2 jours par semaine généralement et en ce moment, tous les jours évidement) donc je ne vois pas toujours tout sur le forum…
Voici le code qui est indispensable pour ton besoin, essaye dans un premier temps de nettoyer ton code actuel pour adapté ce code dedans :
main{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header{
  flex-grow: 0 0 auto;
}

figcaption{
  flex-grow: 0 0 auto;
}

figure{
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
}

img{
  flex: 1 0 0;
  min-height: 1px;
  object-fit: contain;
}


Ce que ça fait :
1/ <main> va prendre toute la hauteur
2/ <header> et <figpation> vont prendre le minimum d'espace requis pour eux (flex-grow: 0)
3/ <figure> va prendre l'espace disponible jusqu'en bas (flex-grow: 1)
4/ On applique un display flex sur <figure> pour que son enfant puisse profité des propriété flex
5/ On dit à <img> de remplir l'espace mais en affichant son entièreté même si il doit y avoir du blanc (soit haut/bas, soit gauche/droite ? object-fit: contain)
5/ On dit à l'<img> de prendre tout l'espace aussi (flex-grow: 1) qu'elle s'étire dans son parent
6/ Le trick ici est d'appliquer un min-height à l'image pour qu'elle puisse être plus petite que sa taille normal (étant donné que en flex, les min)