Forums Développement Multimédia

Aller au contenu

Bugs d'affichage - site de débutante

html css php CODE HTML CSS

13 réponses à ce sujet

#1 OREA

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 04 January 2013 - 09:20 AM

Bonjour à tous. Je suis graphiste depuis 25 ans. J'ai suivi des formations HTML, CSS et un peu de PHP et depuis 2 ans je construis des sites vitrines. Actuellement, je travaille sur un site web et j'aimerais profiter de l'avis de la communauté pour améliorer mon projet.
Le site est en ligne. Il est loin d'être fini comme vous pouvez le constater. C'est un site vitrine pour un location de vacances. Avec une page principale qui se déroule horizontalement et 2 pages galeries photos.
voici le lien :
http://www.locationoceane40.fr/

A part sur Firefox où tout fonctionne à peu près bien, j'ai quelques bugs sur les autres navigateurs, c'est la galère.
Sur Internet explorer 9, uniquement sur ce navigateur, il y a une barre de défilement verticale sur la droite, malgré : "overflow: hidden"
Sur Safari et également sur Chrome, la DIV contenus, une fois la page chargée, remonte.
Sur Opéra, il se produit un truc très bizarre, il charge la page, se position sur le début (la partie accueil) et aussitôt après il saute et va à la partie réservation.
J'espère que je suis claire.
Tous ces problèmes sont apparus, il me semble, depuis que j'ai transformé la page en php à cause du formulaire contact.
Si quelqu'un peut jeter un œil et me dire ce qui ne va pas, cela m'aiderait.
Merci infiniment, par avance.

#2 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 04 January 2013 - 17:44 PM

Bonjour.
J'ai vérifié le site sur Firefox, Chrome et Safari (le tout sur Mac) et je ne vois pas de div "contenu" remontée !

Je t'ai fait une capture d'écran avec les trois affichés en superposition.

Fichier joint  FF_vs_Chr_vs_Saf.jpg   325.38 Ko   4 téléchargement(s)

Pour le comportement sur Opera, c'est bizarre en effet.

#3 OREA

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 05 January 2013 - 10:04 AM

Bonjour et merci pour ton retour sur mon site.
Je travaille sur Mac, j'ai un iMac 27'' résolution 2560x1440 et un MacBookPro 15" résolution 1440x900, par ailleurs je teste mes sites également sur un PC portable 17'' sous Windows 7, résolution 1600x900.
et sur mes trois postes les problèmes sont quasiment identiques.
Sur IE, le comportement est le même que sur Opera, mauvais !
Sur PC et sur le MacBookPro, sur Chrome le site fonctionne bien, en fait il semble que sur une résolution plus petite, ça marche, car sur l'iMac la div contenu remonte.
Sur Safari, en effet cela va bien sur les plus petites résolutions mais par contre la partie réservation ne s'affiche pas. et sur la résolution plus grande la div remonte ! Que c'est compliqué !
De plus, sur l'ensemble des navigateurs, même sur Firefox, quand je navigue en cliquant sur les onglets du menu, dans le sens aller c'est bon. Mais si je navigue dans le sens du retour (je veux dire quand je suis au niveau du contact, par exemple) et que je clique sur les onglets pour revenir en arrière, le retour se fait en plein texte au lieu de se positionner au départ de la DIV.
Est-ce un problème des ancres ?
C'est indébrouillable pour moi, je suis pas assez compétente. J'ai regardé dans le forum à la recherche d'un problèmes similaire, mais en vain ! Croyez-vous qu'il me serait possible de trouver de l'aide au sein de votre communauté ?
Merci encore.

#4 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 05 January 2013 - 17:35 PM

Je suis sur un iMAC 27 pouces également.

Déjà, une chose qui, selon moi, n'est pas forcément une merveilleuse idée, c'est de travailler avec une seule page défilante horizontalement bien que je ne crois pas que ce soit la cause de tes ennuis.

Pour les ancres, c'est normal, tu appelles cette ancre par un lien du menu mais elle se place par rapport au bord du navigateur, pas par rapport à ton menu. Ce qui est étrange, dans un sens ça roule et dans l'autre pas.
Je pense qu'en sortant le menu de la div "contenu", et en travaillant un peu la CSS pour appliquer un margin-left à cette div contenu, ça résoudrait déjà ce problème.

Utilises-tu firebug pour détecter les placements de tes éléments ? ça t'aidrait à comprendre comment sont placées tes divs par rapport au reste !

#5 OREA

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 06 January 2013 - 13:50 PM

Bonjour Eddy,
Je vois un avantage au fait d'avoir une seule page défilante, le chargement de la page se fait une seule fois. D'autre part j'ai vu pas mal de sites très attractifs construits de cette façon et personnellement je trouve assez original. C'est possible avec un site pas très gros, comme celui-ci.
Je vais faire ce que tu me dis, et voir la réaction. Oui j'utilise Firebug mais pas assez, en fait je sais pas trop bien m'en servir.
Sinon, j'ai pensé intégrer un slider Jquery. Depuis ce matin, je fouille le web pour trouver un tuto à suivre pour le faire, car je suis un peu larguée. Qu'est-ce que tu en penses ?
Bon dimanche et merci encore de ton aide.

#6 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 06 January 2013 - 14:43 PM

