Problème de selection avec "Design XHTML/CSS avec 2 colonnes"

Salut tout le monde,

J'ai réutilisé des morceaux de ce tuto, très bien fait. (une grand merci au passage).

Mais, je me suis aperçu d'un petit problème qui est présent dans le tuto lui-même. Je voudrais avoir votre avis et vos conseils.

Voilà, sur toute les pages, tout marche bien, il y a seulement un bug sur la dernière page du tuto, celle qui est sensé tout faire marcher chez IE. Or, sur cette page (http://css.alsacreations.com/xmedia/exemples/design_css2/etape6.html, quand on utilise IE, on ne peux pas selectionner le texte du DIV contenu, sauf tout en bas de la page.

Cela est assez problématique, parce que j'ai mis un formulaire de contact dans ce DIV et du coup, sous IE, on ne peux pas cliquer dedans ou écrire du texte dans le textarea. Comme si il y avait quelque chose qui venait se placer par dessus.

Voilà, si vous avez des idées !

Bon dimanche !

LF

Pour ma part je ne constate pas ce bug...

Par contre, il semblerait qu'il y ait un problème d'affichage de l'image de fond de div#global une fois les correctifs pour IE apportés.
Je vois l'image de fond sur l'étape 5 mais plus sur l'étape 6.

Edit : autant pour moi, l'image de fond ne s'affiche pas car le filtre pour la transparence PNG ne fonctionne pas avec IE 6 sous Linux/Wine.
D'ailleurs, vu que sans la transparence PNG j'arrive à sélectionner le texte, il faudrait peut-être tester avec et sans la propriété filter...
Modifié par mpop (19 Nov 2006 - 11:42)

Salut.

C'est un effet secondaire de l'utilisation du filtre AlphaImageLoader pour les PNG transparents. Comme je l'ai signalé dans le tutoriel, cela pose des problèmes d'interaction avec la page.

Une solution est de passer les éléments problématiques en position: relative;. Je ne peux pas te garantir que la mise en page ne va pas bouger . A tester.

mpop a écrit :
D'ailleurs, vu que sans la transparence PNG j'arrive à sélectionner le texte, il faudrait peut-être tester avec et sans la propriété filter...

Dans ce cas-là, il n'y aura plus de problème. Si on peut se passer de la transparence, autant l'éviter. La propriété filter peut être pratique quand c'est vraiment nécessaire, mais ce n'est pas la panacée non plus
Modifié par Sopo (19 Nov 2006 - 11:46)

Sopo a écrit :
C'est un effet secondaire de l'utilisation du filtre AlphaImageLoader pour les PNG transparents. Comme je l'ai signalé dans le tutoriel, cela pose des problèmes d'interaction avec la page.

À ce propos, il me semble qu'il suffirait de bien calibrer les images de fond pour pouvoir mettre « en dur » dans l'image de fond de div#global l'effet de fondu du dégradé sur les lignes du fond de body.

mpop a écrit :

À ce propos, il me semble qu'il suffirait de bien calibrer les images de fond pour pouvoir mettre « en dur » dans l'image de fond de div#global l'effet de fondu du dégradé sur les lignes du fond de body.

Sans avoir de décalage dans les traits inclinés en arrière-plan de body & de global, dans toutes les résolutions & pour tous les navigateurs ? Difficile à garantir, non ?

Merci beaucoup à tous les deux !
Effectivement, le problème vient bien du filtre AlphaImageLoader.

J'ai contourné le problème en faisant un jpg pour le fondu, semblable à celui qu'aurait fait png. J'ai mis dans le css de IE qu'il lise ce jpg au lieu du png, et ainsi, le texte ets à nouveau selectionnable.

Cela est possible car je n'utilise pas les autres png dans mon site.

Par contre, pour ceux qui on gardé les puces ou l'image de fond en png, cela doit être plus problématique.

Merci encore !

LF

Le problème n'est pas le format PNG en lui même, IE6 les lit très bien. Le soucis, ce sont les PNG transparents. Tous les pixels transparents sont remplacés par des pixels gris.

La tentation de contourner cette limitation par différentes méthodes est grande, car c'est le seul format répandu qui offre une transparence "nette" autour d'un motif, ce qui permet d'imaginer toute une série d'effets visuels.

Mais, au delà de cette question de transparence, le PNG est un excellent format pour les images "simples". Pour une puce ou une image de fond, le poids sera souvent bien plus faible qu'une image jpeg, pour une meilleure qualité !

En résumé, pour ceux qui veulent se débarrasser d'AlphaImageLoader, c'est la transparence qu'il faut supprimer, pas les PNG

Bonjour,
Désolé de parraitre un peu bête , mais avec tout ce remue ménage, je n'ai pas compris ce qu'il fallait véritablement faire!

Tant que j'y suis, concernant ce même, j'ai encore 2 problèmes!

J'aimerais mettre une marge intèrieur au div content avec padding-right.
Impossible, tous mes divs se décalent.

Sous ie mon footer se décale dès que je clique sur un autre lien.
Pourquoi? Mystère!

vous pouvez visionner le site à cette adresse: http://fcpesarreguemines.free.fr

les css sont ds le dossier /css

Merci d'avance pour votre aide et pour ce fabuleux tutoriel

Salut madrid

a écrit :
Désolé de parraitre un peu bête, mais avec tout ce remue ménage, je n'ai pas compris ce qu'il fallait véritablement faire!

Dans ton cas, je ne vois pas de problème, tes liens fonctionnent correctement. Donc, il ne faut rien faire de particulier par rapport à ce sujet.

a écrit :
J'aimerais mettre une marge intèrieur au div content avec padding-right.
Impossible, tous mes divs se décalent.

Si tu ajoutes un padding-right, il faut aussi réduire la largeur de #content. Sinon on repousse l'autre colonne vers la droite.

a écrit :
Sous ie mon footer se décale dès que je clique sur un autre lien.

As-tu essayé de jouer sur les marges & padding du pied de page, du conteneur central, de body & html ?