28133 sujets

CSS et mise en forme, CSS3

bonjour
je commence le css et j'ai créer un bouton mais impossible de le centrer
j'ai essayer le "text-align: center;"ou le "margin: auto;" mais ça ne marche pas merçi d'avance upload/1700053674-86209-image2023-11-15140810162.png
Modifié par loupow (15 Nov 2023 - 14:09)
Modérateur
Bonjour,

Il y a des tas de manières de centrer un élément html, mais ça dépend du context.

Quel est ton code html et quel est ton code css (un extrait peut suffire) ?

Amicalement,
mon code html du bouton :
<a href="https://www.youtube.com/watch?v=PIAKxYG9Slg" target="_blank" class="bouton-lien">viéo Feldup</a>


le code css du bouton :
.bouton-lien {
text-align: center;
background-color: #e9e9ed;
border: 0.2px solid #8f8f9d;
border-radius: 5px;
padding: 3px;
color: black;
font-family:sans-serif;
font-size: small;
text-align: center;
text-decoration: none;
cursor: default;
display: block;
background-color: #719fee;
border-radius: 10px;
border: 4px double #1f69ec;
color: #ffffff;
text-align: center;
font-size: 20px;
padding: 10px;
width: 200px;
cursor: pointer;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
.bouton:hover
background-color: #ffffff;
border: 2px solid #1f69ec;
box-shadow: 10px 5px 5px #719fee;
color: #1f69ec;
text-align: center;
font-size: 22px;
text-align: center;
.container
border: 3px solid #3CC;
margin: 10px 10px;
padding: 10px; 
}
Mise en forme du code modifiée par parsimonhi
Modifié par parsimonhi (15 Nov 2023 - 15:42)
Modérateur
Bonjour,

Si tu veux centrer ton bouton, ça dépend dans quoi il est contenu. C'est quoi la balise html qui contient le bouton ? Et contient-elle aussi l'image ? Et quelle taille fait-elle ?

Amicalement,
le bouton est dans body et l'image je l'ai mit dans une div elle fait 500px
<body>
<h1>Les Backrooms</h1>
<div>
<img src="file:///C:/Users/toyestes/Downloads/zyro-image.png" width="500px">
</div>
<h2>voici une vidéo d'éxplication des backrooms </h2>
<a href="https://www.youtube.com/watch?v=PIAKxYG9Slg" target="_blank" class="bouton-lien">viéo Feldup </a>
</body>
Modérateur
Bonjour,

1) Il y a pas mal d'erreurs de syntaxe dans ton code css. Il faudrait le refaire proprement. Il manque en particulier des } et { avant et après .bouton:hover et avant et après .container.

2) Il y a des propriétés css en double. Par exemple on a plusieurs fois background-color pour .bouton-lien

3) Pour le centrage du lien (et une fois qu'il n'y aura plus d'erreurs de syntaxe dans le css car sinon le résultat ne sera pas ce que tu attends), le code suivant devrait suffire pour centrer le "bouton" :
.bouton-lien {
	display: block;
	margin: 0 auto;
}
Amicalement,
Meilleure solution
Bonjour,
(pendant que je rédige mon post, je vois que parsimonhi répondu, avec les mêmes remarques. Je poste quand même).
Deux fois text-align, deux fois padding,deuxfois background-color, deux fois border-radius, deux fois font-size, deux fois border. Le tout sans balise fermante avant une nouvelle class .bouton qui n'est ni ouverte ni fermée. Idem pour une nouvelle class .container qui est fermée mais pas ouverte. Ça fait pas mal de choses à voir avant d'aller plus loin. Et les transitions, elles vont où ?
Plus simple, pour commencer, en gardant tes mêmes valeurs :
<a href="https://www.youtube.com/watch?v=PIAKxYG9Slg" target="_blank" >vidéo Feldup</a>

a {
display:block;
width:10em;
margin:auto;
text-align:center;
background-color: #e9e9ed;
border: 0.2px solid #8f8f9d;
border-radius: 5px;
padding: 3px;
color: black;
text-decoration: none;
cursor: default;
border: 4px double #1f69ec;
font-size: 20px;
cursor: pointer;}

a:hover {
background-color: #ffffff;
border: 2px solid #1f69ec;
box-shadow: 10px 5px 5px #719fee;
color: #1f69ec;}

C'est un choix, d'avoir ciblé "a" plutôt que de mettre une class.
Modifié par Bongota (15 Nov 2023 - 16:48)
merci bongota pour ta réponse
j'ai quand même essayer ta solution mais le bouton n'est pas pareil l'intérieur est blanc alors que je le voudrais bleu ,je sais qu' il suffit de changer le bg color mais voila merci c'est sur que ça simplifie bien le code et le type n'est plus le même mais j'apprécie quand même ta réponse
et si il y'a plusieurs fois le même truc c'est que desfois j''ai choper quelque bout de code sur des sites pour m'aider
Modifié par loupow (15 Nov 2023 - 18:32)