Un affichage correct seulement avec fireFox

[cedricbujon]

bonsoir à tous,

j'ai déjà posté précédemment (post 1) pour ce même problème mais j'ai pas mal avancé dans ma dévouverte des CSS (j'ai peut-être commencé trop haut ou alors ce que je veux faire est irréalisable)... j'ai donc créé un nouveau post.

voici la problèmatique : je souhaite réalisé un site étirable selon un fond graphique ; j'ai donc créé ma première structure selon ce modèle :

je souhaite réalisé l'étirement en agissant sur les conteneurs milieu.

voici les 2 URLs d'essai : page 1 et page 2.

1- L'affichage est correcte avec Firefox.

2- Avec tous les navigateurs, j'aimerai que les blocs menubas et partenairesbas soient collés chacun au bas de leurs blocs parents et du même coup que les blocs milieu s'étirent.

3- Sous IE, le bloc contenu descend lorsque le contenu dépasse une certaine largeur.

4- Toujours sous IE, j'ai un espace à droite et à gauche des blocs entetemilieu et piedmenu que je n'arrive pas à supprimer.

5- Sous Netscape, mes blocs de menu ne se positionnent pas correctement (peut-être à cause du relatif, mais ).

6- Enfin, sous Opéra, c'est la totale, j'ai les bugs (mes erreurs ) de tous les autres.

Merci de votre aide... je commence à :

[cedricbujon]

salut,

je reviens à la charge.....

J'ai effectué des changement, à cette adresse modele :

j'ai supprimé les positions absolues de mon menu et j'ai profité de la même occasion pour le décomposer.

Sur cette page, j'ai introduit des couleurs d'arrière plan afin de mieux se rendre compte de la disposition des boîtes.

1 - Opéra : tout est en place hormis le bloc contenu qui refuse de se positionner au centre.

2- Sous Firefox et netscape, les balises p placé dans mes menus, blocs titremenu (fond jaune) n'apparaissent pas et sont décalées vers le bas.

3- Sous IE : a) les blocs basmenu se répètent

le bloc menuhaut ne prend pas sa hauteur défini (13px) mais la hauteur de celui de droite (10px).

c) il y a toujours un espace entre certains blocs (que l'on voit bien avec les couleurs).

d) le bloc contenu descend toujours lorsqu'il est trop large.

4- je n'arrive toujours pas à remplir toute la hauteur disponible des blocs mommenu et partenaires.

Merci de m'aider, pardonnez mon insistance

[cedricbujon]

bon, je discute bien tout seul.... mais je viens de régler un problème :

j'ai supprimer mes balises P (du point 2) et recopier mes données dans la class titremenu et l'affichage est correct !!!!!

Sais pas pourquoi j'avais rajouté ces balises

[Monique]

Bonjour,

C'est vrai que tu n'as pas choisi la manière la plus simple d'apprendre l'utilisation des CSS

Personnellement, je n'ai jamais travaillé à partir de découpage d'une maquette Photoshop, et j'ai un peu de mal à me retrouver dans ce que tu fais

[cedricbujon]

bonjour monique et merci de me répondre,

Où apporter des précisions dans mon travail pour pouvoir espérer une aide ?

J'ai essayé de travailler selon toutes les consignes que j'ai pu lire sur divers sites (en particulier alsace créations, openweb ou encore médiabox).

Je pense, qu'il faut raisonner comme cela :

1- j'ai un bloc conteneur étirable qui contient 3 autres blocs.

2- dans conteneur, j'ai 3 blocs : entete, cadre et pied.

a) l'entete : hauteur fixe mais largeur étirable ; à droite et à gauche un logo, j'ai donc un bloc milieu étirable.

le pied : même structure.

c) le cadre : je souhaite que ce bloc soit étirable sur la largeur et la hauteur. Il se décompose ainsi.

c1 : le menu à gauche.

c2 : le bloc partenaires à droite.

