Navigation horizontale CSS3 [Résolu]

Bonjour à tous.

Je me permet de revenir vers vous aujourd'hui afin d'avoir un conseil.

Problématique

Je souhaite créer une page comme suit :
- Un header de 100% de largeur
- Un footer de 100% de largeur
- Un div au centre de 100% de large mais dont le contenu peut être nettement plus long que la largeur disponible (navigation à l'horizontale uniquement)

Ce qui fonctionne

Après maintes essais, j'ai réussi à coder ma page en local. Aucun problème, mon header fait bien 100% de la largeur de ma page, mon footer également et mon div du centre me permet de faire défiler le contenu à l'horizontale sans éclater le site.

Ce qui ne fonctionne pas

Lorsque j'upload ma page sur mon serveur, ou lorsque je l'ouvre via MAMP, mystère... tout part en sucette.

Je m'explique : lorsque j'ouvre ma page, elle est "parfaite" mais, je me rend compte qu'un ascenseur est présent en bas. Si je défile... mon header et mon footer se barrent à gauche.

Question

Avez-vous une idée sur la raison de ce "bug" ? Pourquoi une telle différence entre la version local (hors MAMP) et les versions sur serveur (MAMP ou Web) ?

Demande

Pouvez-vous me donner quelque éléments de base afin de coder une telle page sans que cela devienne un grand n'importe quoi ?

Par avance merci pour vos conseils.
Modifié par Nobduck (13 Nov 2012 - 18:52)

Bonjour,

ah ben voilà une question bien posée et il n'y a pas de "c'est urgent svp"

Qu'appelles-tu "en local" ? Avec le protocole file : "file:///C:/truc.html" ? (euh bon t'es sur OS X l'exemple correspond pas )
Por moi, c'est http://localhost/ donc MAMP

Avec quel navigateur testes-tu ? IE en particulier part du principe que site local = intranet = site pourri (c'est pas faux) = site seulement compatible avec IE6 ou 7, il active (force) le mode de compatibilité.

Sur ton hébergement, est-ce que c'est du gratuit qui rajoute de la pub avant le doctype ( (en l'injectant dans le code HTML) et pète forcément tout ?

Bonjour Felipe

Merci pour ton commentaire... Effectivement, même si c'est un "problème" assez urgent, je me doute que chacun d'entre vous à quelque chose à faire et qu'il vaux mieux laisser le temps aux gens de comprendre la problématique et d'essayer d'apporter une solution.

Pour répondre à tes questions

Ce que j'appel en local c'est : file://localhost/Users/Xxxx/Desktop/Slide-horizontal/index.html
Cette version fonctionne parfaitement.

En revanche, dès que je place mes fichiers dans MAMP et ouvre la (même) page via http://localhost:8888/_TESTS/Slide-horizontal/ ça ne fonctionne plus

Les navigateurs que j'ai utilisé pour tester sont :
- Chrome 23.0.1271.64
- Firefox 16.0.2
- Safari 6.0.2
Quelque soit le navigateur, même problème

Concernant mon hébergement, j'utilise un serveur mutualisé 1&1 donc, sans pub.


Une petite idée de la raison de ce bug ?
Ou une solution pour bien coder une telle page ?

Merci grandement pour ton aide et tes conseils.

Bonjour, peut-être que certaines de tes ressources (css, js) ne se chargent pas parce que mal référencées ... Regarde avec firebug ou avec l'outil de développement que tu veux si tout se charge bien, ou si tu as des erreurs de js.

Bonjour loicbcn

J'ai vérifié ma page avec Firebug et il ne détecte aucune erreur.

A dire vrai, je n'ai fait appel à aucun JS et tout mes CSS sont bien détectés.


Quelle histoire étrange cette page

Hallucinant

Il me semble que je viens de trouver d'où venait mon erreur d'affichage !

Cela semblait venir d'un tableau intégré dans mes données.
Celui-ci, pour une raison inconnu, faisait planter la page lorsqu'elle était sur un serveur au lieu d'être en local.

En tout cas, je vous remercie vivement pour votre aide précieuse

Je met donc le sujet à "Résolu" en attendant le prochain bug