background cover
jeandub
|
On y est, le background 100% 100% sur html fonctionne. Les proportions sont moins respectées mais c'est pas mal quand même. J'ai en plus modifié mon body que j'avais mis en height 800px . Je l'ai passé en 100%. Tu peux aller voir sur le site. En tout cas merci beaucoup. Je laisse la discussion ouverte car j'aurai peut-être un autre souci... |
|
jeandub
|
Sur mon ordi ça marche bien mais si je change la résolution (je suis en 1600x900) tout foire dans l'affichage |
Notorius
|
Ca me rappelle des souvenirs de galère ça Plus sérieusement, en regardant de plus près ton code, c'est pas seulement l'image le problème. Quand tu dis que l'affichage foire, tu veux parler de ça?
Le truc c'est que caler du texte sur une image et faire en sorte qu'il suive son changement de taille si la résolution change, c'est pas forcément très simple. En plus là il y a l'air d'avoir des problèmes de dimensionnement ou de placement sur certains de tes conteneurs j'ai l'impression : http://i.imgur.com/ah8jYrX.jpg http://i.imgur.com/QiXjyXn.jpg http://i.imgur.com/211DM4D.jpg J'ai pas assez d'expérience en dev web ni de temps pour te donner une réponse toute faite. Mais Homer pourra peut être te diriger dans bonne la direction en partant de ça |
Homer
|
Le soucis c'est l'image, tu ne peux pas, comme le dis notorius, placer un texte qui suive l'image du background. Il faut avoir un image avec des bords qui peuvent être rognés et qui sera centrée, ainsi, peut importe la résolution de l'écran (hors petite résolution), tu aura un container qui ne bougera pas de place et qui sera placé sur l'image. Perso j'utilise des container de 1024px pour mes sites, donc la largeur de m'image utile de ton background doit être de 1024, avec un résolution total de 1920, les 896px en trop seront masqué suivant les résolutions, ce qui donnera un aspect cover dans tout les cas. Pour les résolution inférieur, reproduire cela avec des palliés différents. |
|
jeandub
|
OK, désolé mais je n'ai pas tout compris Homer. En plus , si vous cliquez sur la zone TV ON, vous accédez aux autres pages et là aussi, avec ma résolution, tout colle, si je diminue la résolution, des éléments se retrouvent en dehors de la page. |
|
Homer
|
Oui c'est pas très clair comme explication... En fait, part du principe, que peu importe la résolution, tu dois avoir une surface utile (là ou tu met tes textes), de 1024px (qui correspond à une taille d'un 15"). Tout ce qui est au de la de ça, est susceptible d'être masqué. Ton image, c'est pareil, il faut que ta télé et les textes ai un résolution de 1024px. Ensuite,pour éviter que sur ton site cela fasse moche, tu met des bords de même couleur et qui seront masqué suivant les résolutions. Est-ce un peu plus clair ? Sinon, je te ferai une démo qui devrait plus te parler. |
|
jeandub
|
Si je te suis, je devrais toujours développer pour des écrans de taille 15" ? Et la résolution, on s'en moque un peu ? Que dirais-tu d'utiliser les @medias ? Dans le cas de ma page d'accueil, ayant mis la width à 100%, je pensais que ça s'adapterais automatiquement. OK pour la démo. |
|
jeandub
|
Pour Notorius. Effectivement c'est bien de ça que je parle, et oui, c'est la grosse galère surtout que je fais le site pour une association et les copains attendent le résultat ! pour mes dimensionnements et placements, je veux bien te croire vu que je bidouille depuis des jours. A force de modifier, je pense ne pas toujours prévoir l'ensemble. A propos d'image, dans les autres pages, en tête, j'ai des images qui s'aafichent. Or, elles sont lentes à s'afficher. Vous avez uneméthode pour accélérer ça ? Pour terminer, je vous mets une copie-écran de ce que ça donne chez moi (c'est-à-dire comme je le veux). C'est le résultat obtenu après les conseils d'Homer.  |
|
Homer
|
Nan, uniquement dans ton cas, quand tu as du texte qui doit se mettre sur une image en background. Tu peux aussi utilisé les @media pour "toutes" les résolutions, mais le travaille et beaucoup plus long. Le soucis du résultat que tu veux, c'est que en réduisant ta résolution, le résultat ne pourra plus être comme ça, et donc faut trouver d'autre solution pour que cela s'adapte. Par exemple, le texte orange de droit devra se trouver center en haut, et l'agenda en bas de la télé. Après c'est un gros travail de placement. |
|
Notorius
|
Et des sessions d'arrachage de cheveux garanties, sans être sûr pour autant que le résultat sera parfait. jeandub : pour mes dimensionnements et placements, je veux bien te croire vu que je bidouille depuis des jours. A force de modifier, je pense ne pas toujours prévoir l'ensemble. Je vois exactement ce que tu veux dire, et à moins d'avoir une grosse expérience dans le domaine, le css et le placement sur une page web, c'est toujours horrible. Tu bouges un micro élément, t'as tout le reste qui part en vrac. jeandub : A propos d'image, dans les autres pages, en tête, j'ai des images qui s'aafichent. Or, elles sont lentes à s'afficher. Vous avez uneméthode pour accélérer ça ? Tu peux vérifier la taille de l'image en priorité, et la réduire en la passant par exemple de png à jpg. Sinon faut regarder si c'est pas le serveur qui patine. L'outil intégré à mozilla est parfait pour vérifier le temps que le serveur met à envoyer l'image (ctrl+alt+c, onglet Réseau). Sinon ça serait peut être plus simple si tu découpais ton design. Du genre une image de fond (celle-derrière la tv), et une image pour le menu de gauche (la TV elle-même). Avec du padding pour le texte et une règle pour le menu, ça doit être possible de faire en sorte qu'il s'adapte selon la résolution. Le but étant surtout de pouvoir séparer chaque élément pour avoir un contrôle dessus. |
Kommunauty © Tous droits réservés
Contact /
Charte & Mentions légales /
Hebergement gratuit /
Bon plan hébergement /
Aide B2i
