28182 sujets

CSS et mise en forme, CSS3

[Résolu] Problème d'alignement (débutant un peu neuneu)

Bonjour,

je galère sur un pb de CSS (je suis assez débutant et c'est vraissemblablement une erreur de conception et de compréhension de ma part) Je ne cherche pas nécessairement une solution clé en main mais des explication sur mes erreurs et quelques pistes pour m'améliorer.

Je veux faire un interface web pour un µcontrôleur avec une page qui ressemble à ça :
upload/1708606150-85751-objectif.png

Pour le moment, je suis péniblement arrivé à ça :
upload/1708606183-85751-essai.png

Donc de gros problèmes d'alignements...

Mon code : 
<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Titre</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style3.css">
</head>
<body>
  <h1>Titre</h1>
  <p>Texte assez court, probablement quelques mots...</p>

  <div class="main">
    <div class="carre"><p>42,0 cm</p></div>
    <div class="rond"><p><a href="foobar.html">&#9654;</a></p></div>
  </div>
  
  <div id="menu">
    <div class="petitcarre"><p>&#9881;</p></div>
    <div class="petitcarre"><p>&#128200;</p></div>
    <div class="petitcarre"><p>&#128274;</p></div>
    <div class="petitcarre"><p>?</p></div>
  </div>
  <div id="bas"><p>mentions légales - <a href="junk">lien</a></p></div>
</body>


et le CSS : 
@font-face {
	font-family: "oxanium";
	src: url('Oxanium-Regular.ttf');
}
@font-face {
	font-family: "oxanium";
	font-weight: bold;
	src: url('Oxanium-Bold.ttf');
}
body {
  font-family: oxanium, Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  color: #2F4858;
  background-color: #B2D4E6;
  text-align: center;

}

.main {
    height: 12em;
    display: flex;
    justify-content: center;
}

.menu {
    height: 3em;
    display: flex;
    justify-content: center;
}

.carre {
  width: 10em;
  height: 10em;
  text-align: center;
  justify-content: center;
  border-radius: 15%;
  display: flex;
  background-color: #33658A;
  color: #fff;
}

.carre p {
  line-height: 0.5em;
  white-space: nowrap;
  font-size:200%;
}

.rond {
  width: 4em;
  height: 4em;
  text-align: center;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  display:flex;
  background-color: #900;
  color: #fff;
}

.rond p {
  line-height: 0.5em;
  font-size:200%;
}

.rond a{
  color:#FFF;
  text-decoration:none;
}
.rond a:hover
{
  color: #F6AE2D;
}

.petitcarre {
  width: 2em;
  height: 2em;
  text-align: center;
  justify-content: center;
  border-radius: 15%;
  display: flex;
  background-color: #aaa;
  color: #000;
}


Quelqu'un pourrait-il me mettre sur la piste ?

Merci
Modifié par ChristianW (22 Feb 2024 - 14:06)
Modérateur
Bonjour,

Tu y étais presque. Il fallait mettre un margin: 0 sur les balises <p> (par défaut, elles ont un margin, et ça perturbait ta mise en page). Et quand on met display: flex, on oublie les text-align: center (c'est le justify-content: center; qui remplie ce rôle). Et pour centrer verticalement, c'est align-items: center qu'on utilise.

Pour positionner le rond, on utilise un position: absolute avec right: -1.5em et bottom: -1.5em (à adapter éventuellement) pour qu'il vienne en bas à droite de son conteneur. Et pour le conteneur (qui devrait être une balise <main> mais qui est ici une <div> ayant pour classe "main") il ne faut pas oublier de lui ajouter un position: relative.

On obtient quelque chose du genre :
body {
  font-family: oxanium, Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  color: #2F4858;
  background-color: #B2D4E6;
  text-align: center;
}
.main {
  width: 10em;
  height: 10em;
  position: relative;
  margin: 0 auto;
}
.carre {
  width: 10em;
  height: 10em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15%;
  background-color: #33658A;
  color: #fff;
}
.carre p {
  font-size:200%;
}
.rond {
  position: absolute;
  right: -1.5em;
  bottom: -1.5em;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  display:flex;
  justify-content: center;
  align-items: center;
  background-color: #900;
  color: #fff;
}
.rond p {
  font-size: 200%;
  margin: 0;
  padding-left: 0.125em;
  padding-top: 0.0625em;
}
.rond a{
  color: #FFF;
  text-decoration:none;
}
.rond a:hover
{
  color: #F6AE2D;
}
#menu {
  display: flex;
  justify-content: center;
  margin: 3em 0;
  gap: 0.5em;
}
.petitcarre {
  width: 2em;
  height: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15%;
  background-color: #aaa;
  color: #000;
}

Amicalement,
Modifié par parsimonhi (22 Feb 2024 - 17:40)
Meilleure solution
Prévenir un modérateur
Répondre au sujet
Aller à