28217 sujets

CSS et mise en forme, CSS3

Bonjour,

Erreur du débutant -- que je suis --, j'ai réalisé mon premier site sous SPIP via Internet Explorer 6. Surprise ! En passant sous Netscape ou Mozilla : rien ne s'affiche comme prévu. J'ai essayé de corriger, ici et là, quelques problèmes... sans grand succès.

Je bute plus particulièrement sur 6 difficultés. Les captures d'écran sous Mozilla et IE6 aideront à la comprendre et peuvent-être constulées ici :
- le résultat attendu sous IE 6 (avec menu déroulé) : <http://ipr.univ-paris1.fr/spip/explorer.jpg> ;
- ce qui arrive sous Mozilla : <http://ipr.univ-paris1.fr/spip/mozilla.jpg>.

Le code de cette page (CSS puis HTML) : <http://ipr.univ-paris1.fr/spip/code2.htm>.

La page en ligne : http://ipr.univ-paris1.fr/spip>.

Les problèmes rencontrés et mes commentaires :

1- Contrairement à IE 6, sous Mozilla, les blocs principaux ne sont pas centrés sur la page. Et là, vraiment, je sèche à trouver une solution.

2- Contrairement à IE 6, sous Mozilla, les blocs de titres des parties hautes ne sont pas alignés à droite et "passent" sous le bloc menu. Mais pas leur texte ! J'ai essayé différentes solutions, sans résultat. J'imagine qu'il s'agit d'un problème de "spacer". Or, je ne comprends pas très bien l'utilité des "spacer". Les descriptions que j'ai pu en lire restent quelques peu ésotériques pour moi.

3 & 4- J'ai quelques problèmes de positionnement de ma "puce" et de mon texte de menu. J'ai essayé quelques "vertical-align" et autres padding, mais les résultats ne sont pas "propres", voire innefficaces. Comment faire un code "propre" ?

5- Une ligne apparait entre mon au niveau de mon "spacer". Pas très esthétique non plus.

6- Le pied de page n'est pas correctement positionné.

Toutes aides et informations seront particulièrement appréciées... Je NAGE...

Cordialement,

GS.
D'abord : un grand merci.

Je tente tout cela pas à pas en espérant ne pas être trop bête...

À suivre donc.
Juste pour compléter, fais l'organisation de ta page par rapport à Mozilla, ensuite les modifs pour que ça cadre sous IE devraient être plus faciles.
Pour le problème 1 : c'est réglé.

Entre IE et Mozilla, il y a une différence pour le "centrage" générale.

- pour IE, un simple body{text-align: center;} suffit ;
- pour Mozilla, il est nécessaire de placer l'ensemble du contenu du site dans un conteneur qui règlera ses marges gauche et droite en automatique. Attention à ne pas oublier, dans ce cas, le width.

Il faut donc faire coexister les deux méthodes. Ce que j'ai fais sans problème grâce à <http://www.alsacreations.com/articles/centrer/>.

À suivre...
Bon, sur le deux : je sèche toujours. Rien à faire. Je me demande s'il s'agit bien d'un problème de "spacer". Des idées ?

...
Pour 3 & 4.

J'ai repris les explications de A list apart pour réaliser un sous menu, en pompant un peu sur un menu présent sur Alsacréation. Mais... le résultat n'est pas brillant...

... encore quelques conseils.