28114 sujets
CSS et mise en forme, CSS3
mon code html du bouton :
le code css du bouton :
Modifié par parsimonhi (15 Nov 2023 - 15:42)
<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;
}Modifié par parsimonhi (15 Nov 2023 - 15:42)
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>
<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>
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" :
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;
}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 :
C'est un choix, d'avoir ciblé "a" plutôt que de mettre une class.
Modifié par Bongota (15 Nov 2023 - 16:48)
(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)
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)