Bonjour.
Le chargement se fait en une seule fois, oui, mais prend combien de temps par rapport à des pages séparées.
Aussi la chargement de pages optimisées étant très rapide et depuis que quasi tout le monde a une connexion rapide, plus un problème, cet "avantage" n'en est plus forcément un.
Bon, c'est vrai que dans ce cas précis, il n'y a pas beaucopu à charger mais je me demande si ça ne nuit pas aussi au référencement du site !

Pour l'originalité, oui, c'est un fait. Pour la navigation, c'est pas forcément au goût de tous mais ce sont encore des choses qui se discutent, toutes les souris ne sont pas munies d'une fonction de balayage horizontale, ce qui oblige presqu'à utiliser la barre de scroll pour passer d'une section à l'autre si on décide de ne pas utiliser le menu.
Enfin tu l'auras compris, je ne suis pas vraiment pour mais ce n'est que mon avis bien entendu et là n'est pas la question !

Avec Firebug, lorsque du survoles une div dans la partie code, elle se colore sur la page avec une bonne vue de son placement, de ses marges internes et externes, etc.

Pour le slider, oui pourquoi pas, il y a de bonnes solutions disponibles et très souvent gratuites.
Si ça peut t'aider, un que j'apprécie particulièrement est Nivo Slider, il est très bien fait et avec plusieurs transitions que l'on peut soit fixer soit rendre aléatoires et des templates adaptables.

Plus d'infos sur Nivo Slider ici.

Si tu as l'intention de développer des sites web à l'échelle plus grande que le site personnel, je peux aussi te conseiller de jeter un œil sur les CMS, ils sont parfaits et personnalisables avec des extensions diverses qui facilitent souvent l'intégration.
Le code PHP est prêt, il est rarement besoin d'y mettre les doigts à moins d'avoir besoin de quelque chose de spécial. Il ne te reste alors qu'à te pencher sur ton design et son nintégration.

Perso, j'utilise Joomla! pour mes sites mais il en existe d'autres parmis lesquels, le plus compliqué sera de faire un choix : Joomla!, Drupal, Guppy, Spip, etc. et il y a aussi les moteurs de blogs comme Wordpress ou Dotclear pour ne citer que les plus connus qui peuvent parfois convenir. L'idéal sera toujours de les tester en local pour se faire une idée.

Si tu optes un jour pour une telle solution, les grands points sur lesquels il faut, à mon sens, porter une grande attention, c'est que le CMS convoité soit suivi par une communauté active avec un forum actif lui aussi afin de pouvoir, en cas de besoin, trouver rapidement les réponses à tes questions, qu'il soit possible de personnaliser le design et les fonctions par l'ajout d'extensions sûres avec un suivi assuré.

#7 OREA

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 06 January 2013 - 15:57 PM

Tu as sans doute raison pour le référencement.
Le slider de Nivo est sympa, mais je pense me tourner vers un slider tel que :

http://kevinbatdorf....com/codaslider/

Kevin Batdorf offre également un slider full responsive, je suis tentée.

J'ai fait une formation Joomla, mais je n'ai pas accrochée. Je suis toute petite dans ce métier, vraisemblablement un jour je me tournerais vers les CMS mais pour le moment j'ai du mal.
En attendant je vais tenter de résoudre le problème de ma DIV contenu et du menu. Je te dirai.
A très bientôt

#8 OREA

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 06 January 2013 - 17:33 PM

Eddy, ça ne marche pas. En fait c'est strictement la même chose.
J'ai mis le homeMenu au premier niveau du body. Voilà tu peux aller regarder.
http://www.locationoceane40.fr/
C'est vraiment rageant.

Tous ces problèmes sont apparus, il me semble, quand j'ai intégré le formulaire contact. Tu crois que ça peut être lié ?

#9 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 06 January 2013 - 19:00 PM

Bonsoir.
Le fait de sortir le menu de la Div principale n'est bien entendu pas suffisant, il faut revoir tous les placements.
Je suis sur un dev de site actuellement et ça me laisse peu de temps pour vraiment te conseiller efficacement de A à Z.

Je ne pense pas que ce soit le formulaire qui soit en cause mais tu peux essayer de le passer en commentaire ou le retirer temporairement pour voir s'il est responsable.

C'est assez difficile à dire comme ça en tous cas…

#10 OREA

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 06 January 2013 - 19:31 PM

Bien sûr, je comprends.
Je vais faire des essais.
Bonne soirée

#11 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 06 January 2013 - 19:34 PM

Si j'ai un peu de temps pour tester un gabarit, je le ferai volontiers et t'en informerai !

#12 OREA

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 07 January 2013 - 10:18 AM

Bonjour Eddy,
C'est super gentil.
Merci à toi.
Bonne journée

#13 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 10 January 2013 - 21:05 PM

Salut,

Pour le décalage des DIV contenus qui n'apparaissent pas totalement, tu as essayé un simple


margin-left : 72px;
 

Sur #description par exemple ?

Je pense qu'avec une touche de jquery, tu pourrais rendre le tout plus attractif encore.

Tu pourrais mettre en sur-brillance l'entrée du menu de la rubrique affichée lorsqu'on est dessus.
Bien entendu lorsqu'on a cliqué dessus mais aussi lorsqu'on est dessus lors du scroll, ça donnerait un dynamisme intéressant.

Tu pourrais également écouter le scroll pour faire défiler les rubriques même lorsqu'on scrolle avec une souris standard.

Et pour finir, bienvenue sur Mediabox !
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#14 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 10 January 2013 - 21:57 PM

Salut dcz.switcher.

J'ai tenté le margin mais sans grand succès, ça n’arrange pas le problème de navigation avant / arrière.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP