[Débutant] faire un bouton dynamique avec un CSS [Résolu]

[hunteshiva]

Bonjour,

je n'arrive pas a expliquer une partie du code que j'ai trouvé ...

Code :

1
2
3
4
5
6
<!-- Code HTML -->
 
<div class="retour">
	<img src="images/fleche_retour.gif" alt="Fleche_retour" />
	<a  href="wait.html">Retour à la page d'accueil</a>
</div>

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
 
/* positionnement de la classe "retour" dans la page web */
.retour  {position:absolute;top:300px;left:250px;}
 
/* pour le lien hypertexte dans la classe "retour" */
.retour  a {
/* on fait un block d'une certaine taille */
display:block; 
width:250px; 
height:30px; 
 
/* astuce pour virer le texte *a confirmer* */
text-indent:-5000px; 
font-size:0 ; 
line-height:0; 
overflow:hidden; /*??????*/
 
/* enfin on remplace le texte effacé par l'image souhaitée */
background:url(images/retour.gif)
}
 
/* la petite  astuce ce fait ici ^^ */
/* dans ce cas j'utilise une image symétrique de 500px de large*/
/* où les 250 premiers px sont le bouton en noir par exemple*/
/* et les 250 derniers px sont la même image mais avec une couleur différente (ex: gris)*/
.retour  a:hover, .retour  a.actif {background-position:-250px 0}

*j'espère ne pas avoir dit de bêtises dans mes commentaires*


mais je me demande quel est l'intérêt de ces deux lignes

Code :

1
2
font-size:0 ; 
line-height:0;

a réduire la polie a zéro ... quel intéret si on a éjécté le texte a -5000px XD
*la deuxième je sais pas trop a quoi elle sert*


Ensuite le "overflow:hidden", a quoi il sert ??
-> a dire au navigateur que cette zone ne doit pas être modifiée ?

Y a un truc que j'ai pas réussi a faire fonctionner, le a.actif, il est censé garder l'état de mon bouton mais il veut pas... c'est quoi ce a.actif ??

[e-fitz]

Bonsoir,

active : quand l'utilisateur est en train de cliquer
hover : quand l'utilisateur passe la souris dessus

line-height ? peut etre pour donner un layout pour ie6 (histoire du hasLayout avec ie6)

overflow:hidden : si ca déborde du bloc on n'affiche pas

