la plus simple des solutions est de dire à ton slider de ne pas s'adapter en hauteur. Ou mieux encore, de ne pas tourner automatiquement : tu donnes des informations importantes (tes missions) et tu empêches en même temps les gens de les lire tranquillement. À lire : https://doisjeutiliser.fr/unCarrousel/
- Edité par Lamecarlate 19 septembre 2017 à 22:50:10
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Je ne peux pas t'apporter d'aide sur ton problème, mais je peux te conseiller une chose relativement importante :
Optimise les ressources !!!
J'ai mis plus de 40 secondes à afficher ta page (screen) en vidant mon cache navigateur ...
Compresses tes images et regardes les requêtes qui y sont faites. Personnellement, j'ai failli abandonner avant la fin du joli loader alors que je me rendais sur le site dans un but précis, regarder le comportement de ta page pour ton problème. Imagines le comportement d'un internaute venant de Google, juste en quête d'informations ...
Bon courage pour ton slider.
Ealon
PS : Je n'ai rien vu d'anormal sous Chrome Version 60.0.3112.113 (Build officiel) (64 bits), Win 7
Ah, en effet, j'oubliais : moi j'ai fini par ouvrir mon inspecteur et supprimer la div contenant le loader. Je trouve personnellement cette mode très désagréable : je suis capable de voir une page en train de se construire, j'ai pas besoin d'un revival de Flash pour m'indiquer que ça charge derrière. D'autant qu'effectivement, le contenu de la page ne semble pas nécessiter un loader : ce serait une application remplie de vidéo, de 3D ou autre, j'aurais compris, là, c'est du texte et des images. Mon conseil : enlève carrément le loader.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Il y a une image, un diplôme au format BMP, qui prend énormément de place dans ce volume de données transférées ... C'est elle qui m'a pourri l'affichage
Je conseille un peu d'espace sous la première section, pour qu'on voie le gris en dessous de l'image des silhouettes noires avec la flèche bleue. Là ça donne l'impression que cette image fait partie de la section d'en dessous et est remontée, car le blanc se confond avec le fond. (je sais pas si c'est très clair…)
Le titre et la baseline dans le header me paraissent prendre beaucoup de place : 4 lignes, surtout quand le header devient fixe, ça fait un peu mastoc. Dans l'absolu, je n'aurais pas mis de header fixe, car ça "vole" de la hauteur disponible. Ensuite, ça se fait souvent, et ça peut être efficace (de plus ton site est "one-page", donc ok, c'est pertinent ici). Mais il faut absolument que ça soit plus fin.
Pour les pôles : je suggère des phylactères plus larges, ils seront donc plus faciles à lire. Les images sur le dessus : l'idéal serait qu'elles aient les mêmes hauteur et largeur, ce sera plus harmonieux.
Pense à mettre des alt sur toutes tes images : et par là j'entends des textes décrivant l'image, pas juste "photo", voire "photo1.jpg".
Le texte dans la double flèche violette mériterait d'en être sorti : tu n'as pas besoin d'une image pour ça (en plus ya un léger damier dans le fond, c'est voulu ?).
Dans la mesure du possible, une image doit être de la taille à laquelle elle s'affiche : le diplôme n'est certes plus en bmp, mais il fait toujours 1148 * 815 redimensionné en miniature. Il y a tromperie sur la marchandise je charge un gros fichier, je m'attends à une grosse image !
Évite les <br /> à la suite : dans le bloc après le slider des formations, tu as clairement trois paragraphes, utilise trois <p>.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
J'ai modifié toutes les photos une a une en taille et en poids ! Le site est beaucoup plus rapide merci.
Pour le menu je sais que ça fait un peu mastoc ce grand bandeau violet mais je pense que je vais le laisser quand même..
J'ai modifié le site en fonction de vos commentaires il me reste plus que la flèche flou à modifier. Je voudrais ne pas la mettre en image pour que ça soit plus lisible notamment sur portable ou tablette. Avez vous des idées pour y parvenir ?
la première partie, tu l'as déjà, c'est ton .container, je l'ai juste recopiée ici pour avoir un environnement semblable au tien.
les marges du ribbon : j'ai mis 20px en hauteur pour absorber les pointes qui dépassent, et 100px en largeur pour la même raison, à toi de trouver les valeurs qui te conviendront au mieux.
les pointes des flèches : elles sont faites de bordures, c'est une astuce. C'est pour ça que j'ai laissé le reste des bordures en noir translucide, pour que tu puisses voir comment c'est fait. Dans ton code à toi, tu mettras bien sûr "transparent" comme couleur de bordure.
les pointes de flèches toujours : elles sont positionnées en left ou right: 100% afin de commencer vraiment juste au bord de l'élément, c'est une astuce que je trouve très pratique - faut juste penser à l'envers (left: 100% = tout à droite).
idem pour la taille desdites bordures : à toi d'expérimenter pour trouver la bonne forme. Je pense d'ailleurs que sur plus petits écrans il sera profitable de les enlever, car la hauteur du corps de texte va en augmentant (moins de largeur = plus de lignes), et ça fait un peu bizarre.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)