Problème flexbox HTML/CSS

Résolu

Ipoote Messages postés 45 Date d'inscription Statut Membre Dernière intervention -
Ipoote Messages postés 45 Date d'inscription Statut Membre Dernière intervention - 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 !

Afficher la suite

A voir également:

Problème flexbox HTML/CSS
Editeur html - Télécharger - HTML
Espace en html ✓ - Forum HTML
Espace html ✓ - Forum Webmastering
Html download - Télécharger - HTML
/Var/www/html/index.html ✓ - Forum Linux / Unix

2 réponses

Réponse 1 / 2

T3chN0g3n Messages postés 5247 Date d'inscription Statut Membre Dernière intervention 1 179

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 Statut Membre Dernière intervention

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

T3chN0g3n Messages postés 5247 Date d'inscription Statut Membre Dernière intervention 1 179 > Ipoote Messages postés 45 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention > T3chN0g3n Messages postés 5247 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention

T3chN0g3n Messages postés 5247 Date d'inscription Statut Membre Dernière intervention 1 179

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

Ipoote Messages postés 45 Date d'inscription Statut Membre Dernière intervention > T3chN0g3n Messages postés 5247 Date d'inscription Statut Membre Dernière intervention

Oui je te demandais juste pour les tuiles cliquables ^^

T3chN0g3n Messages postés 5247 Date d'inscription Statut Membre Dernière intervention 1 179 > Ipoote Messages postés 45 Date d'inscription Statut Membre Dernière intervention

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;
}

Ipoote Messages postés 45 Date d'inscription Statut Membre Dernière intervention > T3chN0g3n Messages postés 5247 Date d'inscription Statut Membre Dernière intervention

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 » ?

T3chN0g3n Messages postés 5247 Date d'inscription Statut Membre Dernière intervention 1 179 > Ipoote Messages postés 45 Date d'inscription Statut Membre Dernière intervention

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

Votre réponse

Discussions similaires