Alors je viens vers vous car je rencontre un soucis avec align-content. J'ai beau changé le paramètre en flex-end, stretch ou autre mais rien ne change sur ma page. J'ai pourtant mis des min-height et min-width comme j'ai pu le voir sur certain sujets qui avaient le même problème mais rien n'y fait.
Ci dessous mon code css, html et un aperçu dans chrome (j'ai également essayé avec edge mais le problème persiste).
Ne faites pas attention à la faute à conteneurE c'est volontaire
Comme vous pouvez le voir en commentaire dans le CSS, j'ai essayé d'utiliser .element:nth-child(x) mais impossible de le faire fonctionner, je ne sais pas si je m'y prend mal, il n'y a guère d'info à ce sujet sur la partie du cours HTML5 et CSS (partie flexbox), c'est donc pour ça qu'il est en commentaire.
Si quelqu'un a une idée de la source de mon problème je prend volontier, merci d'avance !
Merci à tous les deux pour vos réponses, j'ai pu résoudre mon problème !
Merci @breeza pour le nth-child, mon problème venait donc du fait que j'avais ajouté un id si j'ai bien compris ? Ensuite c'était une erreur de syntaxe de ma part. Et merci du conseil pour réduire mon nombre de ligne, j'ai trouvé le paramètre .element:nth-child(yn+x) avec x qui est le premier élément ciblé et y l'intervalle des prochains éléments sélectionnés.
Merci @AliasDmc, le problème était que je ne laissais pas assez de place à mes éléments pour "bouger" en fonction de mon align-content c'est bien ça ? Pour le nth-child je voulais m'en servir pour changer l'ordre de mes blocs (éléments) de couleurs, changer de couleur etc, mais du coup le problème est résolu !
Je n'arrive pas à vous mettre un pouce sur vos réponse hélas, cela me renvoi à mon profil à chaque fois. Je passe le sujet en résolu après votre confirmation que j'ai bien compris et pas recopié bêtement..
Je vous mets le code complet et l'aperçu en dessous si cela peut aider quelqu'un à l'avenir. (c'est juste un code qui me permet de tester le cours au fur et à mesures, il n'y pas vraiment de but à ce code)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="anothertest.css"/>
<title>AnotherTest</title>
</head>
<body>
<h1>Another Test </h1>
<p>Il avait d’abord commencé par récupérer des informations depuis l’ordinateur de David, puis il était allé les chercher sur Internet. Il avait lui-même programmé l’ordinateur de David afin d’avoir un premier lien vers le monde extérieur : la voix. Il pouvait entendre la voix de David, mais ne la comprenait pas. C’est alors qu’il a décidé d’aller lui-même à l’information. Il s’est alors ‘transporté’ sur Internet afin de choisir une nouvelle ‘maison’. Il lui a été beaucoup plus facile de programmer ce nouvel ordinateur afin d’entendre une nouvelle voix. Il avait d’abord commencé par récupérer des informations depuis l’ordinateur de David, puis il était allé les chercher sur Internet. Il avait lui-même programmé l’ordinateur de David afin d’avoir un premier lien vers le monde extérieur : la voix. Il pouvait entendre la voix de David, mais ne la comprenait pas. C’est alors qu’il a décidé d’aller lui-même à l’information. Il s’est alors ‘transporté’ sur Internet afin de choisir une nouvelle ‘maison’. Il lui a été beaucoup plus facile de programmer ce nouvel ordinateur afin d’entendre une nouvelle voix. Il avait d’abord commencé par récupérer des informations depuis l’ordinateur de David, puis il était allé les chercher sur Internet. Il avait lui-même programmé l’ordinateur de David afin d’avoir un premier lien vers le monde extérieur : la voix. Il pouvait entendre la voix de David, mais ne la comprenait pas. C’est alors qu’il a décidé d’aller lui-même à l’information. Il s’est alors ‘transporté’ sur Internet afin de choisir une nouvelle ‘maison’. Il lui a été beaucoup plus facile de programmer ce nouvel ordinateur afin d’entendre une nouvelle voix.</p>
<p class="test">Legénéralsortiunbadgeetsedirigeaversl’unedesportesentouréesdepeinturejauneIlglissalebadgedansla fente située à droite. La porte s’ouvrit. Une dizaine de militaires armées jusqu’aux dents étaient postés derrière.</p>
<p>UnlongsilencesefitdanslavoitureLechauffeurregardaitdroitdevantDavid jeta un œil sur le compteur qui affichait 210km/h. L’autoroute était déserte. Depuis la construction de la Ligne Grande Vitesse, les gens préféraient prendre les transports en communs, plus rapides et moins chers. La LGV traversait la France"" d'un bout à l'autre avec un arrêt à Paris.</p>
<p>« Prélude m’avait dit qu’il désirait connaître l’amour. Les ordinateurs n’ont pas de sentiments et l’amour n’est que sentiments. Il y a bien l’amour physique, mais sans les sentiments, cela ressemble davantage à un instinct de reproduction qu’à de l’amour. Un ordinateur n’a pas ce besoin de reproduction. Et pourquoi m’avoir choisi ? »</p>
<p>Florence venait d’avouer quelque chose qu’elle n’osait même pas dire à la personne concernée : David. « Son » David. Oui, elle l’aimait. Depuis qu’il avait emménagé à côté de chez elle, il y a de ça cinq ans. Depuis le premier regard, elle savait que c’était lui. Et à chaque fois la même chose : dès qu’elle parlait de lui, dès qu’elle pensait à lui, ses yeux brillaient.</p>
<div id="conteneur">
<div class="elment">Rouge</div>
<div class="elment">Vert</div>
<div class="elment">Violet</div>
<div class="elment">Orange</div>
<div class="elment">Bleu</div>
<div class="elment">Rose</div>
<div class="elment">Jaune</div>
<div class="elment">Cyan</div>
</div>
<div id="conteneure">
<div class="element rouge">Rouge</div>
<div class="element vert">Vert</div>
<div class="element violet">Violet</div>
<div class="element orange">Orange</div>
<div class="element bleu">Bleu</div>
<div class="element rose">Rose</div>
<div class="element jaune">Jaune</div>
<div class="element cyan">Cyan</div>
<div class="element rouge">Rouge</div>
<div class="element vert">Vert</div>
<div class="element violet">Violet</div>
<div class="element orange">Orange</div>
<div class="element bleu">Bleu</div>
<div class="element rose">Rose</div>
<div class="element jaune">Jaune</div>
<div class="element cyan">Cyan</div>
<div class="element rouge">Rouge</div>
<div class="element vert">Vert</div>
<div class="element violet">Violet</div>
<div class="element orange">Orange</div>
<div class="element bleu">Bleu</div>
<div class="element rose">Rose</div>
<div class="element jaune">Jaune</div>
<div class="element cyan">Cyan</div>
<div class="element rouge">Rouge</div>
<div class="element vert">Vert</div>
<div class="element violet">Violet</div>
<div class="element orange">Orange</div>
<div class="element bleu">Bleu</div>
<div class="element rose">Rose</div>
<div class="element jaune">Jaune</div>
<div class="element cyan">Cyan</div>
<div class="element rouge">Rouge</div>
<div class="element vert">Vert</div>
<div class="element violet">Violet</div>
<div class="element orange">Orange</div>
</div>
<div id="conteneur2">
<div class="elemente">Rouge</div>
<div class="elemente">Bleu</div>
<div class="elemente">Blanc</div>
</div>
Mis à part le faite que tu puisses écrire ce bout de code afin de ne pas réécrire de partout les dimensions et que le résultat voulu fonctionne c'est ok
D'accord c'est noté je te remercie ! Merci pour vos réponse, sujet clos !
Pb avec align-content et .element:nth-child(x);
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Solution trouvée ? => petit pouce + passer le sujet en Résolu :)
Solution trouvée ? => petit pouce + passer le sujet en Résolu :)
Solution trouvée ? => petit pouce + passer le sujet en Résolu :)