28172 sujets

CSS et mise en forme, CSS3

Bonjour !

Je suis en train de réaliser le design suivant:
http://xsoftware.fr/

L'ensemble est visuellement à peu près stable, mais en coulisse, c'est tout autre chose.
Voici les problèmes que je ne parviens pas à résoudre, malgré plusieurs recherches:

- Lorsque l'on fait Ctrl.+ , sous Firefox, le menu se comporte étrangement: comme vous pouvez le voir, chaque bouton va progressivement à la ligne au fur et à mesure de l'agrandissement. C'est aussi valable lorsque la fenêtre est redimensionnée aux alentours de 800*600. J'ai essayé "min-width", mais rien n'y fait, sans doute ai-je sauté un étape quelque part.

- Lorsque l'on fait Ctrl.- , sous Firefox, le footer reste planté en plein milieu, et je n'arrive pas à: soit l'étendre jusqu'en bas, soit le faire suivre le bas de la page sans le redimensioner. Les deux solutions me conviennent, avec un préférence pour la seconde.

- Dans le cas où le contenu est plus long, les bandes latérales ".zonegauche" et ".zonedroite" qui entourent ".contenu" ne s'étendent pas jusqu'en bas... Et je ne parviens pas à y remedier...

Voici donc mes principaux problèmes, pour lesquels, je vous le garantie, j'ai beaucoup cherché d'information avant de m'en remettre à vous.

De plus, si vous avez dèjà quelques pistes pour les problèmes sous IE, je suis prenneur, étant sous Linux, il est difficile pour moi de tester cela facilement. Smiley cligne

PS: Contrairement à ce qui est dit dans le footer, le site n'est pas encore Valide (j'y travaille), mais je rencontre un problème étonnant: le validator de w3c me dit en gros qu'il est interdit de mettre un block dans une inline, ce qui est mon cas. Hors, dans le CSS, je transforme mon inline en block (display), donc ça donne un block dans un block, ce qui est autorisé, mais l'erreur demeure... Une idée ?

D'avance merci Smiley cligne

++
Mr.Yann a écrit :
C'est aussi valable lorsque la fenêtre est redimensionnée aux alentours de 800*600. J'ai essayé "min-width", mais rien n'y fait, sans doute ai-je sauté un étape quelque part.

Le menu est positionné en absolu, ce qui est ici inutile. Ton problème a un lien avec ce positionnement absolu.

Mr.Yann a écrit :
Lorsque l'on fait Ctrl.- , sous Firefox, le footer reste planté en plein milieu

Il vient tout simplement se placer à la suite du contenu, ce qui est parfaitement normal.
Voir la FAQ pour les moyens de placer un bloc tout en bas de page.

Mr.Yann a écrit :
Dans le cas où le contenu est plus long, les bandes latérales ".zonegauche" et ".zonedroite" qui entourent ".contenu" ne s'étendent pas jusqu'en bas...

Il ne fallait pas faire des bandes latérales, mais combiner ces deux dégradés en une seule image répétée en hauteur sur toute la hauteur d'un conteneur (peut-être directement BODY, ou sinon un conteneur global pour ta partie de contenu).
Voici donc mes principaux problèmes, pour lesquels, je vous le garantie, j'ai beaucoup cherché d'information avant de m'en remettre à vous.

Mr.Yann a écrit :
De plus, si vous avez dèjà quelques pistes pour les problèmes sous IE, je suis prenneur, étant sous Linux, il est difficile pour moi de tester cela facilement. Smiley cligne

Euh... corriger les problèmes avec IE6 (et peut-être IE7) peut représenter le tiers de ton travail sur cette intégration. Je te conseille fortement de trouver un moyen pour tester avec ce navigateur (dual boot, Windows virtualisé, IEs4Linux...).

Mr.Yann a écrit :
Contrairement à ce qui est dit dans le footer, le site n'est pas encore Valide

Ne pas l'annoncer dans le pied de page ou ailleurs, ça sert à rien et ça parasite les informations présentes sur le site. Smiley cligne

Mr.Yann a écrit :
le validator de w3c me dit en gros qu'il est interdit de mettre un block dans une inline, ce qui est mon cas.

Tout à fait.

Mr.Yann a écrit :
Hors, dans le CSS, je transforme mon inline en block (display), donc ça donne un block dans un block, ce qui est autorisé, mais l'erreur demeure...

Ne pas confondre:
- nature des éléments HTML et imbrications possibles;
- modes de rendu en CSS (propriété display).
Il ne s'agit pas de la même chose.

Tu devrais faire l'inverse: un élément de type en-ligne dans un élément de type bloc, et passer l'élément de type en-ligne en affichage de type bloc.

Lire aussi: http://css.alsacreations.com/Bases-et-indispensables/La-structure-des-balises-bloc-et-en-ligne
Salut,
Bon j'ai pas vraiment regardé en détail, mais je peux répondre pour quelques points déjà Smiley smile


- étant sous linux aussi, je teste avec IEs4Linux. La majeure partie des "bugs" peuvent être vus et résolus avec..
- Le validateur HTML ne prend pas en compte le css. Tu as donc un élément block à l'intérieur d'un élément inline. D'ou l'erreur.

Bonne fin de journée

... grillé... et en beauté en plus Smiley smile ...
Modifié par siddhy (02 Sep 2008 - 17:39)