problèmes de roll over...help !!!!

[Khira]

Je sais que le sujet a déjà été abordé plein de fois, mais je ne trouve pas de solution quand meme...

En fait j'ai une page d'accueil avec 5 roll over, qui font office de menu : www.ghouls-n-roll.com
Comme ils étaient lents et en javascript, j'ai voulu les refaire en CSS, avec une méthode d'"affichage instantané". Voila ce que j'obtiens : www.ghouls-n-roll.com/indexx

Les roll over sont effectivement instantanés, mais il reste quelques problemes :
- les images remontent légèrement lors du survol
- l'image du milieu s'affiche mal lors du survol, mais sous IE seulement

et je ne sais pas comment faire pour que les images soient au centre de la page quelque soit la taille de la fenetre/de l'écran...

merci d'avance pour votre aide !!

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; AOL 9.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

[Khira]

ca n'inspire personne ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; AOL 9.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

[calimo]

- les images remontent légèrement lors du survol

Je pense que tu aurais probablement plus de réponses si tu étais plus clair... Qu'est-ce qui ne va pas précisément ? Tout m'a l'air bien non ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firerenard Firefox/2.0

[Khira]

Heu je pensais avoir été claire, je vois pas trop ce que je peux dire de plus...
Si tout parait normal c'est peut-etre que tu n'es pas allé voir la bonne page ?
Sur cette page, les images remontent de quelques pixels quand on passe la souris dessus, au lieu de rester fixes, et je ne vois pas ce qui en est la cause...

Sous IE (et seulement IE), l'image du milieu s'affiche mal lors du survol : elle est dédoublée. Et encore une fois, je ne comprend pas pourquoi, vu que les 5 roll over sont fait exactement de la meme facon et que les 4 autres fonctionnent


Et le dernier probleme, qui ne concerne pas vraiment les roll over, c'est juste que je voudrais centrer ce bloc d'images et que je n'y arrive pas... sur mon pc portable je les vois bien au milieu, mais sur mon fixe par exemple elles sont décalées a gauche, parce que l'écran, et donc la fenetre ne sont pas de la meme taille.
C'est surement un truc tout bete dans le CSS ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; AOL 9.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

[calimo]

Effectivement je regardais la page d'accueil normale en pensant que c'était de celle-là qu'il était question

Bon, dans ta css, tu as multiplié les propriétés "-moz-background-*" que tu vas commencer par supprimer, car elles ne sont reconnues que par Mozilla.

Ensuite, tu as mélangé des CSS "en-ligne", c'est à dire dans l'attribut "style" des éléments html. Cela rend très difficile de savoir quel style s'applique à quoi. Déplace-les dans ta feuille de style (avec le bon sélecteur). Essaye aussi de généraliser toutes les propriétés répétées

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firerenard Firefox/2.0

[Khira]

merci !

les moz-background reviennent tout seuls

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; AOL 9.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

[Khira]

Apres avoir passé la soirée et la matinée là-dessus, je déclare forfait...

J'ai réussi à obtenir ceci : www.ghouls-n-roll.com/indexx, je crois que le code est un peu moins moche qu'avant^

...MAIS : je n'arrive pas a faire en sorte que les 5 images se touchent...sous IE il y a un espace entre la deuxième "ligne" et la troisième, et sous FF il y en a entre chaque ligne :

sous FF :


sous IE :


...et pourquoi, mais pourquoi, l'image en bas a droite est-elle la seule a être coupée ?? (son cadre rouge devrait etre complet)

et puis les moz-background finissent toujours par revenir, dès que je touche au CSS je crois.

si quelqu'un a des conseils, c'est vraiment pas de refus !!

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; AOL 9.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

[calimo]

Je m'étonne de ne pas l'avoir indiqué plus tôt, mais tu travailles en mode "quirk" à cause du doctype choisi, ce qui fait que les navigateurs se comportent forcément de manière imprévisible.

Utilise un doctype provoquant le mode 'standard'. Par exemple

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

(C'est un doctype HTML 4.01 strict).

Ensuite, je répète ce que j'ai dit plus haut :

tu as mélangé des CSS "en-ligne", c'est à dire dans l'attribut "style" des éléments html. Cela rend très difficile de savoir quel style s'applique à quoi. Déplace-les dans ta feuille de style (avec le bon sélecteur).

Tu as des déclarations dans la balise <style> et d'autre en-ligne dans les attributs style="...". Certains sont en conflit, c'est donc des problèmes assurés !

Code : Tout sélectionner

#lienfdq {(...)
    width: 100px;
    height: 100px;
    (...)}

Comparer avec

Code : Tout sélectionner

<p style="width: 300px; height: 222px;" id="lienfdq">

Supprime ces déclarations en-ligne. Et n'en rajoutes pas de nouvelles !

Pour le reste, les &nbsp; et les <br> sont à éviter et peuvent provoquer des effets bizarres sur une mise en page délicate comme la tienne. On est dans la rubrique Nvu, donc je me retiens de dire tout ce que je pense des éditeurs wysiwyg

Voilà, bonne chance, et surtout ne désespère pas, c'est comme ça qu'on progresse

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firemarsupilami Firefox/2.0

[Khira]

Merci d'avoir repondu ! En fait c'est pas moi qui ai choisi le doctype, Nvu met automatiquement <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> pour toutes mes pages... et de toute facon meme quand je mets le tien, celui-là se remet tout seul...

Sinon j'avais effectivement pas corrigé cette histoire de styles, je crois que maintenant c'est bon.

Pour les &nbsp; et les <br>, j'ai fait ca :

<p id="liendope"><a href="dope/accueil_dope.html"></a></p>
<p id="lienfdq"><a href="fdq/accueil_fdq.html"><br>
</a></p>
<p id="liendolls"><a href="dolls/accueil_dolls.html"><br>
</a></p>
<p id="lienwed"><a href="wed/accueil_wed.html"><br>
</a></p>
<p id="lientlv"><a href="tlv/accueil_tlv.html"><br>
</a></p>

mais si je touche aux <br> restants, le premier roll over disparait carément !

En tout cas maintenant la mise en page est ok sous IE, mais sous FF rien n'a changé


Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; AOL 9.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)