Salut, je travail actuellement sur un projet de site ou je développe actuellement la landing page.
Voilà ce que j'obtiens sur mon navigateur : http://hpics.li/8d99200
C'est exactement je désire faire, une page ou il n'y a pas besoin de scroll, tous les éléments sont visibles au premier coup d'œil.
Seulement le problème c'est que par exemple sur le navigateur de mon patron le site apparait de cette façon : http://hpics.li/e2b8fae
Bon sur ce screen la personne utilise IE mais c'est plus ou moins le cas pour son Google Chrome bien que moins flagrant : http://hpics.li/a10a53c
J'essaie de faire que le contenu de la page tienne à chaque fois dans 100% de la hauteur de chaque personne. Sur les screens la personne est en 19201080 et je n'arrive pas à faire en sorte à ce que cela ressemble à la page affiché sur mon 1366768 :(
Le code CSS utilisé est dispo à cette adresse sur la page de test.
Si quelqu'un à une idée ou un conseil, je suis preneur :)
Cordialement.
13 réponses
Si tu utilise cette outil : http://quirktools.com/screenfly/, tu remarquera que le résultat pour les laptop est à la hauteur de ce que tu cherche, par contre pour les desktop, c'est pas terrible.
Sur mon écran 1920px*910px je me retrouve avec le containeur logo/slogan très étriqué et un gros bloc rose comme tu peux le voir sur cette copie d'écran : http://hpics.li/b31d61b
Je te préconise d'utiliser les medias queries pour passer tes 2 container en position "absolute" pour les écrans dont la hauteur est supérieur à 800px voir 700px. Pour le containeur du bas, préciser l'attribut "bottom" avec une valeur à 0.
Ensuite il ne reste plus qu'à positionner les élement à ta convenance ce qui donne : http://hpics.li/1b2bac6
Bon CSS...
Hello yosaku,
Deux solutions s'offrent à toi :
Utiliser des media queries
Afin de changer ton CSS selon les résolutions et d'adapter la hauteur de tes blocs.
Passer par du JS
Calculer automatiquement selon la taille de la fenêtre de l'utilisateur la hauteur de tes blocs.
Une solution serait positionner tes élément en absolue par rapport à ton conteneur, et de gérer la taille de tes éléments via les media-queries (donc selon la résolution) comme le préconise @Junkz.
Le plus efficace à mon avis est d'utiliser les unités relatives au viewport : http://caniuse.com/#feat=viewport-units.
Merci pour vos réponses, j'ai oublié de mettre le lien de ma page de test avec le code CSS : http://www.alcudiasmirv2.org/test/
J'ai un peu tout tester sur cette page même les heights 100%.
J'ai tester en mettant ma télé en HDMI et en mettant une résolution de 1920*1080 et ça me parrait correct. Il n'y a pas de scroll.
Une question peut-être un petit peu bête mais si ça marche sur ma télé en 1920, ça marche aussi sur pc avec cette résolution non ?
Perso, j'utiliserai des media queries sur la hauteur, e.g:
@media screen and (max-height: 600px) { ... }Merci pour ton astuce Soundboy39, ça marche bien comme ça !
Je suis en train de mettre en place le site pour différente résolution pour la fameuse 19201080 de mon patron notamment.
J'ai juste une petite question : Sur le site que tu m'as monter ils disent que les 19201080 sont la résolution des pc 23" alors que justement mon patron est sur pc portable avec résolution 1920*1080. Ca ne sera pas trop grand pour son pc du coup ?
Yosaku a dit : "a ne sera pas trop grand pour son pc du coup ?"
En fait c'est là qu'on voit la différence entre taille réelle et résolution.
Si la résolution n'est pas adaptée à la taille réelle (exemple : 1920X1080 sur un écran 15'', ou 1024X600 sur un écran 23'') alors la résolution prendra la priorité de toute façon la priorité sur la taille de l'écran, du coup théoriquement tu ne devrais pas avoir de problème d'affichage.
Merci encore pour ton aide en tout cas, ça devrait être bon. J'aurai voulu savoir si tu pouvais me confirmer avec ton écran que les changements que j'ai fait en suivant tes conseils marchent : http://www.alcudiasmirv2.org/test/
Merci d'avance :)
OK çà fonctionne. Par contre je pensse que tu devrais aussi centrer verticalement ton bloc "logo + slogan", parce que collé au dessus c'est pas bien beau...
Merci pour tes conseils, je pense que je vais mettre ça en place. Par contre j'ai un autre problème. La personne qui a la résolution 1920*1080 me dit que tout marche bien sauf quand elle réduit la fenêtre : http://img11.hostingpics.net/pics/554758Sanstitre.png
Du coup je m'y perd un peu dans toutes ces tailles. En fait ce que j'avais fait c'était :
<link type="text/css" media="screen and (max-width: 772px)" href="css/design-500-min.css" rel="stylesheet" />
<link type="text/css" media="screen and (min-height: 900px)" href="css/design-900-min.css" rel="stylesheet" />
<link type="text/css" media="screen and (min-height: 1000px)" href="css/design-1000-min.css" rel="stylesheet" /> Re
S'amuser à redimensionner la fenêtre pourquoi pas... mais il faut aussi rester dans des proportions réalistes... voici un outil qui permet de faire des tests vis-à-vis des supports les plus courants : http://quirktools.com/screenfly/
Il n'y pas pas tout mais çà permet déjà de garantir le coup par rapport à pas mal de cas.
Merci pour ce site, je l'avais utiliser pour mettre à l'échelle certaines parties de mon site pour les grands écrans. Je ne sais pas si c'est vraiment fidèle ? J'ai l'impression que le rendu sur le site avec ma résolution est légérement différent de ce que je vois.
Je pense que problème vient de la hauteur car j'ai pour les tailles de 900px et après 1000px.