Problème flexbox HTML/CSS

Résolu/Fermé

Ipoote Messages postés 45 Date d'inscription dimanche 23 septembre 2018 Statut Membre Dernière intervention 21 mai 2023 - 15 avril 2022 à 10:22
Ipoote Messages postés 45 Date d'inscription dimanche 23 septembre 2018 Statut Membre Dernière intervention 21 mai 2023 - 19 avril 2022 à 17:29

Bonjour,

Je viens sur ce forum afin d'obtenir de l'aide sur un code HTML/CSS pour un projet de site web.
Je m'explique,

Le problème est que je n'arrive pas à remonter le texte "PHASE 1" sur chaque partie, sûrement un problème de flexbox. Sauf qu'après avoir passé beaucoup de temps à trouver une solution à ce problème, je n'y arrive toujours pas et c'est pourquoi je me tourne vers vous.

Voici le code qui, je pense, pose problème :

HTML :


<ul class = phases>
  <li class = phase id = phase1><a href="phase1.html">PHASE 1</a></li> 
  <li class = phase id = phase2><a href="phase2.html">PHASE 2</a></li>
  <li class = phase id = phase3><a href="phase3.html">PHASE 3</a></li>
  <li class = phase id = phase4><a href="phase4.html">PHASE 4</a></li>
</ul>

CSS :


.phases{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 40px;
  text-align: center;
  margin: 100px;
}

.phases a{
  text-decoration: none;
  color: #ffffff;
}

.phase{
  flex: 1 1 45%;
  padding: 30px;
  margin: 5px;
  height: 250px; 
  border-radius: 10% / 90%;
}

#phase1{
  background-color: #a02929;
  background-image: url("../images/phase1.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top 50px;
  border: 3px solid black;
}

J'ai essayé de modifier plus ou moins la position de chaque classe/id dans mon CSS, mais étant débutant dans le domaine je n'arrive pas exactement à savoir lequel modifier, et surtout ce que je dois modifier.

Merci beaucoup !

A voir également:

Problème flexbox HTML/CSS
Editeur html - Télécharger - HTML
&Nbsp html - Forum HTML
Espace en html - Astuces et Solutions
Faire un trait horizontal html css ✓ - Forum CSS
Espace html ✓ - Forum HTML

2 réponses

Réponse 1 / 2

T3chN0g3n Messages postés 5103 Date d'inscription samedi 16 février 2019 Statut Membre Dernière intervention 18 décembre 2024 1 139
15 avril 2022 à 12:12

Bonjour,

Je pense que c'est la propriété padding, mais ça mériterait une petite mise au propre tout ça ^^
https://developer.mozilla.org/fr/docs/Web/CSS/padding

Cdlt.

Ipoote Messages postés 45 Date d'inscription dimanche 23 septembre 2018 Statut Membre Dernière intervention 21 mai 2023
15 avril 2022 à 12:31

Tu entends quoi par mise au propre exactement ?
Comment je pourrais améliorer mon code ?

T3chN0g3n Messages postés 5103 Date d'inscription samedi 16 février 2019 Statut Membre Dernière intervention 18 décembre 2024 1 139 > Ipoote Messages postés 45 Date d'inscription dimanche 23 septembre 2018 Statut Membre Dernière intervention 21 mai 2023
Modifié le 15 avril 2022 à 15:02

J'avoue que j'ai lu un peut vite. C'est surtout le fait que tout s'appel "phase" que j'ai pas trouvé très claire au début. J'aurais bien vu des noms un peut plus parlant type menu_phases, bouton_phase, ...

Sinon il y'a moyen de synthétiser un peut en supprimant la classe "phase" et en mettant:

.phases li{
  flex: 1 1 45%;
  padding: 4px;
  margin: 5px;
  height: 250px; 
  border-radius: 10% / 90%;
  background-color: #a02929;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top 50px;
  border: 3px solid black;
}

Ca pourrait permettre de pas mettre la classe à chaque fois pour chaque élément de la liste, et de ne préciser que l'image:

<ul class="phases">
  <li id="phase1"><a href="phase1.html">PHASE 1</a></li> 
  <li id="phase2"><a href="phase2.html">PHASE 2</a></li>
  <li id="phase3"><a href="phase3.html">PHASE 3</a></li>
  <li id="phase4"><a href="phase4.html">PHASE 4</a></li>
</ul>

#phase1{
  background-image: url("../images/phase1.jpg");
}

#phase2{
  background-image: url("../images/phase2.jpg");
}

#phase3{
  background-image: url("../images/phase3.jpg");
}

#phase4{
  background-image: url("../images/phase4.jpg");
}

Après au delà d'une "mise au propre", il y'a moyen d'améliorer, par exemple faire en sorte que chaque tuile soit entièrement cliquable et pas juste le texte ... Mais je sais bien que c'est en cours de développement ! :p

Ipoote Messages postés 45 Date d'inscription dimanche 23 septembre 2018 Statut Membre Dernière intervention 21 mai 2023 > T3chN0g3n Messages postés 5103 Date d'inscription samedi 16 février 2019 Statut Membre Dernière intervention 18 décembre 2024
15 avril 2022 à 15:19

Oui exact, après je me suis dit que c'était un projet perso et que du coup tant que je me comprenais moi-même c'était le plus important ^^.
En tout cas merci pour la petite synthèse, c'est vrai que je n'y avais pas pensé et que ça rend le tout un peu plus lisible. :)

Oui c'est aussi quelque chose que j'aurais bien voulu faire la dernière fois que je me suis penché sur le sujet, mais je n'y étais pas arrivé, du coup si tu as la solution ou une explication sur comment faire je suis preneur !

Réponse 2 / 2

Ipoote Messages postés 45 Date d'inscription dimanche 23 septembre 2018 Statut Membre Dernière intervention 21 mai 2023
19 avril 2022 à 14:28

T3chN0g3n Messages postés 5103 Date d'inscription samedi 16 février 2019 Statut Membre Dernière intervention 18 décembre 2024 1 139
19 avril 2022 à 14:40

Comment ça Up ? Je pensais que c'était résolu ? Réduire l'écart supérieur (le padding ) n'a pas suffit ?

Oui je te demandais juste pour les tuiles cliquables ^^

Alors tu peut ajouter

 display:block;

au CSS des ancres pour qu'elles "remplissent" toute la place, et par contre il faut aussi déplacer la hauteur des éléments de la liste

 height: 250px;

car ça semble interférer sinon, ont a donc :

.phases li{
  flex: 1 1 45%;
  margin: 5px;
  border-radius: 10% / 90%;
  background-color: #a02929;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top 50px;
  border: 3px solid black;
}

.phases a{
  height: 250px; 
  padding: 2px;
  display:block;
  text-decoration: none;
  color: #ffffff;
}

Le problème est que dans ma consigne il est indiqué que le site doit être positionné par flexbox, tu entends quoi par « les ancres » ?

Ba ça change pas le flex de la liste ...

Tu nous avait pas dit que c'était un exercice !

Les ancres : https://developer.mozilla.org/fr/docs/Web/HTML/Element/a

Discussions similaires