[Resolu] Manipulation et survol de bloc non réussie

Bonjour à tous,

Depuis quelques jours j'essais de manipuler les blocs au lieux des tableau pour construire mon nouveau site mais il y a quelques astuces dans les manipulations qui doivent m'échapper.

J'arrive à faire des survols, placer des blocs en relatif mais la présentation n'est pas forcement au rendez vous (même si j'en suis plus très loin)

J'essais donc de creer une barre de menu avec image survolée mais sans préchargement javascript.
Pour cela j'ai placer deux calques l'un sur l'autre et au survol, celui qui ce trouve au dessus disparait.

Je tente egalement de placer tous les boutons par rapport au premier me permettant de les placer tous ensemble mais je n'arrive pas à les rapprocher les uns des autres.

L'utilisation d'un nouveau calque contenant le texte provoque egalement quelques probleme avec le survol, j'aurrai bien tenter de placer le texte dans le calque contenant l'image d'origine du menu mais celui ci ne ce place pas correctement.

Voici l'adresse de la page de démo : http://toutenkamion.net/
Modifié par percherie (26 Aug 2006 - 15:10)

Salut.
utilise une liste a puce.

#menu {float:left; width:YYpx; }
#menu ul { list-style:none;margin:0; padding:0; }
#menu li a {background:url(adresse image1) no-repeat ; margin:YYpx;}
#menu li a:hover {background:url(adresse imagesurvolée) no-repeat ;}

Modifié par jp94 (12 Mar 2006 - 14:44)

Je te remerci pour ta rapidité, j'ai tenter de mettre en applications tes conseils mais j'arrive à avoir effectivement une image de fond derriere le texte mais elle n'apparait pas entierement.

Je pense que je doit faire des erreurs dans la mise en forme du code html, peut tu m'en dire un peut plus dessus?

Bonjour,

L'espacement excessif de tes blocs est du au positionnement relatif. En effet, ce positionnement te permet de déplacer des éléments dans le flux mais les éléments suivants ignorent ce mouvement, et font donc comme si tout était en place.
Traditionnellement, un menu est matérialisé par une liste, ceci pour refléter le fait que les éléments du menu sont liés entre eux. Ainsi, ils se placent naturellement et évitent d'avoir recours à un positionnement inutile.
Attention à ne pas utiliser des PNG 24bits pour la transparence, IE ne les gère pas, pas plus quel a pseudo-classe :hover qu'il ne reconnait que sur les <a>.
Montre-nous ton code après avoir mis en pratique la solution de jp94, ce sera plus pratique pour voir ton problème d'image de fond.

Ok, donc si j'ai bien compris, je doit creer une veritable liste et avec les styles CSS je peut faire en sorte à ce que les puces de liste soit les images de mon menu.

Par contre je souhaite que les images survolée soit chargées à la premiere visite de la page sans préchargement javascript, pour l'instant j'ai opter pour la solution d'image superposée, l'une cachant l'autre jusqu'au survol.

Merci pour le rappel d'incompatibilitée, j'ai été surpris y a quelques jours quand j'ai vu le rendu avec IE mais le site que je compte mettre en ligne sera destiné à la famille, amis et amis d'amis...
Ceux qui utiliseront donc IE aurront donc un rapide msg d'explication sur les lacunes de IE (compatibilitée et sécurité) avec un msg incitatif pour l'utilisation de FireFox.
J'ai egalement apris que la version 7 de IE permettra enfin d'utiliser les PNG 24 bits ainsi qu'une bonne partie des styles CSS, les irréductibles de IE pouront tout de même visiter le site correctement d'ici la fin de l'année

Je sais que ce n'est pas forcement "pro" mais ce choix, je l'espère, permetra surement de nouvelle conversion vers les logiciels libre respectueux des recommandations du W3C... dans un avenir ideal, microsoft sera obligé de suivre la danse

Je vais tenter ces modification en semaine, je vous tient au courant, surtout si je réussi...
Modifié par percherie (12 Mar 2006 - 21:49)

la methode la liste a puce est tres bonne suffit pour que tes images apparaissent entierement d' ajouter une largeur et une hauteur egales a celles de tes images dans la regle :
#menu li a {width:valeur de l'image; height:valeur de l'image; }

Voici donc un exemple de menu construit grâce aux conseil de JP94 du forum alsacreations : http://toutenkamion.net/

Par contre les images ne sont plus "prechargé", je pense réutiliser le systeme d'image chargé mais masquée par une autre située au dessus (est une bonne chose?)

Les puces sont positionnée en "relatif" je pense que ça doit fait ainsi mais je n'ai aucune piste qui pourrait me le confirmer.

Ps : j'utilise une version d'essais de Dreamweaver 8, en mode création les textes sont décallés mais selon les calculs et visuellement dans FireFox tous fonctionne, est un bug de leur part ou une complication inutile faite de mon coté?
Modifié par percherie (26 Aug 2006 - 15:10)

Je viens de faire quelques modifications : http://toutenkamion.net/

J'ai donc placer sous la premiere liste, une seconde liste dans un autre bloc.

J'aimerai savoir si techniquement cette solution est acceptable par les regles du W3C
Modifié par percherie (26 Aug 2006 - 15:10)