28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Sur le site que je suis en train de concevoir (grâce notamment aux tutos de ce site et au bouquin CSS 2 que je n'ai pas fini de lire !) j'ai un problème bizarre. Le lien "contact par email" sur cette page http://www.volume-z.com/portfolio.html fonctionne sous IE mais pas sur firefox !!!. Le même lien existe sur mes autres pages et ne pose pas de problème.
Quelqu'un a une idée ???

merci de votre aide.

Christophe

PS: le code vous paraitra surement un peu fouillis mais c'est mon premier site.
Modifié par Yumyumnoodle (05 Sep 2008 - 12:57)
Bonsoir,

Le lien fonctionne sous FF3, sous quelle version navigues-tu ?
Peut-être un problème de cache ?

Pourquoi un "overflow:hidden" sur la balise html ? Le scroll en devient pénible...
Ton menu n'est pas très intuitif, on cliquerait plus volontier sur les mots plutôt que sur les formes géométriques placées en dessous, non ?
La "redirection" vers une autre page suite aux erreurs de saisie sur le formulaire de contact est assez "troublante", plus encore le retour qui nous renvoie vers l'accueil Smiley ohwell

Cdt,
Sylvain
Salut,

j'ajoute que ton problème de lien est dû à l'usage excessif du positionnement absolu et au recouvrement des éléments les uns par les autres. En plus d'être inutile pour une mise en page aussi simple, ce positionnement va te poser des problèmes en cas d'augmentation de la taille des caractères (Ctrl + Molette avec Firefox).

Tu pourrais (re)lire les 3 articles sur le positionnement (Openweb) ainsi que les tutos Comment positionner les éléments en CSS et Maîtriser le positionnement CSS dans toutes les situations.

La page des modèles de mise en page pourraît également t'inspirer.

A+
Bonjour,

6l20:
-le problème apparait sous FF3... pas de problème de cache apparemment.
-"overflow:hidden" c'était à cause d'un décalage horizontal qui apparaissait entre les page... mais je l'ai supprimé maintenant.
-Pour le menu en effet je ne me suis pas rendu compte... je vais le transformer.
-Pour la page d'erreur: je ne sais pas trop comment l'intégrer dans ma propre page. Il m’a fallu des heures pour trouver un script d'envoi de formulaire qui fonctionne Smiley rolleyes le PHP c'est too much pour moi Smiley cligne

Heyoan:
-Positionnement absolu: Je ne sais pas trop comment faire autrement si j'enlève mes positionnement la mise en page est sens dessus dessous. Cependant, le Ctrl + Molette avec Firefox semble bien fonctionner.
-Pour le lien: j'ai l'impression en effet que c'est plutôt un problème de couche... à vérifier ! Je vais me plonger dans les tutos que tu m'as indiqués.

Merci pour ces conseils de pro... c'est toujours utile d'avoir un avis extérieur... je vous tiens au courant !!

Christophe.
Bonjour,

Me revoilà avec quelques corrections sur mon site www.volume-z.com :
- moins de positionnement absolu
- plus recouvrement... enfin, je crois Smiley cligne
- Correction du menu: on peut maintenant cliquer sur les mots (merci du conseil 6l20)
- page d'erreur de formulaire revue et corrigée

Malheureusement le problème n'est pas résolu et je ne peux toujours pas cliquer sur le lien dans la page portfolio Smiley decu
bonjour,
a écrit :
#gallery
{display:block; position: absolute; left: 0px; top: 142px; width: 800px; height: 470px;}


ton div 'gallery' se superpose au autres elements de ta page le precedents dans le flux, code de ta page (firefox).

Dans IE , par exemple , les premiers element dans le flux se voit positionnés, dessinés 'sur le dessus' , disons que par defaut ils ont un z-index' superieur aux suivants , dans firefox , c'est l'opposé , les derniers elements dans le flux sont 'affiché' au dessus des précedents .

Malgré un fond transparent , tu ne peut pas atteindre les elements 'se situant en dessous' (technique parfois tenté pour empecher le cllique et copie sur une image) .

Ta mise en forme s'appuie sur le positionnement absolue , qui par definition s'oppose au flux naturel d'une page en rendant l'affichage rigide avec une fausse impression de controle sur celui-ci , ... et des effets secondaires inattendus.( J'apprecie le retour du scroll qui masquait et rendait inaccessible, invisible une partie de ta page sur mon pc portable.)

Cure ?


position:relative;
z-index:1;


Juste pour t'assurer que par défaut ce conteneur sera au dessus des autres conteneurs en position 'absolute' ou 'relative' ou replacé avec des marges (négatives ou non).


++

<editions: ajouts details />
Modifié par re7 (03 Sep 2008 - 20:33)
re7 a écrit :

Cure ?


position:relative;
z-index:1;


Juste pour t'assurer que par défaut ce conteneur sera au dessus des autres conteneurs en position absolute ou relatives ou replacé avec desmarges négatives (ou non).
Mieux encore : prendre le temps de suivre les liens que je t'ai donnés un peu plus haut et faire des tests. Smiley cligne
salut ,

je connais deja ces liens <edit> lu depuis bien longtemps deja , aucun souvenir qu'il fasse mentions de ces differences de traitement a l'affichage </edit>, ce type de comportement ne sied pas seulement a firefox par ailleurs , IE7 peut parfois reproduire des bug de ce genre sur des elements flottants et statiques se cotoyant , l'elements en position statique , au lieu de glisser sous le flottant le recouvre ... génant pour un menu .

Je te propose de tester toi même cette page en appliquant une couleur de fond a gallery et puis d'observer les comportement , rendus d'affichage des differents navigateurs opera /IE , FF , ... .

Cordialement

<hs>j'essaie de telecharger le navigateur de google , mais ça rame grave ! , suis le seul ? </hs>
Modifié par re7 (03 Sep 2008 - 20:47)
re7 a écrit :
salut ,

je connais deja ces liens
Oups ! Mon message ne s'adressait pas à toi mais à Yumyumnoodle. Smiley langue
En tout cas merci ! le problème est maintenant résolu... même si tout n'est pas parfait Smiley ohwell !!! On va peaufiner...


Christophe

PS: comment indiquer que mon problème est résolu ???
Hello Yumyumnoodle,

a écrit :
PS: comment indiquer que mon problème est résolu ???

Tu édites ton premier sujet (bouton prévu à cet effet), et tu modifies le titre en ajoutant [résolu] Smiley cligne

Cdt,
Sylvain