| | Effet Rollover avec du CSS & HTML |  |
|
|
 rhum's 
{ Membre }
 Messages : 25
 | Bonjours / Bonsoir alors voila j'aimerais avoir un effet Rollover sur un bouton mais en CSS et HTML j'ai trouvez deux trois trucs mais qui ne fonctionne pas  Voici le code trouvez . Code HTML - Code:
-
<ul> <li><a href="lien" class="bouton-menu">Ma Page 1</a></li> <li><a href="lien" class="bouton-menu">Ma Page 2</a></li> <li><a href="lien" class="bouton-menu">Ma Page 3</a></li> </ul> Ou - Code:
-
<p> <a href="lien" class="bouton-menu">Ma Page 1</a> - <a href="lien" class="bouton-menu">Ma Page 2</a> - <a href="lien" class="bouton-menu">Ma Page 3</a> </p> Code CSS - Code:
-
.bouton-menu
{
display: inline-block;
width: 140px;
height: 40px;
background: url("mon-image") no-repeat 0 top; /* On positionne l'image en haut*/
}
.bouton-menu:hover
{
/* On affiche seulement la portion de l'image voulue : le bas */
background-position: 0 bottom;
}
Et le résultat Ici Mais je n'obtiens pas du tout ce resultat et mes connaissance en CSS & HTML sont plus que limité pour pouvoir modifier le code en lui meme . Merci, Cordialement Rhum's  | | |
|
| | |
Radimir
{ Membre actif }
Messages : 459
| Bonjour, Avant tout , tu veux obtenir ce résultat pour un forum ? un Site ? Il faudrait peut être préciser , vu que le site du zero montre autre chose. il y a un tuto concernant le même effet sur le forum et des réponses à cette question déjà posé ... ICIToutefois essaye d'être plus clair dans ton explication. | | |
|
| | |
rhum's
{ Membre }
Messages : 25
| Ben c'est pour un forum de chez FA et je voudrais obtenir le meme resultats et le l'optimisé par la suite Merci | | |
|
| | |
Radimir
{ Membre actif }
Messages : 459
| Il faudrait peut être remplir le code un peu non ? pour avoir un effet quelconque ^^. test avec ça et si besoin d'explication fait le moi savoir. - Code:
-
.bouton-menu
{
display: inline-block;
width: 140px;
height: 40px;
color:#FFFFFF;
border:1px white solid;
-moz-border-radius-topleft: 10px ;
-moz-border-radius-topright: 10px ;
background-color:#011724;
}
.bouton-menu:hover
{
color:#FFFFFF;
border:1px white solid;
-moz-border-radius-topleft: 10px ;
-moz-border-radius-topright: 10px ;
background-color:#000000;
}
| | |
|
| | |
rhum's
{ Membre }
Messages : 25
| Merci c'est deja mieux Mais petit souci technique....j'ai essaye de rajouté ceci a l'ensemble du code - Code:
-
background: url("http://img543.imageshack.us/i/grisfoncxxx.png/") no-repeat Code Entier - Code:
-
.bouton-menu
{
display: inline-block;
width: 200px;
height: 20px;
color:#FFFFFF;
border:1px white solid;
-moz-border-radius-topleft: 10px ;
-moz-border-radius-topright: 10px ;
background: url("http://img543.imageshack.us/i/grisfoncxxx.png/") no-repeat
background-color:#011724;
}
.bouton-menu:hover
{
color:#FFFFFF;
border:1px white solid;
-moz-border-radius-topleft: 10px ;
-moz-border-radius-topright: 10px ;
background: url("http://img545.imageshack.us/i/grisfonc.png/") no-repeat
background-color:#000000;
} Mais ca ne marche pas :\ Peut tu me dire ou j'ai merdé ? Merci | | |
|
| | |
Radimir
{ Membre actif }
Messages : 459
| Il faut prendre le lien direct de l'image .
Donc ceci pour la première image , et le deuxième aussi faut le changer x)
https://2img.net/r/ihimizer/img814/7003/grisfoncxxx.png | | |
|
| | |
rhum's
{ Membre }
Messages : 25
| Ah oué....Roooooo le boulet j'avais meme pas vue que c'etait pas le bon lien XD Sinon si jeux veux des ombre le code c bien shadow-text : 0px; ? Merci | | |
|
| | |
Radimir
{ Membre actif }
Messages : 459
| Pas vraiment x) Voici un tuto complet pour t'expliquer ce genre d'effet. Si tu ne comprends pas malgré cela , fais le moi savoir ^^ Lien | | |
|
| | |
rhum's
{ Membre }
Messages : 25
| J'ai modifier le code mais ca donne tjrs rien.... - Code:
-
.bouton-menu
{
display: inline-block;
width: 200px;
height: 20px;
color:#FFFFFF;
border:1px white solid;
-moz-border-radius-topleft: 10px ;
-moz-border-radius-topright: 10px ;
background: url("http://img814.imageshack.us/img814/7003/grisfoncxxx.png") no-repeat
background-color:#011724;
}
.bouton-menu:hover
{
color:#FFFFFF;
border:1px white solid;
-moz-border-radius-topleft: 10px ;
-moz-border-radius-topright: 10px ;
background: url("http://img830.imageshack.us/img830/2176/grisfonc.png") no-repeat
background-color:#000000;
} | | |
|
| | |
Radimir
{ Membre actif }
Messages : 459
| Bonsoir Tu as testé avec ça ? Et qu'est qui marche pas ? x) - Code:
-
<span class="bouton-menu"><a href="lien" >Ma Page 1</a> </span> | | |
|
| | |
rhum's
{ Membre }
Messages : 25
| Ben j'ai aucune des deux image qui s'affiche | | |
|
| | |
Radimir
{ Membre actif }
Messages : 459
| Eh bien j'aurai du revoir le css , ma faute donc x) tu n'as pas fermer la balise en question. Reteste avec un code de ce genre ça devrait marcher. - Code:
-
<div class="bouton-menu"><a href="lien" >Ma Page 1</a> </div> ou - Code:
-
<span class="bouton-menu"><a href="lien" >Ma Page 1</a> </span> Css: - Code:
-
.bouton-menu
{
display: inline-block;
width: 200px;
height: 20px;
color:#FFFFFF;
border:1px white solid;
-moz-border-radius-topleft: 10px ;
-moz-border-radius-topright: 10px ;
background: url("http://img814.imageshack.us/img814/7003/grisfoncxxx.png") no-repeat;
background-color:#011724;
}
.bouton-menu:hover
{
color:#FFFFFF;
border:1px white solid;
-moz-border-radius-topleft: 10px ;
-moz-border-radius-topright: 10px ;
background: url("http://img830.imageshack.us/img830/2176/grisfonc.png") no-repeat;
background-color:#000000;
}
| | |
|
| | |
rhum's
{ Membre }
Messages : 25
| Yeeess !!!! Merci  Et si je veux métre 3 ou 4 bouton les uns au dessu des autres quel partie je doit modifier le Html non ? En rajoutant Ma Page 1 entre les | | |
|
| | |
Radimir
{ Membre actif }
Messages : 459
| après chaque boutons entre les div tu ajoutes ceci : - Code:
-
<br> et ils s'aligneront sous forme d'une seule et même colonne. Sinon tu peux toujours opter pour la solution d'une table. C'est à dire tu créer un tableau constitué de X lignes et une seule colonne et tu mets le code dans chacune d'entre elles | | |
|
| | |
rhum's
{ Membre }
Messages : 25
| Ok merci seul souci je n'est que sur un seul de mes lien le bouton http://bot-tm.keuf.net/index.htm Et je voudrais aussi les alignés a doite | | |
|
| | |
Radimir
{ Membre actif }
Messages : 459
| Eh bien faut en ajouter concernant les boutons , sinon ton forum est fermé aux invités.
Plus simple , c'est possible que tu me fournit un schéma de ce que tu veux avoir comme résultat ?
*ça vire à la commande ça xD* | | |
|
| | |
rhum's
{ Membre }
Messages : 25
| voici l'effet voulus...a quelque chose pret les boutons sombre sont les boutons inactif et le claire c'est celui ou le curseur est dessus, en tout cas merci tu géré  | | |
|
| | |
Radimir
{ Membre actif }
Messages : 459
| Bon vais te faire le code en entier ... Voilà tout et euh ça marche très bien je viens de le retester sur mon forum test. Pour les couleurs tu sauras te retrouver ? - Code:
-
[center]<span class="categ">[url=Lien_1]Nom_Forum[/url]</span>
<span class="categ">[url=Lien_1]]Nom_Forum[/url]</span>
<span class="categ">[url=Lien_1]]Nom_Forum[/url]</span>[/center]
Css : - Code:
-
.categ:hover{
width:90px;
font-family: Georgia;
font-size: 12;
text-align: center;
color: #949483;
padding-right:20px;
padding-left:20px;
margin-right : 3px;
margin-Top : 3px;
margin-bottom : -15px;
font-weight: bold ;
font-variant: small-caps;
background-image: url('Lien de mon image');
background-repeat: no-repeat;
background-color: #000000;
text-decoration: none;
text-shadow: 0px 0px 12px black;
border: 1px solid #013a57;
-moz-border-radius:10px;
}
.categ
{
width:90px;
font-family: Georgia;
font-size: 12;
text-align: center;
color: #949483;
padding-right:20px;
padding-left:20px;
margin-right : 3px;
margin-Top : 3px;
margin-bottom : -15px;
font-weight: bold ;
font-variant: small-caps;
background-image: url('Lien de mon image');
background-repeat: no-repeat;
background-color: #001f2f;
text-decoration: none;
text-shadow: 0px 0px 12px black;
border: 1px solid #013a57;
-moz-border-radius:10px;
} | | |
|
| | |
rhum's
{ Membre }
Messages : 25
| Je vais essayé de me retrouvez, faut bien que j'essaye de me dépatouillé tt seul Merci encore | | |
|
| | |
Radimir
{ Membre actif }
Messages : 459
| Tu es sur de toi ? Au pire tu me fournit juste les couleurs... Enfin bon à toi de voir , si c'est réglé ... Puis-je classer ? x) | | |
|
| | |
rhum's
{ Membre }
Messages : 25
| Ben en faite je crois que y'a un souci lol
j'ai tout rentré comme tu ma donner ??
http://bot-tm.keuf.net/index.htm
apres c surtout pour les effet d'ombre mais si tu veux faire les couleurs pas de souci
Inactif : Gris foncé
Actif : Gris foncé | | |
|
| | |
Radimir
{ Membre actif }
Messages : 459
| je t'ai dis que je peux pas voir ton forum sans m'inscrire >< Une capture d'écran serait une meilleure solution.
*Non non je ne suis pas un flemmard><* | | |
|
| | |
rhum's
{ Membre }
Messages : 25
| Avec ton code qui c'est modifier tout seul d'ailleiur =O - Code:
-
<div style="margin:auto;text-align:center;width:100%"><span class="categ">[url=Lien_1]Nom_Forum[/url]</span>
<span class="categ">[url=Lien_1]TEST[/url]</span>
<span class="categ">[url=Lien_1]TEST 1[/url]</span></div>  Et la j'ai essayer de mettre - Code:
-
<br> comme ceci - Code:
-
<br>[url=Lien_1]TEST[/url]</br>
<br>[url=Lien_1]TEST 1[/url]</br> resultat  | | |
|
| | |
Radimir
{ Membre actif }
Messages : 459
| ça s"affiche parfaitement chez moi , test avec cela seulement ! [Si tu veux les recoller eh bien tu enlèves le br - Code:
-
<span class="categ">[url=Lien_1]TEST[/url]</span><br>
<span class="categ">[url=Lien_1]TEST[/url]</span><br>
<span class="categ">[url=Lien_1]TEST[/url]</span><br>
<span class="categ">[url=Lien_1]TEST[/url]</span><br> | | |
|
| | |
rhum's
{ Membre }
Messages : 25
| arrivé la il y'a une histoire de padding nan ?  | | |
|
| | |
Contenu sponsorisé
| |
| | |
| | Effet Rollover avec du CSS & HTML | |
|
