Bonjour,

Je suis dans la création de mon site et j'ai eu un problème pour centrer mon bouton mem si la fenêtre change de résolution.
Voici les photo des erreur.

En taille normal :

avec la fenêtre en plus petit :

Si vous possédé la solution je veut bien.

-
Edité par DertyOfficiel 12 décembre 2021 à 17:01:58

bonjour,

>> Si vous possédé la solution je veut bien.

Sans ton code impossible d'en dire quelque chose!!! Comment est centrer ton bouton dans la version desktop et qu'est ce qui varie en version mobile?

Voici mon code html :

<!-- Button -->	
	<button class="bubbly-button"><a href="./game/index.html">Go to</a></button>

	<script  src="./script_button.js"></script>

Une partie du css :

body {
  font-size: 16px;
  font-family: "Helvetica", "Arial", sans-serif;
  text-align: center;
}

  button {
    display: flex;
    margin: -50px ;
  }
p {
    font-size: 1.2rem;
    font-family: sans-serif;
    line-height: 1.4;
  }
  
  a {
    outline: none;
    text-decoration: none;
    padding: 2px 1px 0;
  }
  
  a:link {
    color: #ffff;
  }
  
  a:visited {
    color: #333;
  }

Bonjour, passez votre code au validateur pour voir et corriger vos erreurs =>  https://validator.w3.org/

Les balises <button> et <a> sont des éléments interactif, on ne place pas l'un dans l'autre, c'est soit l'un soit l'autre.

Les balises <button> et <a> sont des éléments interactif, on ne place pas l'un dans l'autre, c'est soit l'un soit l'autre.

par quel code vous auriez remplacer ?

Bonjour,

quelle est l'action que tu veux donner à ton bouton ? Si c'est "se déplacer", c'est un <a> que tu veux, sinon, c'est un <button> avec un peu de JavaScript. Ceci devrait répondre à ta question "par quel code vous auriez remplacer ?".

Lamecarlate a écrit:

Bonjour,

quelle est l'action que tu veux donner à ton bouton ? Si c'est "se déplacer", c'est un <a> que tu veux, sinon, c'est un <button> avec un peu de JavaScript. Ceci devrait répondre à ta question "par quel code vous auriez remplacer ?".

Mon js ne sert que à faire une animation et le css aussi avec des modif esthétique. Il faut savoir que ce bouton est un bouton de redirection. Je pense qu'il est donc préférable que je garde le <button>

> bouton de redirection

C'est-à-dire qu'il envoie vers une autre page ?

Lamecarlate a écrit:

> bouton de redirection

C'est-à-dire qu'il envoie vers une autre page ?

oui c'est ça (dans un sous dossier), vers une autre page de mon site

-
Edité par DertyOfficiel 12 décembre 2021 à 19:13:17

Dans ce cas, comme dit plus haut, c'est un <a>, pas un <button>.

Bonjour, j'ai pu faire tout ce que vous m'avez conseiller mais rien à faire. Je ne trouve pas comment centre mon bouton.

je vous donne l'url de mon site, si vous souhaitez aller voir tout mon code : SITE

Je vais essayer de chercher encore mais bon c'est embêtant je n'arrive pas à comprendre.

Bonjour, tu as une position relative sur ce bouton, retire la ce n'est pas comme cela que l'on positionne les éléments. On les positionnent les un par rapport au autre, et non pas par rapport à un point fixe (qui est dans ce cas le bord haut  gauche du body, soit le plus proche parent positionner).

Retire également height: 100%; sur le body.

Tu constates que le bouton est situé sur la droite du compteur, c'est normal puisque ton body est en flex, ajoute lui flex-direction: column;

On a perdu le centrage vertical du contenu, tu peux ajouter margin-top: 25vh;  par exemple au body pour cette page.

-
Edité par AbcAbc6 18 décembre 2021 à 18:15:10

Bonsoir, 

tu veux le centrer verticalement ? horizontalement ? les deux ? par rapport à la totalité de la fenêtre ? par rapport à autre chose ?

j'ai regardé le CSS, ça ne va pas du tout en effet, je parle de la class .bubbly-button

Pour le centrage vertical, je conseille justify-content: center; sur body (en ajoutant min-height: 100% à body, note le "min-"), en ayant pris compte des judicieuses remarques de AbcAbc6.

-
Edité par Lamecarlate 18 décembre 2021 à 18:34:40