26861 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je sais que ce n'est pas une première mais j'ai fait pas mal de sujets de forum avant de décrire ma problématique:
pour un site de présentation de CV, je souhaite mettre sur ma home:
- à gauche une photo de profil (collant la marge du navigateur)
- à droite un paragraphe de description

Cependant je souhaite que mon texte du paragraphe en question soit, dans l'espace qui lui est dédié, verticalement et horizontalement aligné et justifié ; de ce que je vois actuellement dans mon navigateur celui-ci n'est pas bien aligné avec le centre de ma photo.

si j'ai bien compris le principe de flexbox a priori en faisant une <div> parent (div class=intro) cela permet de lui attribuer disposition:flex faisant que ce qui est contenu s'affiche sur l'axe X (row). mais partant de là je n'arrive pas à compléter correctement le CSS sur les <div> enfants (div class img_intro et text_intro pour que (vertical-align:middle n'a aucun effet)

Avec un peu plus de recule, est ce qu'il y a une méthode permettant avec un conteneur parent de gérer indépendamment chacun des conteneurs enfants sans qu'ils aient une incidence l'un sur l'autre (ce que j'ai essayé de faire avec mes <div> au final mais qui ne me semble pas fonctionner, mais qq chose de manière plus académique peut être..?)

voici le code utilisé:
 
<div class="intro"><!--dans cette partie il y aura une photo ID + à droite une introduction sur la même page home on aura aussi la work exp en dessous de l'intro-->
                                <div class="img_intro">
                                                <img src="img/cv_pix.jpg" alt="François"/>
                                </div>
                                <div class="intro_home">
                                        <p class="text_intro">"Overall, I support the delivery of projects by gathering, collating and articulating requirements. 
                                        <br>I facilitate communication between business and development and help steer the direction of the products by using user insights and best agile practices.
                                        All in an attempt to deliver an excellent user experience."</p> 
                                </div>                                   
                        </div>   



.intro{
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: center;

}
.img_intro {
float: left;
}
.intro_home {
    font-family: 'oswaldextra-light', Arial, Helvetica, sans-serif;
    font-size: 2em; 
    line-height: 1.5em;
    text-align: left;
    margin: 100px;
    vertical-align: middle;
        }


D'avance merci de l'aide Smiley smile , (et navré si ce n'est pas clair si besoin je peux être plus précis).
François
Modifié par Fraaa (07 Nov 2019 - 00:55)
Administrateur
Bonjour,

si tu veux que les 2 éléments soient "justifiés" horizontalement (l'un tout à gauche, l'autre tout à droite), c'est justify-content: space-between; (sur le flex container).
Si tu veux que ce soit centré verticalement, c'est align-items: center;

Tu peux consulter pour le centrage vertical Comment centrer verticalement sur tous les navigateurs ? (flexbox) et pour Flexbox la cheatsheet Flexbox de Raphaël et les liens qu'il a ajouté en bas.
J'ai consulté des centaines de fois le pense-bête Flexbox de CSS-Tricks Smiley biggrin

EDIT: enlève ce float, malheureux ! Smiley eek (je doute que ça ait un effet sur un flex item, mais ça reste une bonne raison de l'enlever)

EDIT2:
Fraaa a écrit :
est ce qu'il y a une méthode permettant avec un conteneur parent de gérer indépendamment chacun des conteneurs enfants

justify-self et align-self sur les flex items sont 2 propriétés qui permettent de modifier l'alignement de chaque flex item. Aide une grenouille !
Modifié par Felipe (07 Nov 2019 - 11:08)
Bonjour Felipe,

Super, merci pour tes conseils et le lien sur flexbox est très instructif.
align-items marche nickel Smiley smile

si tu veux que les 2 éléments soient "justifiés" horizontalement": j'aimerais dans mon cas précis que l'image soit alignée à gauche et que le paragraphe se situant à sa droite soit centré horizontalement/verticalement dans sa div --> mais je pense avoir compris vis à vis de ton message: j'ai donc rajouté l'attribut "align-self:center" et ça à l'air de fonctionner

Pour bien comprendre, car j'ai le résultat que je souhaite, mais plus pour la compréhension: vu que j'ai mis sur mon container (contenant mes items img & paragraphe) un "justify-content: center" comment se fait-il que mon image est alignée sur la gauche ? ne devrait elle pas se trouver au "centre de la gauche" (aligné dans sa div) du fait de l'attributs mentionné?

Sinon c'est noté pour le float Smiley cligne , merci !
Administrateur
1/ Je n'ai pas compris si le paragraphe (l'élément) devait être au centre de la page ou s'il devait occuper toute la place restante et que le texte soit centré (façon Word) ? Dans le dernier cas, c'est l'habituel text-align: center; pour jouer sur la typo.

2/ Si j'ai bien compris, parce que le texte (et l'image) prennent suffisamment de place pour occuper toute la largeur ?

Fiddle : (à ouvrir en Navigation privée de préférence) https://jsfiddle.net/aybh4otj/ (flemme de me connecter pour sauvegarder dans Codepen Smiley orange )

<div class="container">
  <div class="left">Ici une image</div>
  <div class="right">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum accusantium quidem et dolorum nihil vitae possimus quas illo blanditiis quos sequi repudiandae iusto ipsa reprehenderit laboriosam nam, incidunt maxime. Veniam.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum accusantium quidem et dolorum nihil vitae possimus quas illo blanditiis quos sequi repudiandae iusto ipsa reprehenderit laboriosam nam, incidunt maxime. Veniam.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum accusantium quidem et dolorum nihil vitae possimus quas illo blanditiis quos sequi repudiandae iusto ipsa reprehenderit laboriosam nam, incidunt maxime. Veniam.</p>
  </div>
</div>

<div class="container">
  <div class="left">Ici une image</div>
  <div class="right">
    <p>Court.</p>
  </div>
</div>


.container {
  display: flex;
  justify-content: center; /* N'a d'effet que si les flex items laissent de la place horizontalement */
  align-items: center;
  width: 40rem;
  margin-bottom: 1rem;
  background-color: lightyellow;
  outline: 3px double darkred;
}

.container > * {
  padding: 1rem;
  outline: 1px solid black;
}

.left {
  flex: none;
  margin-right: 10px;
}

.right {
  text-align: center;
}

Hello Felipe,

Merci pour tes explications!

Pour te répondre (en reprenant tes exemples):
1/ oui, le paragraphe doit occuper toute la place restante et je souhaite que le texte soit centré dans son conteneur: et oui nickel ça fonctionne pour le text-align !

2/ oui, le texte et l'image doivent prendre la largeur avec (je reprends tes éléments d'explication pour clarifier):
- "left" et "right" prennent toute la largeur du navigateur (viewport) et une hauteur arbitraire de 800px --> du coup j'ai mis un width 100% pour que "container" prenne toute la largeur je ne sais pas si c'est utile et je ne suis pas sur que que mes deux conteneurs enfant "right"/"left" prennent toute la largeur dispo dans "container".
- "left" contenant mon image ; celle-ci doit coller la gauche du conteneur (j'ai fait un test avec align-self:left ça fonctionne visuellement, je ne sais pas si cette solution est conventionnelle..?)
- "right" contenant le texte ; celui-ci doit effectivement être centré verticalement/horizontalement
j'ai fait une maquette pour etre plus explicite. upload/1573215449-77713-web1920ae1.png


Du coup, j'ai l'impression que ça fonctionne avec le code ci-dessous:


.container{
    margin: auto;
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.left{
        align-self:left;
}
.right{
    font-family: 'oswaldextra-light', Arial, Helvetica, sans-serif;
    font-size: 2em; 
    line-height: 1.5em;
    vertical-align: middle;
    margin: 5%;
    align-self: center ;


Autre question: si je souhaite que mon conteneur "left" soit finalement la largeur de mon image, et que le contreneur "right" prenne le reste de la largeur (donc deux conteneurs de largeur différente, prennant la largeur total dispo), dans ce cas dois-je simplement enlever l'attribut "justify-content:center"?

Hésite pas à me corriger au niveau du code car j'ai l’impression que j'ai des attributs inutiles et que c'est pas clean. en tout cas j'apprendre beaucoup grâce à ça!!

Merci encore pour tes réponses.

François
Modifié par Fraaa (08 Nov 2019 - 13:17)
Administrateur
a écrit :
- "left" contenant mon image ; celle-ci doit coller la gauche du conteneur (j'ai fait un test avec align-self:left ça fonctionne visuellement, je ne sais pas si cette solution est conventionnelle..?)
Smiley confuse align-* agit dans l'axe secondaire, ici vertical (aligné en haut ou en bas ou verticalement centré ou stretch…). C'est justify-* qui agit selon l'axe principal (et par défaut on a sur le flex container flex-direction: row;).

a écrit :
Autre question: si je souhaite que mon conteneur "left" soit finalement la largeur de mon image, et que le contreneur "right" prenne le reste de la largeur (donc deux conteneurs de largeur différente, prennant la largeur total dispo), dans ce cas dois-je simplement enlever l'attribut "justify-content:center"?

Le plus simple est de rendre "right" flexible (extensible) en largeur avec .right { flex-grow: 1; }.
Plus précisément, tout l'espace restant est réparti entre .right et euh c'est tout. Pas d'espace restant = rien à répartir mais ça tombe bien, c'est que c'est déjà comme souhaité Smiley smile
Si l'image se met à rétrécir quand il y a beaucoup de texte à droite, il faut empêcher le flex item (donc .left, pas l'image) de rétrécir avec .left { flex-shrink: 0; }.
Comme toute la largeur est occupée, la valeur de justify-content est pas super importante parce que toutes les valeurs reviennent au même ici.

Code > align-self ne sert à rien x2. Pour .left cf ci-dessus. Pour .right, la valeur définie est déjà celle définie via le flex container pour tous ses flex items. Si on voulait juste pour .right une autre valeur alors là oui ce serait utile (ça arrive tout le temps d'avoir des instructions inutiles quand on bidouille plein de solutions avant de trouver la bonne, les tests laissent des traces Smiley lol )
Meilleure solution
c'est noté, je vais essayer tout ça!
Merci beaucoup pour toutes tes explications claires et tes corrections Smiley cligne

François