Problème de décalage sur IE, pas sur FF ni Chrome

EDIT : Voir dernier message !

Bonjour,

Je me permets de venir poser une (deux ? ) questions ici, étant donné que beaucoup des réponses que je cherchaient s'avéraient souvent se trouver sur ce site !

J'ai une page que j'essaye de designer 100% en CSS, pour le moment je m'en sors pour pas mal de choses, mais je bloque sur deux principalement. La plus ennuyeuse :
J'ai un attribut /opacity/ sur une <div>, qui est animée via /transition-property/ et /transition-duration/ . Par dessus cette <div>, j'ai un <span> avec du texte : je l'ai séparé de la div car je souhaiterais, dans l'idéal, ne pas toucher à l'opacité de ce texte. Probleme : lorsque ma souris passe au dessus de ce <span>, la <div> du dessous perd le focus et l'image redevient sombre...
Comment fait-on idéalement ? (si c'est trop compliqué/prise de tête, j'appliquerai l'opacité au texte également et pis tant pis..)

Deuxieme petit soucis annexe : je souhaiterais rendre certains textes non selectionnables, comme ceux du centre par exemple : faut-il obligatoirement passer par du jquery comme on trouve sur le net ?

Lien vers la page en question

Merci beaucoup d'avance !

EDIT : Petite précision, la page est en constante évolution
Modifié par Maien_ (10 Oct 2011 - 18:21)

Hello.

Maien_ a écrit :
Probleme : lorsque ma souris passe au dessus de ce <span>, la <div> du dessous perd le focus et l'image redevient sombre

Déclenche le :hover sur le parent. Au lieu de

#tdivl:hover

utilise

#tdl:hover #tdivl

Maien_ a écrit :
je souhaiterais rendre certains textes non selectionnables

Impossible. Pourquoi veux tu faire ça d'ailleurs?
Modifié par Florian_R (16 Sep 2011 - 20:25)

Hello et merci beaucoup de ta réponse rapide !
Pour le texte oublie, c'est vrai que c'est débile en y repensant, mais c'était sûrement de la curiosité de ma part

Alors je suis en train de bidouiller en local la page... et j'avoue etre un peu paumé sur coup, serait-il possible d'avoir l'arborescence que je suis censé obtenir stp ?

Ca doit ressembler à ca :

<td> <td></td> <span>Texte 1</span> </td>
<td> <td></td> <span>Texte 1</span> </td>

Ou ca au final :

<td> <span>Texte 1</span> </td>
<td> <span>Texte 1</span> </td>

En fait je n'arrive pas à comprendre le principe pour arriver à ce que je veux...
Il n'est apparemment pas possible de modifier directement l'opacity de mon image avec une seule div c'est bien ca ?
Donc tu la fais apparaitre dans le div parent, dans le td en l'occurrence, c'est toujours bien ca ?

Je résume : Je charge l'image à opacité 0.5 dans le div qui en dessous de tout.
Je charge l'image à opacité 1 dans mon td. Quand je passe au dessus du td, l'image apparait.

J'ai bon ?

Merci !

EDIT ! : En fait je viens de constater qu'il n'y a pas de "," entre les deux sélécteur dans le code CSS que tu viens de me filer ! Ca doit être ça qui change tout, je creuse
Modifié par Maien_ (17 Sep 2011 - 00:28)

Bon eh bien voilà, j'avais zappé cette méthode...
Modifier le paramètre du child lors d'un hover sur un parent.

Erf, désolé du dérangement, et encore un grand merci !

EDIT : donc au final, je me retrouve avec le code suivant par exemple:

#tdivl, #tdivr { background: #222; }
#tdl:hover #tdivl, #tdr:hover #tdivr { background: #666; }

Modifié par Maien_ (17 Sep 2011 - 00:43)

Bonjour,

tout comportement visant les utilisateurs de la souris devrait avoir son équivalent pour les utilisateurs du clavier. Ici doubler toute occurence de :hover par :focus ne suffira pas si :hover est sur un div ou td puisque seuls les liens et éléments de formulaire peuvent par défaut avoir le focus (div:focus ne sera pas OK mais a:focus oui).

Attention dans ton code source je vois des liens vides entre des lignes de texte.
Si tu nous fais cliquer sur Photography / Soon alors ces 2 termes doivent être dans le lien. C'est bon pour l'accessibilité (comment deviner où mène un lien si rien ne l'indique ?) et aussi pour le référencement (Google comprend très bien qu'un intitulé "Photography" ne parle pas d'endives mais est moins à l'aise avec un lien vide).
Puisqu'un lien ne peut contenir d'élément de type bloc comme un div en XHTML 1.0, il faut donc utiliser un span (ou l'emphase forte si nécessaire) si des éléments enfants se révèlent nécessaire pour mieux designer le lien.

<a href="/photo">
  <span>Photography</span>
  <span class="tournicotis">soon</span>
</a>

a span {
 /* instructions communes aux 2 span */
}

a:first-child {
  /* pas dans IE6 */
}

a.tournicotis,
a span + span,
a:last-child {
  /* 3 façons de cibler le second et dernier span, support resp. dans IE7+, IE7+ et IE9+ pour ce qui est de notre ami IE */
}

Effectivement tout ce que tu pointes est juste !
Je suis un pur codeur du Dimanche, d'où ces erreurs...
J'y ai pensé pour le problème de lien, mais par manque de temps (départ en vacances), et d'utilité dans l'immédiat - aucun des deux sites vers lesquels cette page doit mener n'existe pour le moment - je l'ai laissé de côté En tout cas avec tes indications pour le code ca va beaucoup m'aider car je suis toujours un peu mal à l'aise avec les arborescence !

(bon j'avoue que j'aime bien faire un peu mumuse avec le code, je découvre toutes ces nouveautés de transform etc qu'il n'y avait pas à l'époque où j'ai un peu appris le CSS)

Encore merci à toi Felipe !
Une fois la page finie je viendrai peut-être demander l'avis des experts

C'est dur de jouer avec toutes ces nouvelles possibilités apportées par CSS3 et de faire tout bien "comme il faut" niveau HTML, CSS et accessibilité du 1er coup, codeur du dimanche ou pas (et je suis pas sûr que "comme il faut" ait un sens)


En ne lisant que le titre de ton sujet, j'ai pensé que tu avais un problème dont la solution pouvait être pointer-events : bon il se trouve que Florian_R a mieux analysé le problème
Pour info, Lea Verou montre un exemple d'utilisation à 13:52 sur http://www.ustream.tv/recorded/17155906 (et http://leaverou.me/2011/03/custom-select-drop-downs-with-css3/ contient 9 autres points dont certains TRÈS intéressants )
Modifié par Felipe (19 Sep 2011 - 10:10)

Bonjour à vous,

Je remonte ce même sujet pour le mettre à jour :
J'ai abandonné l'idée des transitions sur le scale, et même le scale lui même, apres réorganisation de mes div (le <a> englobant le tout), ca déformait tout... Trop de contraintes pour un joujou et j'ai décidé de vite finir cette page cette semaine.

J'en suis donc arrivé à des transitions uniquement sur les couleurs et opacité, et ca fait la blague comme je le souhaite !

En revanche, côté design, tout est en place sur Chrome et FF, mais pas sur IE...
Un décalage de quelques pixels est apparrent sur IE9 (et versions antérieures je suppose).
Sauriez-vous d'où ca peut venir svp ?
Merci !

PS : Page visible ici

Personne aurait une petite idée ?


EDIT : pour une petite piste, la validation W3C me renvoit ceci :

"Line 22, Column 50: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag"

Pour le code suivant :

<div class="tdiv" id="tdivl"></div>

Il précise :

"One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>")."

Ce qui est effecitvement le cas, un <a> englobe les divs, comme on m'avait précédemment conseillé. Pourtant, j'ai un display:table-cell sur ce <a>. Comment faire disparaître cette erreur ?

J'émets une hypothèse avant de me lancer dedans j'aimerais qu'elle soit valider (je suis pas ultra rapide et j'ai pas beaucoup de temps à moi je préfère ne pas le gaspiller) : Si je remplace mon texte qui est dans une <div> pour le mettre dans un <span>, ce <span> reste dans le <a> qui gardera la taille de la cellule, et les <div> des images, je les sors du <a> et les mets au même niveau que ce dernier. C'est censé fonctionner ?
Modifié par Maien_ (12 Oct 2011 - 15:15)