[Résolu] Image/icon sur un bouton

Question

MontBlanc

24 May 2023 à 15:57

Bonjour à tous,
je cherche comment bien positionner les images sur mes boutons à gauche du texte,
vous avez une idée, une piste ?
https://codepen.io/MontBlanc73/pen/LYgqVZe

Mathieuu

24 May 2023 à 16:54

Salut,

on ne voit pas les images sur le codepen, du coup j'ai essayé en remplaçant par des images trouver en ligne et en leur donnant une taille, ça apparaît bien à gauche du texte du bouton:

<button class="btn btn_roll"><img src="https://www.svgrepo.com/show/165646/reload.svg" style="width:1em"/>Roll dice</button>
      <button class="btn btn_hold"><img src="https://www.svgrepo.com/show/414378/hold.svg" style="width:1em"/>Hold</button>

Il faudrait préciser ce que tu entends par "bien positionner".

uniuc

24 May 2023 à 17:10

Bonjour,

Perso je partirais sur 3 sections, je flex la section central en column, je vire la class btn, j'aligne les margin-top, je colle une class sur les images pour leurs donner la même taille.

C'est une idée de base.
Comme j'ai fait ici :


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		body {
    font-family: "Lato", sans-serif;
    background-color: #eee;
    border: 10px solid #a4733e;
    display: flex;
    align-items: center;
    justify-content: center;
}

main {
    position: relative;
    width: 100rem;
    height: 60rem;
    display: flex;
}

.player {
    flex: 50%;
    padding: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.75s;
    transition: all 0.75s;
}

.name {
    position: relative;
    font-size: xx-large;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 2px;
    font-weight: 300;
    margin-bottom: 1rem;
}

.score {
    font-size: 80px;
    font-weight: 300;
    color: #f80800;
    margin-top: 5px;
}


button:hover {
    color: black;
    font-size: larger;
}
  .btn_sec{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 110px;

}

.btn_new {
	display: flex;
	flex-direction: column;
	align-items: center;
    margin-top: 45px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    font-size: large;
    color: gray;
    background-color: #eee;
    cursor: pointer;
    

    
}
.btn_new_img{
	width: 15px;
    height: 15px;
}

.btn_roll {
    margin-top: 380px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    font-size: large;
    color: gray;
    background-color: #eee;
    cursor: pointer;
    
}

.btn_hold {
    margin-top: 20px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    font-size: large;
    color: gray;
    background-color: #eee;
    cursor: pointer;
}

.btn:focus {
    outline: none;
}

.dice {
    position: absolute;
    left: 50%;
    top: 16.5rem;
    transform: translateX(-50%);
    height: 8rem;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
}

.player_winner .name {
    font-weight: 700;
    color: #f80800;
}

.hidden {
    display: none;
}

.current {
    margin-top: 100px;
    background-color: #f80800;
    color: #fff;
    width: 30%;
    text-align: center;
    transition: all 0.75s;
    padding: 3px;
}

.current_label {
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-size: 15px;
    color: black;
}

.current_score {
    font-size: 25px;
}

	</style>

</head>
<body>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Game js</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400&display=swap" rel="stylesheet">
  </head>  

  <body>
    <main>
      <section class="player player_0 player_active">
        <h2 class="name" id="name_0">Player 1</h2>
        <p class="score" id="score_0">0</p>
        <div class="current">
          <p class="current_label">Current</p>
          <p class="current_score" id="current_0">0</p>
        </div>
      </section>

<section class="btn_sec">

	
      <button class="btn btn_new"><img class="btn_new_img" src="https://cdn.pixabay.com/photo/2022/04/13/04/57/fruit-7129434_1280.png" alt="new-game"/> New Game</button>
      <img src="./img/dice-1.png" alt="Playing dice" class="dice"/>
      <button class="btn btn_roll"><img class="btn_new_img" src="https://cdn.pixabay.com/photo/2022/04/13/04/57/fruit-7129434_1280.png"/>Roll dice</button>
      <button class="btn btn_hold"><img  src="#"/>Hold</button>
	
</section>


      <section class="player player_1">
        <h2 class="name" id="name_1">Player 2</h2>
        <p class="score" id="score_1">0</p>
        <div class="current">
          <p class="current_label">Current</p>
          <p class="current_score" id="current_1">0</p>
        </div>
      </section>

      
    </main>
    <script src="app.js"></script>
  </body>
  </html>
</body>
</html>

Modifié par uniuc (24 May 2023 - 17:10)

MontBlanc

24 May 2023 à 17:36

Mathieuu a écrit :
Salut,