Tous 2 de largeur fixe mais de hauteur étirable : j'ai créer la même structure que pour les blocs entete et pied mais orientés sur la hauteur.

c3 : le bloc contenu qui peut "overflow".

ps : j'ai rajouté un bloc contenuhaut au dessus de contenu car je ne parvenais pas à laissé un espace au dessus de ce bloc contenu mais un espace pour tous son bloc parent (cadre) si je lui donnais de marge haut.

Ouffff

Jespère que j'ai apporté un petit éclaircissement

[Monique]

Bonjour,

La situation s'éclaircit

Et je vais te proposer une méthode de travail...

Le travail dans Photoshop te permet

- de visualiser le résultat que tu souhaites obtenir

- de préparer les images que tu veux utiliser

Ensuite, en prenant soin (à chaque étape importante) de valider le code (HTML et CSS) et de tester avec les principaux navigateurs :

- Tu définis d'abord la CSS pour la mise en page globale - l'en-tête, les 3 colonnes et le pied de page (en attribuant une couleur de fond provisoire pour bien visualiser les blocs). Tu y ajoutes un contenu fictif

- Tu complètes ensuite un de ces blocs à la fois : tu ajoutes les éléments souhaités et tu complètes ta CSS.

- Et surtout, tu ne passes au bloc suivant que lorsque l'étape précédente te donne toute satisfaction.

Bien sûr, si tu rencontres un obstacle au cours de l'une des étapes, tu n'hésites pas à venir demander un coup de pouce

Je t'invite aussi à lire cet article Les coulisses d'un design où un graphiste renommé (Douglas Bowman) explique sa manière de travailler

J'ai d'abord écrit les CSS qui définissaient la structure globale, les fonds principaux et les grandes régions de la page. Les groupes d'éléments se positionnaient à leur place. Puis j'ai appliqué le détail nécessaire à chaque élément, de haut en bas dans la page.

Bon courage, tu es sur la bonne voie

[cedricbujon]

Merci monique pour tes conseils.

J'ai suivi à peu près cette démarche, ma page se comporte bien dans Mozilla Firefox et Netscape :

1- J'ai mis en place mes 3 blocs principaux : entete, cadre et pied dans le bloc principal conteneur. Pas de problème, ils se disposent convenablement.

2- Dans mon bloc entete, j'ai mis en place mes 3 blocs avec un bloc central qui s'étirent : sous IE, j'ai un espace entre ces blocs (voir la page avec les blocs en couleur comme tu le préconise également).

Dans le bloc pied, j'ai procédé de même et il se comporte de la même façon sous IE.

Là, je n'arrive pas à résoudre ce problème...

3- Je suis donc passé à autre chose et plus précisément au bloc cadre :

Jai disposé le bloc monmenu (à droite) et partenaires (à gauche) et entre les blocs hautcontenu et endessous contenu (hautcontenu pour réaliser un espace, je n'ai trouvé que cette solution.

Le défaut est donc sous IE ou ce bloc descend et sort de son bloc parent dès qui dépasse une certaine largeur. Sous opéra, il s'aligne à gauche...

Je n'arrive pas à résoudre ces problèmes malgré mettre bien casser les dents dessus.

Je suis encore une fois passé à autre chose.

4- j'ai divisé mon bloc partenaires en 3 avec un bloc central étirable mais je n'arrive pas à lui faire prendre toute la hauteur disponible.

5- j'ai fait de même pour le blocmomenu divisé en plusieurs blocs :

menuhaut

titremenu, menu et basmenu 3 fois de suite.

milieumenu étirable (mais qui ne s'étend pas sur toute la hauteur disponible.

et menubas.

Sous IE, le bloc menubas se répète 3 fois de suite... (couleur bleu clair) ainsi que le bloc hautmenu qui ne réagit pas correctement.

page

Je pense avoir bien avancé mais j'ai ces derniers problèmes me bloquent dans ma 1ère création.