Créer un bouton special
Résolu/Fermé
sgtcookie
Messages postés
92
Date d'inscription
mardi 31 juillet 2007
Statut
Membre
Dernière intervention
10 février 2008
-
6 oct. 2007 à 03:29
sgtcookie Messages postés 92 Date d'inscription mardi 31 juillet 2007 Statut Membre Dernière intervention 10 février 2008 - 10 oct. 2007 à 19:03
sgtcookie Messages postés 92 Date d'inscription mardi 31 juillet 2007 Statut Membre Dernière intervention 10 février 2008 - 10 oct. 2007 à 19:03
A voir également:
- Créer un bouton special
- Créer un compte gmail - Guide
- Créer un compte google - Guide
- Créer un groupe whatsapp - Guide
- Créer un compte instagram sur google - Guide
- Comment creer un pdf - Guide
5 réponses
Bussy14
Messages postés
45
Date d'inscription
dimanche 29 octobre 2006
Statut
Membre
Dernière intervention
4 avril 2013
5
6 oct. 2007 à 06:24
6 oct. 2007 à 06:24
Salut sgtcookie,
Si j'ai bien comrpis, tu as un bouton déjà affiché, mais tu voudrais qu'un cadre de couleur apparaisse quand la souris passe par-dessus?
Une solution est d'utiliser du CSS (Cascading Style Sheet).
Le css est un langage qui permet d'embellir une page Web.
Un excellent site sur le CSS est: https://www.hscripts.com/tutorials/css/index.php
Pour utiliser du CSS, il faut deux choses:
1. déclarer des styles (3 manières possibles, je ne te parlerai que du style "interne")
2. appliquer des styles sur des éléments de ta page (paragraphe, image, tableau...)
Pour déclarer un style en interne, entre les balises <head></head>, tu créés les balises:
<style></style> à l'intérieur desquelles tu places ton code CSS.
ex pour créer un cadre rouge de 2px de large autour d'une image dès que le curseur passe au-dessus:
Ici, on a déclaré entre les balises <head> une classe (nom précédé d'un point '.') appelée 'test'.
On dit d'appliquer aux éléments de la classe 'test' dès que le curseur passe dessus (':hover' précise d'appliquer le style quand le curseur passe au-dessus) le style placé entre accolades.
Le style donné est: border: 2px solid red; = bordure de 2px de large de type solide et de couleur rouge (intuitif).
Plus loin dans ton code, tu veux qu'un élément applique les styles déclarés. Il suffit d'ajouter l'attribut class="nomdeclass" dans l'élément.
Ici, le nom de la classe est 'test' (même qu'en haut).
Ce qui voudra dire que pour l'image, dès que le curseur passera au dessus, s'affichera un cadre rouge de 2px de large.
J'espère que ceci répond à ta question!
P.S: désolé pour ma réponse plus longue que nécessaire, mais j'ai tendance à vouloir expliquer le principe derrière un code, dans le cas où la personne voudrait apprendre et comprendre le langage.
- Tibo -
Si j'ai bien comrpis, tu as un bouton déjà affiché, mais tu voudrais qu'un cadre de couleur apparaisse quand la souris passe par-dessus?
Une solution est d'utiliser du CSS (Cascading Style Sheet).
Le css est un langage qui permet d'embellir une page Web.
Un excellent site sur le CSS est: https://www.hscripts.com/tutorials/css/index.php
Pour utiliser du CSS, il faut deux choses:
1. déclarer des styles (3 manières possibles, je ne te parlerai que du style "interne")
2. appliquer des styles sur des éléments de ta page (paragraphe, image, tableau...)
Pour déclarer un style en interne, entre les balises <head></head>, tu créés les balises:
<style></style> à l'intérieur desquelles tu places ton code CSS.
ex pour créer un cadre rouge de 2px de large autour d'une image dès que le curseur passe au-dessus:
<head>
...
<style>
.test:hover {
border: 2px solid red;
}
</style>
....
</head>
<body>
...
<img src="image.jpg" class="test" />
...
Ici, on a déclaré entre les balises <head> une classe (nom précédé d'un point '.') appelée 'test'.
On dit d'appliquer aux éléments de la classe 'test' dès que le curseur passe dessus (':hover' précise d'appliquer le style quand le curseur passe au-dessus) le style placé entre accolades.
Le style donné est: border: 2px solid red; = bordure de 2px de large de type solide et de couleur rouge (intuitif).
Plus loin dans ton code, tu veux qu'un élément applique les styles déclarés. Il suffit d'ajouter l'attribut class="nomdeclass" dans l'élément.
Ici, le nom de la classe est 'test' (même qu'en haut).
Ce qui voudra dire que pour l'image, dès que le curseur passera au dessus, s'affichera un cadre rouge de 2px de large.
J'espère que ceci répond à ta question!
P.S: désolé pour ma réponse plus longue que nécessaire, mais j'ai tendance à vouloir expliquer le principe derrière un code, dans le cas où la personne voudrait apprendre et comprendre le langage.
- Tibo -
sgtcookie
Messages postés
92
Date d'inscription
mardi 31 juillet 2007
Statut
Membre
Dernière intervention
10 février 2008
8 oct. 2007 à 02:44
8 oct. 2007 à 02:44
merci beaucoup tibo ton explication est vraiment complete
je te demanderais juste deux choses :
- qu'appelle tu interne ?
- a quoi correspond la classe ?
merci d'avance :)
je te demanderais juste deux choses :
- qu'appelle tu interne ?
- a quoi correspond la classe ?
merci d'avance :)
Salut
Introduction aux feuilles de style en cascade (css) :
http://www.a525g.com/programmation/introduction-css.htm
En premier lieu, il convient de savoir qu'il existe trois façon de se servir de css. En voici la liste :
- Feuilles de style externe => Fichiers ".css" .
- Feuilles de style interne => Balises : < style type = " text / css " > < / style > .
- Style spécifié directement dans la balise => Attribut "style", dans un élément particulié .
merci .
à+
Introduction aux feuilles de style en cascade (css) :
http://www.a525g.com/programmation/introduction-css.htm
En premier lieu, il convient de savoir qu'il existe trois façon de se servir de css. En voici la liste :
- Feuilles de style externe => Fichiers ".css" .
- Feuilles de style interne => Balises : < style type = " text / css " > < / style > .
- Style spécifié directement dans la balise => Attribut "style", dans un élément particulié .
merci .
à+
Bussy14
Messages postés
45
Date d'inscription
dimanche 29 octobre 2006
Statut
Membre
Dernière intervention
4 avril 2013
5
8 oct. 2007 à 07:25
8 oct. 2007 à 07:25
Hello,
Alors voilà, le CSS fonctionne par liste d'attributs (tels que la couleur du texte, la taille, la font... même le style de bordure d'un tableau, l'espace entre les éléments, l'image d'arrière-plan, plein plein de trucs!!).
Ces listes attributs, elles sont créées avec un nom unique. Ensuite, n'importe quel élément de ta page peux spécifié à quelle liste d'attributs il appartient, en référant au nom unique.
Il y a 3 types de nom unique: les classes, les "id" et les générales.
Pourquoi les "id" et "classes" existent tous les deux, je sais pas trop, mais voilà ce que je pense de leur utilisation:
1. les classes sont pour spécifier quelque chose de large, du genre: tous les textes étant des titres, ou tous ceux qui sont sous-titre, ou même tous les tableau contenant un formulaire, ou n'importe quoi.
L'utilisation est simple: tu veux écrire le titre de ta page, en haut, alignement au milieu, taille de tant, telle couleur, etc... et tu veux que tous tes titres de page aient le même formatage. C'est simple, il suffit de les placer dans des balises <div></div> (un block qui force le retour de ligne à la fin) ou un <span></span> (tu peux placer ça n'importe où, ça ne changera rien à l'affichage car ça ne créé pas de retour de ligne forcé). Ensuite dans la balise ouvrante <div> ou <span> tu rajoute l'attribut nommé "class", qui prend pour valeur le nom de la classe que tu as donné à ta liste d'attributs qui correspond aux titres de page.
ex:
à ce moment là, le titre "Ma page" va hérité des attributs définits.
Et tu peux faire ça à chaque fois que tu écris le titre de la page.
2. le "id". Celui-là fonctionne exactement comme "classe", mais d'après moi, c'est juste l'utilisation qui change. "id" réfère à une exception. Il ne sert plus à désigner tous les titres d'une page ou tous les formulaires, mais une partie spéciale, un cas à part. Du genre, sur la page que tu écris, il y a un texte que tu veux afficher d'une certaine manière, mais ce n'est pas quelque chose qui se retrouve sur toutes les pages. C'est vraiment quelque chose d'exceptionnel et propre à cette page. Ou tout simplement que tu veux que le titre de CETTE page précise là hérite d'attributs supplémentaires par rapport aux autres titres de pages. Car les attributs, tu peux les additionner. ex:
Dans cet exemple, le texte "Ma page" hérite des attributs de la classe "titre" ainsi que de ceux de la l'identifiant "titre_maPage".
Attention à l'attribution de deux valeurs différentes à un même élément, par exemple la classe "titre" donne une taille de 1.2em, mais la l'identifiant "titre_maPage" donne une taille de .8em, le résultat va dépendre du navigateur, et c'est à éviter!
3. les généraux. Il y a une façon de dire: tous les éléments de tel type vont hériter de tels attributs.
ex:
Ceci entraine le fait que tous les liens de ta page seront soulignés et surlignés.
Comment écrire une classe, un identifiant ou un type général?
--------------------------------------------------------------------------
Tu as peux-être remarqué qu'à chaque fois, je mettais un signe devant le nom de la classe/identifiant/type général.
Pour les classes, il suffit de précéder le nom par un point ('.'). Pour les "id", par un dièse ('#'), et pour les types généraux, de ne rien mettre.
Bon, après ça, on peux pousser un peut, et ajouter un cas de plus, ex: ":hover". Le "hover" est quand le curseur passe au-dessus de l'élément. ex:
Ceci fera que tous les liens de la page seront soulignés et surlignés, et qu'à chaque fois que tu passeras le curseur au-dessus d'un lien, il deviendra "gras".
Ça marche aussi avec les "visited" (pour un lien visité), afin de déterminer, par exemple, aucune différence de couleur entre un lien déjà visité et un lien pas encore visité. (IE alias Internet Explorer écrit par défaut en bleu les liens non visités et en violet les liens visités)
ex:
Comme tu vois ici, j'ai déclaré "a" et "a:visited" dans une même liste d'attributs, c'est faisable en séparant les noms par une virgule (',').
Comme ça, tous les liens visités ou non auront les mêmes attributs!
Bon, je crois que c'est pas mal toutes les bases du CSS, je suis même allé un peu plus loin, j'espère que ceci te sera utile!
Salut!
Alors voilà, le CSS fonctionne par liste d'attributs (tels que la couleur du texte, la taille, la font... même le style de bordure d'un tableau, l'espace entre les éléments, l'image d'arrière-plan, plein plein de trucs!!).
Ces listes attributs, elles sont créées avec un nom unique. Ensuite, n'importe quel élément de ta page peux spécifié à quelle liste d'attributs il appartient, en référant au nom unique.
Il y a 3 types de nom unique: les classes, les "id" et les générales.
Pourquoi les "id" et "classes" existent tous les deux, je sais pas trop, mais voilà ce que je pense de leur utilisation:
1. les classes sont pour spécifier quelque chose de large, du genre: tous les textes étant des titres, ou tous ceux qui sont sous-titre, ou même tous les tableau contenant un formulaire, ou n'importe quoi.
L'utilisation est simple: tu veux écrire le titre de ta page, en haut, alignement au milieu, taille de tant, telle couleur, etc... et tu veux que tous tes titres de page aient le même formatage. C'est simple, il suffit de les placer dans des balises <div></div> (un block qui force le retour de ligne à la fin) ou un <span></span> (tu peux placer ça n'importe où, ça ne changera rien à l'affichage car ça ne créé pas de retour de ligne forcé). Ensuite dans la balise ouvrante <div> ou <span> tu rajoute l'attribut nommé "class", qui prend pour valeur le nom de la classe que tu as donné à ta liste d'attributs qui correspond aux titres de page.
ex:
// css:
.titre {
color: red;
font-size: 1.2em; /* em c'est une taille relative à l'affichage par défaut du navigateur web, très conseilléfortement recommandé! */
text-align: center;
...
}
...
// html
<div class="titre">Ma page</div>
à ce moment là, le titre "Ma page" va hérité des attributs définits.
Et tu peux faire ça à chaque fois que tu écris le titre de la page.
2. le "id". Celui-là fonctionne exactement comme "classe", mais d'après moi, c'est juste l'utilisation qui change. "id" réfère à une exception. Il ne sert plus à désigner tous les titres d'une page ou tous les formulaires, mais une partie spéciale, un cas à part. Du genre, sur la page que tu écris, il y a un texte que tu veux afficher d'une certaine manière, mais ce n'est pas quelque chose qui se retrouve sur toutes les pages. C'est vraiment quelque chose d'exceptionnel et propre à cette page. Ou tout simplement que tu veux que le titre de CETTE page précise là hérite d'attributs supplémentaires par rapport aux autres titres de pages. Car les attributs, tu peux les additionner. ex:
// css
#titre_maPage {
text-decoration: underline;
font-style: italic;
font-weight: bold;
}
...
// html
<div class="titre" id="titre_maPage">Ma page</div>
Dans cet exemple, le texte "Ma page" hérite des attributs de la classe "titre" ainsi que de ceux de la l'identifiant "titre_maPage".
Attention à l'attribution de deux valeurs différentes à un même élément, par exemple la classe "titre" donne une taille de 1.2em, mais la l'identifiant "titre_maPage" donne une taille de .8em, le résultat va dépendre du navigateur, et c'est à éviter!
3. les généraux. Il y a une façon de dire: tous les éléments de tel type vont hériter de tels attributs.
ex:
// css
a {
text-decoration: underline, overline;
}
Ceci entraine le fait que tous les liens de ta page seront soulignés et surlignés.
Comment écrire une classe, un identifiant ou un type général?
--------------------------------------------------------------------------
Tu as peux-être remarqué qu'à chaque fois, je mettais un signe devant le nom de la classe/identifiant/type général.
Pour les classes, il suffit de précéder le nom par un point ('.'). Pour les "id", par un dièse ('#'), et pour les types généraux, de ne rien mettre.
Bon, après ça, on peux pousser un peut, et ajouter un cas de plus, ex: ":hover". Le "hover" est quand le curseur passe au-dessus de l'élément. ex:
// css
a {
text-decoration: underline, overline;
}
a:hover {
font-weight: bold;
}
Ceci fera que tous les liens de la page seront soulignés et surlignés, et qu'à chaque fois que tu passeras le curseur au-dessus d'un lien, il deviendra "gras".
Ça marche aussi avec les "visited" (pour un lien visité), afin de déterminer, par exemple, aucune différence de couleur entre un lien déjà visité et un lien pas encore visité. (IE alias Internet Explorer écrit par défaut en bleu les liens non visités et en violet les liens visités)
ex:
// css
a, a:visited {
text-decoration: underline, overline;
}
a:hover {
font-weight: bold;
}
Comme tu vois ici, j'ai déclaré "a" et "a:visited" dans une même liste d'attributs, c'est faisable en séparant les noms par une virgule (',').
Comme ça, tous les liens visités ou non auront les mêmes attributs!
Bon, je crois que c'est pas mal toutes les bases du CSS, je suis même allé un peu plus loin, j'espère que ceci te sera utile!
Salut!
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
sgtcookie
Messages postés
92
Date d'inscription
mardi 31 juillet 2007
Statut
Membre
Dernière intervention
10 février 2008
10 oct. 2007 à 19:03
10 oct. 2007 à 19:03
merci beaucoup a vous toute les expliquation donné elle sont vraiment clair :)