Difficulté pour rendre une page responsive :(

Bonjour chèrs Amis, j'espère que tous se portent très bien comme moi. Je vais pas tourner autour du pot, voilà l'exercice qui me fatigue depuis un bout de temps:

Je dois réaliser la page d'acceuil d'un site responsive qui ne devrait pas dépasser 100% de la hauteur de tous les écrans. Ce qui signifie que sur pc, on aura pas besoin de l'ascenseur et sur tablettes et smartphones, on devrait pas pouvoir utiliser l'écran tactile pour voir le pied de page du site car la page est à priori, intégralement visible après le chargement.

Toute la page est responsive et a un width de 100%;
{
un header qui prend 10% de la hauteur de tous les écrans
une image ou un slide responsive qui occupe toujours 60% de la hauteur de tous les écrans
Un bloc de boutons qui occuperait 20% de la hauteur de tous les écrans
Un footer qui prend également 10% de la hauteur de tous les écrans
}

Un petit aperçu de ce que ca devrait donner en image:


Lorsque j'essaie de le réaliser: Il y a toujours de l'espace entre le bloc des boutons et le footer de ma page quand je redimensionne. Lorsque je mets l'image avec un width de 100% et une hauteur: auto, lorsque je la redimensionne elle devient de plus en plus petite, c'est cela je veux mais le résultat attendu est tout autre, cela crée du vide entre l'image et le footer

Le responsive design, s'applique t-il seulement à la largeur du site?
Qu'en est il pour la hauteur?
Faut il que je change d'images afin que celles ci s'adaptent aux dimensions du bloc (largeur et hauteur) dans lequel elles se trouvent?

Comment résoudre ce problème les frangins, amis, tontons .... ?
Modifié par suivlys (30 Dec 2015 - 13:49)

Bonjour,

Je peux peut être me trompé mais il me semble que votre site est juste adaptable et non responsive pour le moment.

Adaptable : permet juste d'avoir le même site que la version pc, adaptable aux autres support.

Très bon article sur ça : http://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html

Les media queries permettent de faire du responsive. Vous pouvez spécifié les hauteur et les largeurs. Je pense que c'est peut être la solution à vos problème.

Allez voir ici : http://www.alsacreations.com/article/lire/930-css3-media-queries.html
Modifié par debalsjeremy (30 Dec 2015 - 15:35)

Bonjour,

Moi je ferais un truc comme ça : CodePen.

Ah pardon, j'ai foncé tête baissée sans suffisament lire le post... Pour les problèmes de hauteur vous pourrez vous en tirer avec les vh units (mais compatible seulement avec les navigateurs récents).

Comme ceci par exemple :

.item {
height: 10vh; /* 10% de la hauteur */
}

Modifié par Olivier C (30 Dec 2015 - 17:28)

Ok merci à vous pour le temps que vous me consacrez!!!

Grand Frère Jeremie, j'ai lu le contenu du lien que tu m'as donné. J'ai compris qu'un site adaptatif tient uniquement compte des principaux points de rupture (320px, 480px, 768px, 1024px, etc). Aussi les unités de largeur sont fixes, mais différentes selon la taille de l'écran.

Cependant, moi j'ai privilégier les pourcentages en lieu et place des largeurs fixes. (Tout cela dans le but de pouvoir le rendre responsive )
Par exemple, le header, le content, le footer sont tous à 100% de largeurs. Le bloc du slide et Le bloc des boutons de menu sont également à 100% de largeur, les boutons eux mêmes ont une taille en fonction de leur bloc. Je sais pas, si avec cela on pourrait parler de site adaptatif.

Aussi, j'utilise également les media queries, mais le probleme persiste.Par exemple lorsque nous nous trouvons dans l'intervalle des écrans supérieurs à 768px.
Sur mon Ordi portable, tout est normal, mais quand j'affiche la page sur un ordi de bureau, il y a un grand vide entre le footer et le bloc des boutons. Lorsque je suis dans l'intervalle des écrans pour les tablettes, et que je redimensionne la page sans quitter l'intervalle, un vide se crée également.
Je me dis que le problème ne vient pas des Media Queries .

Merci Tonton Olivier pour ta réponse.

Je comprends par là, que si je veux que mon header, body et footer aient les mêmes pourcentages en hauteur sur PC, tablettes et smartphones, je pourrais utiliser les vh.
Ok je ferai un test juste après mon écrit.
Tu dis également que ca marche uniquement sur les navigateurs récents, dans mon pays beaucoup de personnes ne cherchent pas à mettre à jour leur navigateurs . Sur quels navigateurs, cette fonctionnalité CSS pourrait marcher?

Aussi, le problème viendrait surement au niveau de mon image qui n'aura plus la même qualité.
Par exemple si l'image que je dois utiliser fait 1024px de large avec 500px de hauteur sur les PC, elle va être redimensionnée jusqu'à par exemple atteindre 800px de large et 400px de long sur les tablettes , enfin 500px de large avec 600px de long sur les smartphones (j'ai pris des valeurs sans trop réfléchir juste pour l'exemple ). Je m'inquiète pour la qualité, J'ai vu sur certains sites ou on redimensionne l'image, qui reste bien visible et conserve sa qualité. Comment ils font?

Alors si je pense que c'est de l'adaptatif, enfin c'est qu'on m'apprend en cour après c'est vrai que c'est discutable.... On ma dit que tout mettre en pourcentage rend le site adaptatif mais c'est tout ce qui le rend responsive c'est le fait qu'on ajoute, qu'on cache des éléments, plus généralement faire un site en fonction de chaque support.

Après oui moi aussi je me sers que de pourcentage et je fais les petits détails avec les media queries.

Bref revenons en a ton problème.

Pour le vh, moi je sais que j'utilise safari est ça marche depuis un petit moment, chrome aussi après IE j'en est strictement aucune idée... Après c'est vrai que c'est récent les vh donc ... Les vieux navigateur très peu de chance qu'il soit compatible.

Non effectivement les médias queries ne semble pas être le soucis..

Avez vous mis : <meta name="viewport" content="width=device-width, initial-scale=1"> je pense que oui mais je vous le met quand même...

Je pense effectivement que les vh sont la solution parfaite..

Pour les images je m'y connais pas trop, mais peut être prendre une image de très haute qualité histoire de pouvoir l'agrandir ou la rendre plus petite sans perdre de la qualité a l'agrandissement..

Ou sinon avez vous pensez au svg? Il est étirable sans perte de qualité http://www.alsacreations.com/tuto/lire/1421-svg-initiation-syntaxe-outils.html

Ok Merci frère Jeremie pour ta réponse! PS: Je suis un jeune petit débrouillard en développement web! Merci pour les conseils. Je vais de ce pas apprendre comment créer et utiliser une image au format SVG .
En ce qui concerne le "vh", les smartphones actuels peuvent ils être non compatibles?

Bonsoir,

Pour info sur le support des viewport-units :

http://caniuse.com/#feat=viewport-units

6l20 a tout dit.

Le SVG c'est du vectoriel, moi j'en fait avec Adobe Illustrator.

Pas de problème si tu a d'autre soucis hésite pas

PS: Smiley biggrin Je suis un jeune petit débrouillard en développement web! : on a tous bien commencé un jour

Merci à vous tous, pour vos différents apports et conseils. Je crois que le "vh" répond à mes attentes. J'apprendrai au fur et à mesure à rendre complètement tout le site, responsive!
Le petit que je suis, reviendra voir ses multiples grands frères et tontons d'alsacreations lorsqu'il sera bloqué . Encore Merci!

Bonne Soirée à Tous

Bonne soirée !

suivlys a écrit :
Merci Tonton Olivier pour ta réponse.

Je comprends par là, que si je veux que mon header, body et footer aient les mêmes pourcentages en hauteur sur PC, tablettes et smartphones, je pourrais utiliser les vh.

Et pas seulement : "display: flex" et "flex: 1 1 0" sur l'élément qui doit occuper tout l'espace restant, ici l'élément main (attention, pas avant IE10 pour cette solution). Pour l'image il faut la mettre en background image et la caler avec background-size: cover et background-position...

Mais plutôt qu'un long discours Tonton Olivier - qui est de bonne humeur aujourd'hui - te donne la solution sur un plateau : Layout pour un p'tit jeune....



Même si personnellement je n'aurais jamais utilisé cette solution. En effet, gare au débordement de contenu ! Tu peux éventuellement remplacer les height par des max-height pour permettre les débordements, mais ce n'est pas ce que tu recherches à priori.
Modifié par Olivier C (31 Dec 2015 - 08:31)

Ok. Merci Tonton Olivier . Je vais m'inspirer de ton code afin d'obtenir ce que je recherche. Je cherche pas pour l'instant à obtenir un code irréprochable, mais plutôt un code qui pourrait avoir de bonnes notes.

Cependant, je ne comprends pas quand tu dis que tu n'aurais pas utilisé cette solution... Cela veut il dire que je devrais changer d'idée sur le site ou sur le code utilisé?

Aussi, mon objectif premier est de pouvoir afficher le site en une seule vue sur tous les écrans disponibles. Maintenant je suppose qu'il y a des dimensions d'écrans qui sont peu connues ou qui n'existent même pas, et aussi je crois que l'utilisateur n'aura pas intérêt de réduire son écran jusqu'à ce point.
Ainsi, si à un tel redimensionnement, il y a des débordements qu'on ne peut éviter, je crois que ca ne devrait pas poser de problemes. L'utilisateur saura qu'il a atteint une "zone rouge" et n'aura d'autre choix que de revenir au redimensionnement normal de lui même.

Je compte après changer le bloc d'images en un bloc de slides auto. L'image est juste là pour combler le vide et me permettre d'apprendre comment faire le slide auto , parait il qu'il y a du javascript là dedans. . Faut il toujours que j'applique les propriétés background que tu m'as données ci-dessus?
Modifié par suivlys (31 Dec 2015 - 15:54)