27653 sujets

CSS et mise en forme, CSS3

Hello à tous,

Avant tout je suis junior, soyez indulgent Smiley smile

Je rencontre un souci au niveau de mes button, j'ai attribué une class à mes " button afin d'avoir le même padding, mais ça ne marche pas et au contraire pour les deux derniers button le css prends en compte la largeur du texte et non le padding attribué.

Avez-vous déjà rencontré ce problème ? Je souhaite une piste Smiley confus , mais je fais tout de même des recherches à coté sur les sites w3school ect

 <section>
        <h2>Fonctionnement</h2>

        <div class="First-section">
          <div>
            <span class="number">1</span><i class="fas fa-mobile-alt"></i
            ><button class="btn">Choissisez le thème du restaurant </button>
          </div>
          <div>
            <span class="number">2</span><i class="fas fa-list-ul"></i
            ><button class="btn">Composez votre menu</button>
          </div>
          <div>
            <span class="number">3</span><i class="fas fa-store"></i>
            <button class="btn">Dégustez au restaurants</button>
          </div>
        </div>
      </section>


.btn {
  border: 2px solid #f0f2f2;
  border-radius: 1rem;
  padding: 15px 50px;
  font-weight: bold;
  background: #f0f2f2;
  box-shadow: 1px 1px 12px #ded9d9;
  margin: 10px;
}


Bonne soirée à vous
Modérateur
Bonsoir,

les espaces que tu as entre tes balises différent, un coup elles se touchent, un coup non , tu as là déjà un espace blanc d'écart (le même qu'il y a entre deux mots).
Tu as aussi des icônes de différentes largeurs , tu peut éventuellement leurs donner une largeur de 2 à 4 ch(ou autre valeur) de largeur avec éventuellement un text-align si tu veut les aligner autrement qu'a gauche.

Cdt,
GC
Modifié par gcyrillus (26 Apr 2021 - 01:03)
Bonjour,

Merci pour les pistes Smiley smile , j'ai rectifié les espaces et les tailles des favicon mais, ça ne bouge pas, je vais voir si j'ai pas un souci dans mes margin et padding.

Cdt,
Administrateur
Bonjour,

je ne sais pas quel est le résultat souhaité et n'ai pas compris largeur du texte vs padding (sans forcer de largeur, la largeur d'un élément c'est le contenu + le padding + les bordures) mais quelques pistes :
- dans les Devtools du navigateur (F12), préciser que l'on souhaite voir les styles par défaut, ceux du navigateur (dans Firefox : F12 puis F1 puis Inspecteur / cocher "Afficher les styles du navigateur").
- ajouter des background-color et des outline sur tous les éléments

.First-section { outline: 1px solid red; }
.First-section > div { outline: 1px dashed blue; }
.number { background-color: pink; }
.fas { background-color: lightblue; }
.btn { outline: 1px dotted darkgreen; }


edit:
- est-ce que l'élément est un flex item ou un grid item ? Ca se voit dans les Devtools avec la petite pastille / cartouche "(flex)" ou "(grid)" dans les Devtools de Firefox et je crois à présent dans les autres navigateurs également.
Modifié par Felipe (26 Apr 2021 - 14:30)
Bonjour,

Merci pour les pistes, avec les Devtools je vais mieux voir mes erreurs, tout d'abord je fais de manière first-mobile et j'ai pu voir que la balise button n'est pas la bonne , mais les ul seront mieux adaptée, et je suis en flex item.

Je n'avais pas compris pourquoi chaque bouton ne prenne pas la même largeur lorsque que j'attribuais la propriété border-raduis accompagné des padding, j'ai trouvé mes erreurs , c'est mieux que je code en div en insérant des ul et je vais voir le résultat.
Maintenant je dois centrer mais ul li et laisser de l'espace à droite et à gauche.

Désolée pour l'explication un peu brouillon du début.
:) merci de l'aide.