tu dois pouvoir faire un fichier de comportement
Archive du forum · Aide technique
Topic unique : Questions informatique
Archive en lecture seule. Seuls les pseudonymes publics, les dates et le contenu utile à la lecture sont conservés. Les données techniques et privées ne sont pas publiées.
Non non un hover, genre quand la sourie passe dessus, l'image change, m'enfin viens d'essayer, c'pas concluant, ca va se finir sur toshop cette histoire :D[/quotemsg]bon si j'ai bien compris tu veux que quand tu passes ta souris sur l'image, ça change (par exemple la même mais en rouge ou ne conneire comme ça)
c'est bien avec hover qu'il faut que tu fasses mais dans ces cas là on reprends ce que disais beber je crois qui était de définir une puce spécifique pour chaque menu et dupliquer les classes avec un :hover pour changer l'image
il me semblait bien :o
mais c'est quoi la commande pour mettre une image a partir du hover ?
Car je connais que le background(-image): url("blabla.jpg"). Le prob c'est que c'est un background donc il se cache derriere l'image 1ere du lien :/
Pour que ca marche il aurait fallu que l'image soit mise dans le css avec les liens et les listes, mais osef maintenant que j'ai reussi a avoir un menu horizontal vais plus faire le chieur :D
Si tu voulais que l'image change avec le passage de la souris, je ne pense pas que ce soit possible avec du css. Avec un lien derrière oui, mais sinon j'ai jamais vu, à part en java.
Enfin bon, si le problème est réglé :P
attention, java # javascript hein :o
Il a un blème le troll ? :o
C'est pareil, ils commencent tous les deux par java :D
jpréfère la javanaise :ack:
jpréfère la javanaise :ack:[/quotemsg]C'était pour quel mod déjà, que tu codais en javanais ? :lol:
Marrant, j'ai l'impression d'avoir parlé dans le vent :D
/!\ Attention post long [:666] /!\
Déjà tu as délaissé la liste pour le menu, alors que pour un menu, il faut obligatoirement utiliser une liste, oui on peut obtenir le même résultat visuellement d'une autre manière, tout comme on peut peindre un mur extérieur avec un pot de peinture d'intérieur, mais est ce que ce sera le même résultat ? Non. Ce respect de l'utilisation des balises cela s'appelle la sémantique : l'utilisation des balises pour ce qu'elles sont et uniquement pour ce qu'elles sont. C'est important pour le référencement et pour l'accessibilité. Effectivement, un navigateur de malvoyant par exemple, fera attention au balisage et à quel type de balise utilisé pour mettre plus en avant l'information ou pas ou d'une manière différente. Or là tu as utilisé une balise dd dt ce qui est une balise pour définir un terme, comme cela par exemple :
Sémantique :Respecter la sémantique HTML, c'est respecter l'utilisation des balises pour encadrer des contenus. HTML se compose d'une centaine de balises, chaque balise ayant une définition qui lui permet d'assurer un rôle : exemple, une balisepour un paragraphe de texte, une balise
pour un titre ...
En gros ça n'a rien à voir avec un menu ^^
Donc il faut utiliser une liste que voila ;)
(Pour en revenir au niveau de la sémantique, ce n'est pas ton cas mais je le dis quand même pour information pour toi et d'autres, il faut surtout ne jamais utiliser les tableaux pour faire de la mise en page, les tableaux ne sont à utiliser que pour des données tabulaires.Vraiment une mise en page en tableau est atroce, ca produit un code lourd, illisible, ca ralentit l'internaute autant pour le téléchargement que pour le rendu des tables, ça enferme le site dans des grilles impossible de se défaire, ça apporte donc plein d'embrouilles autant niveau CSS, que mise à jour du site, personnalisation, rapidité... et de toutes façon un design n'est pas une donné tabulaire, donc que des bonnes raisons que de ne pas utiliser les tableaux pour faire sa mise en page [:666])
Sinon j'ai regardé ta CSS, et l'utilisation de fond.jpg est totalement inutile et surcharge ton site puisque l'image est juste un noir uni il suffit de mettre une couleur de background (PS : en fait j'ai rien dit, mon écran est mort et j'avais pas vu les diagonales [:xdddd] )
Ensuite dans #menu tout ça est inutile ;)
position: inline;top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
Pour faire tes boutons, j'ai donc assigné des dimensions aux liens, et je les ais mis en "block' pour pouvoir le faire.. mais en block ils sont à la ligne n'est ce pas ? Fait le test ;). Pour corriger ça, je les ais tout betement mis en flottant à gauche ^^
Voila ce que ça donne au final :
#menu a {float:left;
display:block;
width:170px;
height:60px;
}
J'ai ensuite masqué les span qui sont la pour le référencement de ton site, et toujours pour les navigateurs en mode texte ou pour mal-voyants (dans un but d'accessibilité donc, et oui l'accessibilité (et donc le respect des standards) améliore grandement le référencement :) )
#menu span {display:none} /* Pour cacher les titres du menu */
Si tu voudras faire un rollover (le bouton change quand tu passes la souris dessus) ça se passeras simplement comme ça :
#menu a:hover {background...
}
Tu peux même utiliser cette astuce de faire un rollover avec une seule image, et je te la conseille, c'est plus simple à réaliser et c'est légérement plus rapide pour les internautes au téléchargement (moins de fichiers) :
http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique
Quoiqu'il en soit n'utilise jamais au grand jamais du javascript pour faire ce genre de choses. On n'utilise le javascript qu'en cas de dernier secours et s'il existe une solution alternative, surtout en CSS, il faut l'utiliser. De plus si on a recourt au javascript, il faut bien veiller à ce que ton site soit navigable et que toutes les informations soit accessible avec javascript désactivé, en bref : proposer une alternative (tu peux par exemple faire le système en CSS, et ajouter du javascript si tu trouves le rendu vraiment meilleur, comme ça si le javascript est désactivé, pas de soucis il reste le CSS ^^, enfin il ne faut pas surcharger de scripts pour autant, il faut vraiment utiliser le javascript de façon la plus minimale possible pour ne pas alourdir considérablement le site et le code).
Sinon j'avais une question.. t'as lu le tuto du Site du zero ? Si ce n'est pas le cas, tu devrais, ça prends vraiment très peu de temps, et c'est extrèmement formateur.
Pour tout t'avouer, je n'avais jamais fait ça avant aujourd'hui, c'est vraiment la première fois que je fait ça :D c'est pourquoi je t'avais donné une solution qui, je pensais, marcherait sans problème, mais j'ai découvert, enfin je crois qu'une balise inline ne peut pas recevoir de dimensions, c'est pourquoi ça ne marchait pas ^^'
J'ai pris ton site et j'ai fait quelques tests différents jusqu'a arriver à ce résultat... et d'ailleurs je vais te filer une énorme astuce auquel on ne pense pas toujours :
Mettre une bordure de 1 pixel et d'une couleur flashy sur tes elements pour bien voir leur position et dimensions.. et de mettre des couleurs différentes si tu en as plusieurs bien sur ;)
(il ne faut pas oublier que la bordure de 1px prend 2 px de plus en hauteur et largeur (1 à gauche/en haut et un à droite/en bas).. donc par exemple quand j'ai placé ton menu, le dernier bouton se retrouvait à la ligne puisqu'il n'y avait plus assez de place en largeur, attention à bien faire attention à ça aussi, les bordures prennent de la place)
Bref, j'ai finit, il est deux heures du mat', j'ai pas internet et j'ai ma philol à faire, à demain : D
PS : petite remarque, ton site en 800x600 donne une scroll horizontale ;)
Quelques liens indispensables :
Reste une puce sur ta version du site :P
Sinon merci pour ce petit cours :D
tu peux réduire la taille du png de fond :P :
http://pix.nofrag.com/bf/a1/1cb9ba14c644b9d78650c4f4bdcb.html
En meme temps entre 1ko et 0.1 c'pas la meme difference qu'entre 10mo et 1mo :/
demande ca à xav :ack:
En meme temps le fond tu le dl une fois, sauf si tu t'amuses a chaque fois a faire ctrl F5 :ack:
En meme temps entre 1ko et 0.1 c'pas la meme difference qu'entre 10mo et 1mo :/[/quotemsg]Si c'est important. Il faut toujours minimiser au maximum ;)
Par exemple tu pourrais regarder si tes icones ne prendraient pas moins de place en gif, et aussi tu pourrais les faire plus petites et appliquer un fond noir à ton menu.
PS : tient eux ils ont fait le menu un peu différemment ;)
C'est la confection d'un design CSS etapes par etapes : http://css.alsacreations.com/xmedia/exemples/design_css/etape4.html
Réduire trop l'image de fond est une grosse connerie. Le temps que tu gagneras lors du téléchargement se paie ensuite par une plus forte charge CPU lors du rendu. Il vaut mieux faire un fond de 20x20 px que 1x1.
Si ton visiteur a un PC un peu lent, naviguer sur ton site sera très désagréable.
Fait pour le fond, je m'attaque aux images du menu. En tout cas merci pour votre aide :)
Réduire trop l'image de fond est une grosse connerie. Le temps que tu gagneras lors du téléchargement se paie ensuite par une plus forte charge CPU lors du rendu. Il vaut mieux faire un fond de 20x20 px que 1x1.Si ton visiteur a un PC un peu lent, naviguer sur ton site sera très désagréable.[/quotemsg]
C'est pas faux ^^
J'en faisais les frais tout les jours avant [:gdb1881]
Faut trouver un bon compromis quoi.
Si tu voudras faire un rollover (le bouton change quand tu passes la souris dessus) ça se passeras simplement comme ça :
#menu a:hover {background...
}
Tu peux même utiliser cette astuce de faire un rollover avec une seule image, et je te la conseille, c'est plus simple à réaliser et c'est légérement plus rapide pour les internautes au téléchargement (moins de fichiers) :
http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique
[/quotemsg]
Hum je sais ca ferait moins de chose, mais bon j'voudrais bien faire un roll over pour chaque :P
Par contre j'ai essayé de le faire pour chaque image donc:
.acceuil a:hover {background-image: url("design/mp3.png"); background-repeat: no-repeat; background-position: center;}
}
mais ca n'a pas l'air de fonctionner :x
edith: pour le scroll en 800x600, c'est du au fait que la page est pour une resolution de 850px en largeur :/
Bon double juste pour dire que j'ai trouvé, un .accueil:hover tout con suffisait. J'ai appris un truc, moi qui croyait que le :hover s'appliquait que sur les liens ^^
J'étais crevé pour sortir ça moi :sweat:
Sinon rien n'empche de faire un rollover pour chaque bouton (1 image par bouton quoi), j'ai pas compris.. :/
Tu pourrais meme pousser le truc vachement loin en n'utilisant qu'une seule image pour les 10 états de boutons différents ^^
Ou bien mieux, tu pourrais tout betement remplacer tes images lorsque la souris est sur le bouton, par le texte qui sont dans les 'spans' ;)
En fait la tu as mis le hover sur ton lien en faisant ça ^^
On peut mettre des hover sur tout types de balises, mais seulement pour que ce soit reconnu par IE, il ne faut le mettre que sur les liens si c'est indispensable ;)
(par exemple si ça rajoute juste un petit plus graphique c'est pas indispensable que les utilisateurs d'IE le voient)
Sinon il rend bien ton menu je trouve ;)
Bah disons que j'ai remis les anciens boutons donc si l'hover passe pas, au pire je mets un title="nom de la cat" comme ca les utilisateurs d'IE sont pas totalement perdus :D
Et quelle version du menu, avec ou sans l'hover, car j'trouve en fait la police a chier, c'etait juste pour un test :D
Il passera, suffit de mettre le hover sur le lien ;)
Personnellement je fais toujours tout mon possible pour avoir une compatibilité proche de 100% avec tout les navigateurs..
Sinon je parlais de la version avec hover ^^