on ne voit pas les images sur le codepen, du coup j'ai essayé en remplaçant par des images trouver en ligne et en leur donnant une taille, ça apparaît bien à gauche du texte du bouton:
&lt;button class="btn btn_roll"&gt;&lt;img src="https://www.svgrepo.com/show/165646/reload.svg" style="width:1em"/&gt;Roll dice&lt;/button&gt;
      &lt;button class="btn btn_hold"&gt;&lt;img src="https://www.svgrepo.com/show/414378/hold.svg" style="width:1em"/&gt;Hold&lt;/button&gt;
Il faudrait préciser ce que tu entends par "bien positionner".

pour expliquer

chez moi les images des boutons newgame roll dice et hold ne sont pas bien centrées par rapport au texte

MontBlanc

24 May 2023 à 17:36

uniuc

24 May 2023 à 17:46

J'avais pas fait gaffe que tu les voulaient à gauche du texte.

Tu veux leurs donner quelle taille en pixel à tes images ?

Tiens test ca


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		body {
    font-family: "Lato", sans-serif;
    background-color: #eee;
    border: 10px solid #a4733e;
    display: flex;
    align-items: center;
    justify-content: center;
}

main {
    position: relative;
    width: 100rem;
    height: 60rem;
    display: flex;
}

.player {
    flex: 50%;
    padding: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.75s;
    transition: all 0.75s;
}

.name {
    position: relative;
    font-size: xx-large;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 2px;
    font-weight: 300;
    margin-bottom: 1rem;
}

.score {
    font-size: 80px;
    font-weight: 300;
    color: #f80800;
    margin-top: 5px;
}


button:hover {
    color: black;
    font-size: larger;
}
  .btn_sec{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 400px;

}

.btn_new {
	display: flex;
	align-items: center;
    margin-top: 45px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    font-size: large;
    color: gray;
    background-color: #eee;
    cursor: pointer;
    

    
}
.btn_new_img{
	width: 15px;
    height: 15px;
    margin-right: 12px;
}

.btn_roll {
    margin-top: 430px;
    padding:0;
    border: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    font-size: large;
    color: gray;
    background-color: #eee;
    cursor: pointer;
    
}

.btn_hold {
    margin-top: 50px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    font-size: large;
    color: gray;
    background-color: #eee;
    cursor: pointer;
}

.btn:focus {
    outline: none;
}

.dice {
    position: absolute;
    left: 50%;
    top: 16.5rem;
    transform: translateX(-50%);
    height: 8rem;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
}

.player_winner .name {
    font-weight: 700;
    color: #f80800;
}

.hidden {
    display: none;
}

.current {
    margin-top: 100px;
    background-color: #f80800;
    color: #fff;
    width: 30%;
    text-align: center;
    transition: all 0.75s;
    padding: 3px;
}

.current_label {
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-size: 15px;
    color: black;
}

.current_score {
    font-size: 25px;
}

	</style>

</head>
<body>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Game js</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400&display=swap" rel="stylesheet">
  </head>  

  <body>
    <main>
      <section class="player player_0 player_active">
        <h2 class="name" id="name_0">Player 1</h2>
        <p class="score" id="score_0">0</p>
        <div class="current">
          <p class="current_label">Current</p>
          <p class="current_score" id="current_0">0</p>
        </div>
      </section>

<section class="btn_sec">

	
      <button class="btn btn_new"><img class="btn_new_img" src="https://cdn.pixabay.com/photo/2022/04/13/04/57/fruit-7129434_1280.png" alt="new-game"/> New Game</button>
      <img src="./img/dice-1.png" alt="Playing dice" class="dice"/>
      <button class="btn btn_roll"><img class="btn_new_img" src="https://cdn.pixabay.com/photo/2022/04/13/04/57/fruit-7129434_1280.png"/>Roll dice</button>
      <button class="btn btn_hold"><img  src="#"/>Hold</button>
	
</section>


      <section class="player player_1">
        <h2 class="name" id="name_1">Player 2</h2>
        <p class="score" id="score_1">0</p>
        <div class="current">
          <p class="current_label">Current</p>
          <p class="current_score" id="current_1">0</p>
        </div>
      </section>

      
    </main>
    <script src="app.js"></script>
  </body>
  </html>
</body>
</html>

Modifié par uniuc (24 May 2023 - 18:41)

MontBlanc

24 May 2023 à 18:50

Je voudrais qu'elles fassent 30x30

uniuc

24 May 2023 à 20:22

Tiens alors là c'est <span> qui va permettre de calibrer la hauteur du texte par rapport à l'image.
Si tu vois que le problème se pose sur une autre de tes image tu change la class du <span> pour ajuster le texte à l'image qui pose problème.
Je l'ai fait sur le principe des 3 sections, mais l'idée devrait etres fonctionel avec ton code de base.


<button class="btn btn_hold"><img class="btn_img" src=""/><span class="margImg">Hold</span></button>

