Besoin d'aide pour une mise en page

[zeb71]

Bonjour à tous.
Convertit depuis peu aux feuilles de style css et aux <div>, j'ai refait entièrement mon site en suivant les conseil trouvés ici.
Me voila donc avec un beau site, avec une entète, un pied de page et un menu vertical qui se reproduisent sur chaque page (par la fonction include du php)

Le corps du texte lui s'affiche normalement sur deux colonnes. en tout cas je souhaite pouvoir aligner mes photos a droite ou a gauche et disposer les bloc de texte à coté.

l'adresse de mon site est http://www.labyrinthes.divertiparc.com

Mais horreur, je viens de découvrir que en navigant avec internet explorer, la mise en page ne ressemble à rien de ce que je voulais. je ne m'en sort plus. et me revoila partit avec un mise en page avec des tableaux (c'est un comble)

ma page http://www.labyrinthes.divertiparc.com/essais.htm me sert de brouillon pour tester les mises en page (la feuille de style est incluse dans le head)

Enfin, si jamais il y a des personnes qui comprennent mon soucis... je serais très heureux de quelques conseils

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

[calimo]

Mais horreur, je viens de découvrir que en navigant avec internet explorer, la mise en page ne ressemble à rien

Ce qui est un peu normal, puisque ce navigateur a quand-même 6 ans (et le moteur n'avait déjà pas beaucoup évolué depuis 1 ans et sa version 5.5...)

Je te recommande d'utiliser le script IE7 de Dean Edwards qui corrige pas mal de comportements incorrects d'IE6 et en fait un navigateur "utilisable".

[Mongo Bob]

donne un exemple, stp, d'affichage différent entre IE et FF, j'ai rien vu qui saute aux yeux.
Je suppose qu'il faut prendre en compte la 1ère page dont tu donnes le lien, et pas la page essai?

[Invité]

sur le site, c'est de moins en moins la cata, car peu a peu je refait les pages avec des tableaux.
il y a encore cette page par exemple http://www.labyrinthes.divertiparc.com/gonflables.htm
les bloc droits et gauche se mettent en quinconce sur IE et pas avec FF ou ils restent bien en face l'un de l'autre

cela apparait aussi sur ma page d'essai

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

[Mongo Bob]

Dans cet exemple, FF devrait afficher comme IE. Pourquoi il laisse les blocs côte à côte, mystère.
Tu as 2 images chacune dans un <div> tu as défini en css chaque <div> gauche et droite, comme ça :

Code : Tout sélectionner

.blocGauche {
  width: 49%;
  float: left;
  clear: none;
  text-align: center;
}
.blocDroite {
  margin-left: 50%;
  width: 49%;
  clear: none;
  text-align: center;
}

("clear:none" est superflu, "none" est la valeur par défaut, de toute façon et signifie que le bloc accepte un voisin positionné "float")
ce que je comprends pas, c'est que le <div> de droite fait 49% de large avec une marge gauche de 50%, c'est comme s'il faisait 99% de large, donc et c'est normal qu'il prenne toute la place disponible dans la page (oui, 99%, en fait) et ne s'affiche pas à côté du 1er.
La raison pour laquelle FF accepte de juxtaposer les 2 m'échappe, à moins que je me trompe sur la signification de "clear:none"...
Je te conseille par ailleurs, de reprendre tes pages à 0 en évitant les erreurs nombreuses que l'extension pour FF Htmlvalidator peut te lister, ou à voir ci-dessous :
http://validator.w3.org/check?verbose=1 ... lables.htm
C'est trés difficile d'analyser ta page telle qu'elle est...
...et de tester tes pages au fur et à mesur dans les navigateurs! Bon courage.

[zeb71]

ça s'arrange peut a peu.
ton aide m'a été tres précieuse.
en fait, Ie ne place pas les marges au même endroit que FF
avec l'un mon bloc droit faisait 99% de la page, avec une marge à l'intérieur de 50% (pour ie la marge est dans le bloc)
avec l'autre mon bloc droit faisait 49% de large en étant placé à 50% a droite (pour ff, la marge est à l'extérieur du bloc)

la syntaxe qui me convient semble donc être :

Code : Tout sélectionner

.blocGauche {
  width: 49%;
  float: left;
  text-align: center;
}
.blocDroite {
  margin-left: 50%;
  text-align: center;
}

quand aux nombreuses erreurs, je t'avoue que j'ai un peu de mal à les corriger. le site est illustré par des animations flash produites sur des sites externes, et je dois placer un code pour les appeler. c'est ce code qui est principalement en cause dans les erreurs de validation.
en plus sur ce point, ie ne semble pas respecter les standards

Merci beaucoup


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

[Mongo Bob]

(pour ie la marge est dans le bloc)

Non, faudrait que je scrute de + près, vu que IE comme FF met la marge en externe, "margin" signifie "marge extérieure", c'est "padding" qui est la marge intérieure... donc la différence d'affichage m'échappe toujours...

[Mongo Bob]

Merci beaucoup

j'ai pas fait grand chose...
en fait, j'ai compris pourquoi ce css

Code : Tout sélectionner

.blocGauche {
  width: 49%;
  float: left;
  clear: none;
  text-align: center;
}
.blocDroite {
  margin-left: 50%;
  width: 49%;
  clear: none;
  text-align: center;
}

affiche les 2 blocs côte à côte dans FF : comme blocDroite n'est pas en flottant, la marge ignore le bloc flottant voisin, les 2 blocs n'obéissent pas aux mêmes règles, si tu enlèves la marge, le bloc droit va même se superposer au gauche.

pour ie la marge est dans le bloc)

non, toujours pas, si tu affiches ce css dans un navigateur, sans le contexte autour, tu verras que IE affiche comme FF.
La différence venait d'ailleurs, peut-être dans l'interprétation du code Flash ou autre. 49+50=99, on est trop près du 100%, et il suffit d'un rien, c'est pourquoi dans les grandes largeurs de bloc, je me débrouille toujours pour être en-dessous, arriver à 95% pas plus, en prévision des navigateurs qui peuvent interpréter différemment, y compris de manière erronée...
En tout cas, FF affichait correctement dés le départ!
Note que dans le css que tu donnes ensuite :

Code : Tout sélectionner

.blocGauche {
  width: 49%;
  float: left;
  text-align: center;
}
.blocDroite {
  margin-left: 50%;
  text-align: center;
}

ne pas donner de width à blocDroite revient à lui donner toute la largeur disponible restante : 50%, si tu rajoutes " width: 50%;" à ce bloc, tu peux regarder dans Kpz en même temps que tu valides la modif (un avantage de ce logiciel, de pouvoir apprécier les modifs en direct), ton bloc ne changera absolument pas de largeur.
Maintenant, dans le contexte un peu, "embrouillé" de ton site , il y a d'autres éléments qui entrent en compte, bon courage.