display:block on met pour un lien pour pouvoir le dimensionner (je prefere un position:absolute puis un positionnement relatif par dessus mais c'est un choix).

text-indent + font-size vont bien cacher le texte, ma question est pourquoi ??

En faite ma question est que veux tu faires avec ca ?

[hunteshiva]

Bonsoir,

comme je disait au début, je me met tout juste au HTML je me suis inspiré d'un site pour faire ce CSS
c'est pas du tout mon idée de virer le lien hypertexte pour le remplacer par une image.

Le but:
créer un bouton, qui lorsqu'on passe dessus change de couleur.
(et qui lorsqu'on clic dessus garde la couleur n°2 mais la jsui pas au point ...)

la l'astuce c'est de charger une image contenant les 2 couleurs.

et de déplacer l'images dans le "display:block" de maniére a ne voir que le bouton vert ou que le bouton bleu.

aprés je n'y connais pas grand chose en CSS pour le moment,
mais je trouve ce tour de passe passe magique

je pense m'oreinter sur ce style de CSS pour faire un design web,
merci de me dire si c'est une mauvaise idée

Source
CSS

[e-fitz]

Rebonsoir,

donc pour la couleur du bouton qui reste une fois le clique réalisé, cela est juste du au changement de page, dans la nouvelle page tu donnes ce que tu veux comme style au bouton.

Par exemple sur ta page d'accueil tu as un bouton news rouge (background-color:red) quand tu cliques dessus tu rentres sur la page des news dans cette page le background-color et blue donc le bouton n'a plus la même couleur.

Aprés l'utilisation du hover pour changer la couleur ou l'image est très souvent utilisé donc n'hésite pas. Pour l'active je ne l'utilise jamais.

Pour l'astuce dont tu parles il suffit de faire un <a href="..." class="monbouton" >

et dans ton css

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
.monbouton:link, .monbouton:visited{
  position:absolute;
  width:100px;
  height:20px;
  background-image:url(mon_image.jpg);
}
 
.monbouton:hover{
  position:absolute;
  width:100px;
  height:20px;
  background-image:url(mon_image.jpg);
  background-position:-100px 0;
}

Ici le display:block est remplacé par un position absolute (c'est un choix par forcement toujours le meilleur) et c'est bien le background-position sur le hover qui va changer l'image tu pourrais meme mettre 4 images differente sur la même image et juste changer les positions (une pour link, une pour visited, une pour hover, une pour active). Donc en 1 image tu peux representer plusieurs images en changeant la position de cette image dans le conteneur.

Tout ca pour dire que le display:block sert juste a pouvoir donner une dimension a un lien (width et height) car un lien est un element inline et donc ne peut etre dimensionné, et c'est le background-position qui change l'image.

Mon position absolute transforme le lien en element non inline mais apporte une sortie du flux (ce qui n'est pas toujours nécessaire).

Si je ne suis pas clair n'hesite pas a me le dire.


Concernant le style de css je ne suis pas quelqu'un de formel pour moi tant que ton css est "propre" et fonctionne bien alors ca va.

Dans le css que tu me montre il y a une combinaison d'id et de classe que je n'aime pas trop (j'ai tendance à utiliser les classes pour le css et les id pour la javascript). Après le fait d'utiliser les balises est une bonne chose quand cela simplifie le code mais ce n'est pas toujours le cas, parfois il vaut mieux une bonne classe (ou id).

Un exemple ou l'utilisation des element html sont interessant est par exemple l'application d'une propriété a un ensemble de div et non pas un seul
( .monmenu > div { border-left:1px solid gray;} par exemple, ici sans donner de classe on applique a tous les div directement fils de monmenu une bordure à gauche.)


Bonne soirée

[hunteshiva]

Merci beaucoup pour tes réponses,

j'ai du mal encore avec les postions absolue, relative, les inlines et tout, ça ne fait que 3j que je programme du HTML.
Comme je n'ai jamais reçu de cours je risque de faire mon CSS de manière peut formelle

Je met et encore merci

[e-fitz]

Allez avant de dormir :

Tous les éléments de ta page sont dans un flux qui va du coin haut gauche au coin bas droit (en gros vois ca comme des "lignes" ecrites de gauche a droite...).
Tant que tu restes dans le flux les éléments s'ajustent entre eux, les positions static et relative sont dans le flux, les positions absolute et fixe non.
Donc si un élément n'est pas dans le flux ca veux dire qu'il n'a pas d'incidence sur les autres, mais aussi qu'il n'est positionné par rapport aux autres, en gros en absolute tu positionnes par rapport au coin haut gauche de la page et en fixe au coin haut gauche de la fenetre du navigateur.

Bon et inline et block dans tout ca ???

Inline ca veux juste dire que tu restes sur la même "ligne" et block tu changes de ligne.
Exemple : tu peux mettre plusieurs images cote à cote donc c'est inline, par contre tu ne peux pas faire plusieurs div cote à cote donc c'est block (je parle de comportement par défaut).

Après il te reste quelques propriété css qui change tout ca, tu peux dire display:inline pour un div et donc le div ne sera plus block...
Et tu peux dire block à un lien et donc il adopte le comportement correspondant.

Attention à float qui est un peu particulier.
Pour simplifier, float sort ton element du flux jusqu'au prochain clear, donc tant que tu n'as pas mis de clear c'est comme si tes éléments float étaient en position absolute...

Il faut bien comprendre que les éléments s'arrangent entre eux, donc si tu met un margin il va affecter les éléments dans le flux autour (cest pour ca que le margin n'a pas d'effet sur les element en position absolute par exemple).

Après il faut bien faire la différence entre ce qui est une marge externe (margin) et une marge interne (padding).

Finalement, concernant les positionnements il te reste les propriétés top, left, bottom, Right, et margin + padding qui jouent un role.

Pour faire simple (toujours a cette heure du matin...) :
left, top, right, bottom n'ont pas d'incidence sur le flux (donc pas d'incidence sur les autres éléments)
margin et padding on une incidence sur le flux.

Ce qui implique donc que lorsque tu es en absolute (comme dis précédement) le margin n'a pas d'effet sur l'element, il faut donc utiliser left, top ...Cependant quand tu es en relative, il faut distinguer quand tu souhaites influencer les autres éléments ou pas.
Un exemple tout bête, tu as une image de bouton qui est sur la même ligne qu'un texte, tu souhaites que cette image soit centré par rapport au texte (normalement le bas de l'image est sur la même ligne que ton texte), il te suffira donc d'utiliser un top pour descendre un peu ton image sans pour autant bouleverser le reste de ton design.

Comme tout à l'heure, pour le float c'est un peu différent, le margin est quand même pris en compte (c'est pour ca que j'ai dis pour simplifier).

La position static est la position par défaut, toutefois il faut faire attention lorsque tu positionnes des élements si tu met une image dans un div par exemple (<div > <img ... /></div>) pour positionner ton img avec top, left, right ou bottom, tu seras alors obligé de donner une position relative à ton image et à ton div, en effet l'image doit se repérer à l'élément parent le plus proche et pour pouvoir ce repérer il faut que cet élement parent est une zone de délimitation.
Ce qui n'aurait pas était le cas avec un margin, en mettant un margin ton image se serait positionné sans rien modifier d'autre, la différence est simplement l'influence sur le flux.


Concernant la position disons "en 3d" sur ta page.
Ton navigateur va lire la page de haut en bas donc tout ce qui est en dessous sera plus en avant que le reste (attention encore une fois les éléments s'intercallent aussi par rapport au position absolute et relative).

Pour modifier cet ordre tu peux utiliser la propriété z-index.
Toutefois il faut bien comprendre que c'est ordre n'est vrai que pour des éléments frères et non pas pére-fils.
Exemple :

Code :

1
2
3
4
5
6
7
8
 
<img /><img /> <img />      Les images entres elles sont bien soeur
 
Ici par contre les div sont dans une relation pére-fils (ou mére-fille :mouarf:)
<div >
<div>
</div>
</div>

Dans le cas d'une relation mére-fille l'enfant le plus jeune (pas clair ...) ou disons le noeud de l'arbre dom le plus profond sera toujours sur le premier plan(z-index ou pas) par rapport à son parent le plus loin (le plus vieille ancetre).

Y aurait encore pas mal de chose à dire, mais je pense que pour une introduction rapide (et simplifier), tu as de quoi te débrouiller si tu comprends tout ca.

En plus il y a d'excellente explication sur le net concernant les positionnnements.

Je rajouterais juste une chose, attention aux différentes interprétation des navigateurs sur les margin et padding (ca peut ruiner un design...)

N'hésite pas à poser des questions j'essayerai de te réponde au plus juste (ou plus simple à comprendre cela dépendra de l'heure de ma réponse (simple ne veut pas dire faux ).


edit : j'ai mis un peu de couleur sur les balises css pour ne pas se perdre dans tout le texte

[hunteshiva]

Donc si je veut, je peut ne faire que des positionnement absolute avec des bloc
comme ça, je les place ou je veut (mais est-ce dangereux? ou peut conventionnel?)

je vois aussi qu'il y a les "positions static et relative " ou la, on a cette histoire de flux *déjà ça m'emballe moins*
on positionne par rapport aux éléments précédents mais suffit que le navigateur ne n'interprète pas correctement le code et la mise en page part en sucette ... c'est ça?

[e-fitz]

Bonjour,

en faite normalement il faut faire tout ton site en static/relative c'est a dire que tu mets positions:relative que quand tu dois mettre une position spéciale (relire l'exemple de l'image sur la même ligne plus haut).

L'absolute doit être reservé pour des éléments qui ne bougeront jamais (par rapport à leur coneteneur parent).

Donc oui tu peux faire un site tout en absolute mais cela est déconseillé car tu n'es pas dans le flux.

Normalement un site ce programme dans le flux, on ajoute des positionnnement hors flux pour faciliter certaine mise en page.

Par exemple imagine tu as un menu de 5 boutons qui est représenté par une seule image (pas bien). La pour mettre les liens dessus tu as plusieurs solution, la premiere utiliser les maps area en html, la seconde mettre cette image en fond d'un div et donner un layout à ce div avec un position:relative.
Ensuite tu peux positionner à l'interieur tes liens en absolute.
De cette maniére tu positionnes facilement tes liens et vu que tu es dans un conteneur parent tu es sur que ca sera pareil sur tous les navigateurs.
En plus comme tu donnes une position:relative et des dimensions à ton div parent (pour voir toute l'image) alors tu n'auras pas de probleme de sortie du flux. Seul les liens absolute seront hors du flux mais ton div restera dans le flux, donc le reste de ta page s'adaptera bien à ton menu.

Je ne sais pas si je suis très clair, ce n'est pas très simple comme ca.

J'ai vu de très bonne explication sur alsacréation concernant le positionnement.