margImg va permettre de caler en hauteur ton texte, tu peux faire margImg margImg2 etc,
après cela tu va agencer comme tu le desir, c'est fonctionnel sur tout les navigateurs.
Pour que cela fonctionne tes bnt_new, roll, hold, doivent etre en display flex et align-items center.

Par exemple sur ton codepen, une fois les diplay: flex;, et align-items: center; ajouté sur tes boutons tu pose un <span class="margImg"> sur tes textes d'image</span> et tu applique un .


margImg{
    margin-top: -2px;
}


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        body {
    font-family: "Lato", sans-serif;
    background-color: #eee;
    border: 10px solid #a4733e;
    display: flex;
    align-items: center;
    justify-content: center;
}

main {
    position: relative;
    width: 100rem;
    height: 60rem;
    display: flex;
}

.player {
    flex: 50%;
    padding: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.75s;
    transition: all 0.75s;
}

.name {
    position: relative;
    font-size: xx-large;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 2px;
    font-weight: 300;
    margin-bottom: 1rem;
}

.score {
    font-size: 80px;
    font-weight: 300;
    color: #f80800;
    margin-top: 5px;
}


button:hover {
    color: black;
    font-size: larger;
}
  .btn_sec{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;

}

.btn_new {
    display: flex;
    align-items: center;
    margin-top: 45px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    font-size: large;
    color: gray;
    background-color: #eee;
    cursor: pointer;
    

    
}
.btn_img{
    width: 30px;
    height: 30px;
    margin-right: 12px;
}
.margImg{
    margin-top: 6px;
}


.btn_roll {
    display: flex;
    align-items: center;
    margin-top: 430px;
    padding:0;
    border: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    font-size: large;
    color: gray;
    background-color: #eee;
    cursor: pointer;
    
}

.btn_hold {
    display: flex;
    align-items: center;
    margin-top: 50px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    font-size: large;
    color: gray;
    background-color: #eee;
    cursor: pointer;
}

.btn:focus {
    outline: none;
}

.dice {
    position: absolute;
    left: 50%;
    top: 16.5rem;
    transform: translateX(-50%);
    height: 8rem;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
}

.player_winner .name {
    font-weight: 700;
    color: #f80800;
}

.hidden {
    display: none;
}

.current {
    margin-top: 100px;
    background-color: #f80800;
    color: #fff;
    width: 30%;
    text-align: center;
    transition: all 0.75s;
    padding: 3px;
}

.current_label {
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-size: 15px;
    color: black;
}

.current_score {
    font-size: 25px;
}

    </style>

</head>
<body>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Game js</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400&display=swap" rel="stylesheet">
  </head>  

  <body>
    <main>
      <section class="player player_0 player_active">
        <h2 class="name" id="name_0">Player 1</h2>
        <p class="score" id="score_0">0</p>
        <div class="current">
          <p class="current_label">Current</p>
          <p class="current_score" id="current_0">0</p>
        </div>
      </section>

<section class="btn_sec">

    
      <button class="btn btn_new"><img class="btn_img" src="https://cdn.pixabay.com/photo/2022/04/13/04/57/fruit-7129434_1280.png" alt="new-game"/><span class="margImg"> New Game</span></button>
      <img src="./img/dice-1.png" alt="Playing dice" class="dice"/>
      <button class="btn btn_roll"><img class="btn_img" src="https://cdn.pixabay.com/photo/2022/04/13/04/57/fruit-7129434_1280.png"/><span class="margImg">Roll dice</span></button>
      <button class="btn btn_hold"><img class="btn_img" src="https://cdn.pixabay.com/photo/2022/04/13/04/57/fruit-7129434_1280.png"/><span class="margImg">Hold</span></button>
    
</section>


      <section class="player player_1">
        <h2 class="name" id="name_1">Player 2</h2>
        <p class="score" id="score_1">0</p>
        <div class="current">
          <p class="current_label">Current</p>
          <p class="current_score" id="current_1">0</p>
        </div>
      </section>

      
    </main>
    <script src="app.js"></script>
  </body>
  </html>
</body>
</html>

Modifié par uniuc (24 May 2023 - 20:52)

MontBlanc

25 May 2023 à 09:31

merci, super ça fonctionne

Mathieuu

25 May 2023 à 09:40

Salut,

hum j'ai l'impression qu'il te fallait juste ça Smiley sweatdrop

: https://www.alsacreations.com/astuce/lire/4-comment-aligner-verticalement-une-image-et-une-ligne-de-texte.html (de ce que j'en comprends je dirais vertical-align:middle; )

MontBlanc

25 May 2023 à 11:36

Salut,

merci, je testerai

Prévenir un modérateur

Répondre au sujet

CSS et mise en forme, CSS3

[Résolu] Image/icon sur un bouton