Problème boutton/image CSS
Résolu/Fermé
antoinegdln4
-
5 déc. 2013 à 11:28
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 7 déc. 2013 à 05:44
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 7 déc. 2013 à 05:44
A voir également:
- Problème boutton/image CSS
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Google recherche par image - Guide
- Faststone image viewer - Télécharger - Visionnage & Diaporama
- Image - Guide
17 réponses
salim_1305
Messages postés
60
Date d'inscription
lundi 18 novembre 2013
Statut
Membre
Dernière intervention
7 novembre 2018
1
Modifié par salim_1305 le 5/12/2013 à 15:10
Modifié par salim_1305 le 5/12/2013 à 15:10
tu peux essayé cela
html
<div id="bouton" <a href="url">Link text</a>><div>
#bouton{
widht:50px;/* exemple*/
height:30px;
background: url(image01) no-repeat center;
}
#bouton:hover{
background: url(image02);
}
#bouton:active{
backgroud: url(image03);
}
html
<div id="bouton" <a href="url">Link text</a>><div>
#bouton{
widht:50px;/* exemple*/
height:30px;
background: url(image01) no-repeat center;
}
#bouton:hover{
background: url(image02);
}
#bouton:active{
backgroud: url(image03);
}
antoinegdln4
Messages postés
33
Date d'inscription
mardi 28 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2016
1
5 déc. 2013 à 16:52
5 déc. 2013 à 16:52
Ca marche pas comme je veux.. En fait je voudrais un bouton de la forme de l'imaga..
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
5 déc. 2013 à 18:19
5 déc. 2013 à 18:19
Salut
heuuu l image a part carree ou rectangle , quelle forme crois tu qu elle a ????
a+
je voudrais un bouton de la forme de l'image.
heuuu l image a part carree ou rectangle , quelle forme crois tu qu elle a ????
a+
Bon je vais être plus précis !
Je voudrais faire un bouton en forme de boule de Noel, avec le CSS.. Ya pas n moyen via une image ?
Je voudrais faire un bouton en forme de boule de Noel, avec le CSS.. Ya pas n moyen via une image ?
Nhay
Messages postés
838
Date d'inscription
vendredi 2 novembre 2012
Statut
Membre
Dernière intervention
17 décembre 2015
126
5 déc. 2013 à 18:43
5 déc. 2013 à 18:43
En gros, tu aimerai qu'on ne puissent pas cliquer autour de ta boule c'est ça ?
Si c'est tout rond, tu peut tenter un border-radius (Et un display:block sur le lien si ton image est en background + height/width de dimension)
Si je fais fausse route, dit-le, j'suis pas certain d'avoir tout compris :)
Si c'est tout rond, tu peut tenter un border-radius (Et un display:block sur le lien si ton image est en background + height/width de dimension)
Si je fais fausse route, dit-le, j'suis pas certain d'avoir tout compris :)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
C'est à peu près ça, mais il existe pas en moyen en CSS (ou en JS ?) de faire un bouton soigneux, en forme de boule de Noel ? :)
Nhay
Messages postés
838
Date d'inscription
vendredi 2 novembre 2012
Statut
Membre
Dernière intervention
17 décembre 2015
126
5 déc. 2013 à 19:11
5 déc. 2013 à 19:11
Pour un bouton de formulaire, tu a l'input type image
<input type='image' src='/img/image.jpg' alt='' />
Ou encore la balise button
<button type='submit'><img src='' alt='' /></button>
<input type='image' src='/img/image.jpg' alt='' />
Ou encore la balise button
<button type='submit'><img src='' alt='' /></button>
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
5 déc. 2013 à 19:24
5 déc. 2013 à 19:24
Si tu peux faire ca avec
exemple
voila l image que tu met a background: url(ton-image.png);
a+
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
background: url(ton-image.png);
display: block;
exemple
<!DOCTYPE html>
<html>
<head>
<title>
RAD ZONE Webcreation
</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin: 0;
padding: 0;
background-color: #333333;
}
#centre{
width: 257px;
margin: auto;
}
/* CSS DU A */
a.rond {
width: 255px;
height: 255px;
border: 1px solid #333;
background-color: #ffffff;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
background: url(ton-image.png);
display: block;
}
/* CSS DU A */
</style>
</head>
<body>
<div id="centre">
<a href="#" class="rond"></a>
</div>
</body>
</html>
voila l image que tu met a background: url(ton-image.png);
a+
antoinegdln4
Messages postés
33
Date d'inscription
mardi 28 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2016
1
5 déc. 2013 à 23:58
5 déc. 2013 à 23:58
Je te remercie beaucoup, ça ressemble à peu près à ce que je veux, mais à encore quelques détails près... .. Il s'agit encore "d'un bloc", sur lequel on doit cliquer dessus... N'y a t il pas moyen que l'on clique juste sur la boule, et qu'il n'y ai plus de bloc carré ? Puisque l'image.png est une icone, donc sans fond.. Donc ça devrait être possible non ?
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
6 déc. 2013 à 08:45
6 déc. 2013 à 08:45
mais c est toujours un bloc !! ton image n est pas sans fond , mais a un fond transparent ce qui donne cette impression de rond !!
et bien pour imager ont peux dire que le border radius a 150px sur les 4 angles fait un peu la meme chose avec le block <a> !
tu peux aussi le faire avec un mapping, et la tu clique sur une area shape ronde,
je vois pas trop l interet pour un seul lien ,
mais c est faisable !
meme exemple que au dessus mais avec un mapping
a+
et bien pour imager ont peux dire que le border radius a 150px sur les 4 angles fait un peu la meme chose avec le block <a> !
tu peux aussi le faire avec un mapping, et la tu clique sur une area shape ronde,
je vois pas trop l interet pour un seul lien ,
mais c est faisable !
meme exemple que au dessus mais avec un mapping
<!DOCTYPE html>
<html>
<head>
<title>
RAD ZONE Webcreation
</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin: 0;
padding: 0;
background-color: #333333;
}
#centre{
width: 257px;
margin: auto;
}
</style>
</head>
<body>
<div id="centre">
<img alt="image" usemap="#image-rond" src="image-rond.png">
<map id="image-rond" name="image-rond">
<area alt="lien" href="#" shape="circle" coords="134,127,125">
</map>
</div>
</body>
</html>
a+
D'accord, merci beaucoup :)
Je t'explique beaucoup plus précisemment mon projet :
Bien qu'on soit le 06 décembre je cherche à créer un calendrier de l'avent, avec des boutons en forme de boules de Noel, avec une png à fond transparent, et que, quand on clique dessus, le ":active" fonctionne normalement lorsque l'on clique dessus, et quel lorsque l'on la survole, le ":hover" la fasse changer de couleur (la boule de Noel). Est ce possible ?
Je t'explique beaucoup plus précisemment mon projet :
Bien qu'on soit le 06 décembre je cherche à créer un calendrier de l'avent, avec des boutons en forme de boules de Noel, avec une png à fond transparent, et que, quand on clique dessus, le ":active" fonctionne normalement lorsque l'on clique dessus, et quel lorsque l'on la survole, le ":hover" la fasse changer de couleur (la boule de Noel). Est ce possible ?
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
6 déc. 2013 à 20:44
6 déc. 2013 à 20:44
Salut
j ai pas trop le temps , mais je t ai fais un exemple vite fait !
http://www.solidfiles.com/d/9c1b37dd74/
a+
j ai pas trop le temps , mais je t ai fais un exemple vite fait !
http://www.solidfiles.com/d/9c1b37dd74/
a+
Après test sur ton fichier, deux questions :
De un comment faire pour mettre du texte par dessus l'image ?
De deux, après avoir viré le tableau et toutes les images, je n'en ai laissé qu'une, est-il normal que je n'arrive pas à la décaler à gauche avec un "left:..." ?
De un comment faire pour mettre du texte par dessus l'image ?
De deux, après avoir viré le tableau et toutes les images, je n'en ai laissé qu'une, est-il normal que je n'arrive pas à la décaler à gauche avec un "left:..." ?
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
6 déc. 2013 à 23:15
6 déc. 2013 à 23:15
comment faire pour mettre du texte par dessus l'image ?
dans tes liens <a> tu met ton texte dans un <p>
<a href="#" class="rond"><p>TEXT</p></a>
ensuite dans le CSS
a a.rond tu ajoute
line-height: 122px; text-decoration: none;/* pour enlever la ligne sous le texte du lien */
et tu ajoute cette regle CSS
a.rond p {
vertical-align: middle;
display: inline;
color: #FF0000;/* tu choisira ta couleur */
font-weight: bolder;/* tu choisira */
}
après avoir viré le tableau?? quel tableau ?? tout est fait en div !
est-il normal que je n'arrive pas à la décaler à gauche avec un "left:..." ????
c est que tu as due laisser la div cal et son css !
tu est sur de comprendre un peu le html css ??? j ai de gros doutes !
a+
Pourquoi, après avoir tapé le code comme ça :
<!DOCTYPE html>
<html>
<head>
<title>
RAD ZONE Webcreation
</title>
<meta charset="utf-8">
<style type="text/css">
<!--
a.rond {
width: 122px;
height: 122px;
display: block;
border-radius:150px;
background: url(2.png);
}
a.rond2 {
left:120px;
width: 122px;
height: 122px;
display: inline-block;
border-radius:150px;
background: url(2.png);
}
a:hover {
background: url(transfertlogoombresq2_122x122.png);
}
a:active {
background: url(trempty_122x122.png);
}
</style>
</head>
<body>
<a href="#" class="rond" ></a>
<a href="#" class="rond2" ></a>
</body>
</html>
Il m'affiche les images les unes en dessous des autres ? (enfin les deux seules images)
<!DOCTYPE html>
<html>
<head>
<title>
RAD ZONE Webcreation
</title>
<meta charset="utf-8">
<style type="text/css">
<!--
a.rond {
width: 122px;
height: 122px;
display: block;
border-radius:150px;
background: url(2.png);
}
a.rond2 {
left:120px;
width: 122px;
height: 122px;
display: inline-block;
border-radius:150px;
background: url(2.png);
}
a:hover {
background: url(transfertlogoombresq2_122x122.png);
}
a:active {
background: url(trempty_122x122.png);
}
</style>
</head>
<body>
<a href="#" class="rond" ></a>
<a href="#" class="rond2" ></a>
</body>
</html>
Il m'affiche les images les unes en dessous des autres ? (enfin les deux seules images)
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
6 déc. 2013 à 23:45
6 déc. 2013 à 23:45
loool :-))
ok bon on va arreter la !! ca ne sert a rien , il faut d abord que tu apprenne un minimum les bases html css , sinon on va tourner en rond sans avancer !
voila le cours pour debutant
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
apres on pourra t aider
a+
ok bon on va arreter la !! ca ne sert a rien , il faut d abord que tu apprenne un minimum les bases html css , sinon on va tourner en rond sans avancer !
voila le cours pour debutant
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
apres on pourra t aider
a+
Non mais je débute pas à ce point là...
J'aurais juste aimé que tu me dise ce qui cloche dans mon code plutot que de prendre pour plus bete que je ne le suis à chaque fois...
J'aurais juste aimé que tu me dise ce qui cloche dans mon code plutot que de prendre pour plus bete que je ne le suis à chaque fois...
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
7 déc. 2013 à 05:44
7 déc. 2013 à 05:44
ce qui cloche dans mon code plutot que de prendre pour plus bete que je ne le suis à chaque fois....
mais c est les bases que tu ne comprend pas !!
sinon tu saurait qu il suffit de mettre
display: inline-block;
a la place de
display: block;a a.rond pour que tout s aligne !
Non mais je débute pas à ce point là...revise un peu quand meme ,en CSS si tu n a pas un minimum de base tu va galerer a chaque changement dans ton code et comme dans cet exemple (difference entre block et inline-block) et passer des heures sur un probleme , alors que 10 secondes suffisent pour le corriger si tu a les bases !!
a+
