Petit sabotage d'Opera

Bonjour,

Je réalise un site que j'ai testé sous IE6 (Ie5 petits soucis) et Firefox. [adresse : http://www.ot-bains-les-bains.fr/www3/ ]. En regardant avec Opéra 8 la mise en page est complétement modifiée, et le bandeau bleu en haut de la page disparait. Je n'arrive pas à savoir pourquoi, surtout pour un navigateur qui se veut conforme aux standards.

Vous m'aiderez bien si vous aviez une idée. sinon tant pis pour Opéra, après tout en regardant les stats c'est pas ce qui passe le plus .

Merci
Modifié par Olivier (22 Mar 2005 - 23:08)

Belle mentalité.
As tu pensé que ton code pouvais y être pour quelque chose, et non la conformité d'Opera ??

Si tu t'en réfère aux stats pour développer ton site alors oui, laisse Opera de coté.. mais tu es obligé de développer pour IE 5

Plus sérieusement tu devrais quand même penser à prendre en compte IE 5 vue l'orientation 'grand public' du site.

Désolé de ne pas t'aider plus à l'instants, Opera n'etant pas installé sur ce PC, mais promis je jetterai un oeil.

PS: Vraiment trés beau design! A part les drapeaux, peut être, vus trop de fois, trop tranchants, tu devrais faire les tiens plus en rapport avec le style du site.
PPS: Tes rollovers réagissent assez mal sous IE 6.

(J'arrive pas à afficher la page avec Opera, ça vient de chez moi je pense, install foireuse ou je sais pas quoi...)

Pourquoi utilises tu des positions relatives partout ??
Essai déjà sans pour voir ce que ça donne.

Mais, je vois mal pourquoi tu les utilises et c'est pas impossible que le problème vienne de là.
Modifié par Olivier (22 Mar 2005 - 23:15)

Olivier a écrit :
Belle mentalité.
As tu pensé que ton code pouvais y être pour quelque chose, et non la conformité d'Opera ??

Mon raisonnement est simple. Si un navigateur respecte les standards alors il est censé représenter une page WEB de manière unique. C'est bien le but quand même. Maintenant en prenant Firefox comme référence, je me dis Opéra n'affiche pas mon site comme Firefox (mal) donc quelque part il ne respecte pas quelque chose. Mais quoi...?

Au fait, pour les rollowers, pourquoi ils réagissent mal ?

Position relative ... hmmm ... je vais essayer avec absolute

[PS] : Merci pour les drapeaux. Si vous avez d'autres critiques n'hésitez surtout pas, ça me permettera vraiment améliorer mon site.
Modifié par peremax (22 Mar 2005 - 23:26)

Le problème vient de #skip dont l'arrière-plan se superpose à ceux de #header, #entete etc. Il suffit de revoir l'ordre de superposition des différents blocs à l'aide de z-index.

Cela dit :
- les positionnements sont inutilement complexes, et comportent quelques erreurs du type float+position:absolute.
- ce système de double logo en <img> et en background est plutôt... suprenant
- le hack de l'underscore (_foo:) repose sur une syntaxe invalide et peut s'avérer problématique par la suite.
- XHTML1.1 n'a aucun sens en text/html.

Et remplacer position:relative; par absolute n'a aucun sens non plus, il ne s'agit pas de jongler avec les positionements mais de comprendre à quoi chacun d'eux servent et comment les utiliser.

Ici, aucun positionement n'est nécessaire.

Pour ton problème, voir la solution de Laurent Denis et les remarques supplémentaires qu'il t'a donné.

Et encore une fois c'est pas parcequ'Opera ne fait pas ce que tu veux (pendant que Firefox le fait) qu'Opera est en cause, il semble bien que ton code soit en cause.

Pour une mise en page, toujours préférer garder les éléments dans le flux courant du document, et pour les colones et autres trucs spéciaux, utiliser les float plus simple à gérer, notament pour le pied de page (avec l'eternel clear: both; )

Je tiens à vous remercier en effet après reflexion je m'étais dit que je devais revoir mon positionnement. J'ai viré "relative" mais la tout s'est barré (passez moi l'expression).

J'ai un peu rodé sur le net (glish et bluerobot) à la recherche d'un layout qui pourrait bien correspondre au mien mais je n'ai pas trouvé. Pouvez vous m'en indiquer un avec :
fixed width,
header
two column
footer

Merci encore -- dernier résulat au [ http://www.ot-bains-les-bains.fr/www3/ ]
Modifié par peremax (23 Mar 2005 - 20:34)

J'ai dû conserver les positions relative car autrement je n'arrive pas à positionner le bandeau orange qui fait tout l'écran. J'ai assuré la compatibilité IE5 Windows, pour MAC je sais pas... Opera c'est toujours la cata !!!

Bonsoir,
Quelques pistes:
-fixed width: une div conteneur munie d'une largeur et centrée automatiquement avec la propriété margin: auto appliquée à droite et à gauche. Tout le reste est à placer dans cette div conteneur.
-header: rien à faire à part la hauteur pour tes images de fonds et s'épargner une div si par exemple ton logo est supporté dans un élément h1.
Suit ta liste de navigation telle quelle.
-two column: une div avec la propriété float (right) et munie d'un width de la taille que tu souhaites. Ensuite une div dont le margin-right est au moins équivalent à la largeur de ta div en float.
-footer: une div munié de la proriété clear.

Schématiquement c'est cà.

Bien jolie site à part cela.
Modifié par Igor (24 Mar 2005 - 00:31)

peremax a écrit :
J'ai dû conserver les positions relative car autrement je n'arrive pas à positionner le bandeau orange qui fait tout l'écran. J'ai assuré la compatibilité IE5 Windows, pour MAC je sais pas... Opera c'est toujours la cata !!!

Le problème de superposition est réglé pour #header. Pour #entete, il se règle avec :

#entete {
background: transparent url("bg_entev.jpg") no-repeat -1px 0px;
padding: 20px 20px;
padding-left: 210px;
height:180px;
position: relative;
z-index: 3;
voice-family: "\"}\""; 
voice-family:inherit;
height: 110px;
padding-top: 40px;
margin:0;
}