Titre: Problèmes avec résolutions d'écrans
Posté par: Numbieworld le le 04-05-2012 a 00:22:05
Bonsoir à tous !
Voilà je fait appel à vos neurones car je travaille sur un site et je l'adapte à plusieurs résolutions d'écran. Au départ il s'affichait nikel sur mon 1680x1050. Mais maintenant on m'a demandé à l'adapter à d'autres résolutions notamment pour PC portables avec du 1280x800. Ok pas de problème je me suis mis au boulot j'ai passé certaines valeurs en % et du coup nikel mais j'ai un problème avec mes images de fond qui défilent avec jcarousellite. Sur mon 1280x800 je vois l'image en entier mais sur mon 1680x1050, la largeur est ok mais il manque la moitié de la hauteur impossible de l'adapter à la taille du cadre et quand j'appelle les photos avec la ligne suivante:
"<li><img src="/images/123.jpg" width="1400" height="400" alt=""></li>"
et que je change les valeurs de widht et height par des % ben la photo est nikel en largeur sur les deux écrans mais la hauteur devient bonne sur mon 1680X1050 et ridiculement petite sur mon 1280X800.
Donc voilà au secours j'ai besoin d'aide !!! |
Titre: Re:Problèmes avec résolutions d'écrans
Posté par: WebD le le 04-05-2012 a 08:30:47
Bonjour,
Pour les images du peux essayer de mettre seulement width et la hauteur sera calculé en proportion.
Je te conseil de faire un design "responsive",très à le mode en ce moment.
Ce sont des feuilles de style (css) qui s'appliquent ou pas selon la taille de l'écran.
Pour avoir un exemple, tu peux allé sur mon site et faire bouger la taille de ton explorateur et tu verras qu'il y aura un changement exactement à 1250px.
Exemple: www.webdesign-entreprise.com
Pour ma part, j'ai choisi de ne faire que deux styles différents mais tu peux en faire plus.
Voici le code:
Code:
@media screen and (max-width: 1249px) {
Le code CSS pour les écrans de moins de 1249px;
}
@media screen and (min-width: 1250px) {
Le code CSS pour les écrans de plus de 1250px;
}
|
|
|
Titre: Re:Problèmes avec résolutions d'écrans
Posté par: sweb knife le le 21-06-2012 a 19:35:48
| Tu devrais savoir sa : le width : en % et la hauteur en pixel. ensuite a toi de voir si tu veux utiliser " fixe " ou encore " repeat " |
Titre: Re:Problèmes avec résolutions d'écrans
Posté par: KB le le 22-06-2012 a 15:21:22
hello,
.| Tu devrais savoir sa : le width : en % et la hauteur en pixel. ensuite a toi de voir si tu veux utiliser " fixe " ou encore " repeat " |
|
je ne comprends pas ta réponse. TU peux préciser ? |
Titre: Re:Problèmes avec résolutions d'écrans
Posté par: sweb knife le le 22-06-2012 a 19:04:20
en faite je vien de me rendre compte qu'il y a un problème dans ton post, tu parle d'image de fond, puis ensuite tu nous parle de d'une image avec " <img src="" > " Une image de fond c'est avec du CSS que tu devrait la faire
code: CSS
#image_de_fond
{
background-image: url('ton_image.jpg')
}
Ensuite a partir de sa ajoute " no-repeat " si tu veux qu'elle apparaisse une seul fois, ...
Le problème par contre de ce code c'est que l'image ne s'adapte de pas à la taille de son contenent,
Il est préférable d'utiliser ce code pour le fond réel du site, avec un morceau de couleur noir, tu fait un fond noir ( même si c'est plus simple de faire background : black )
Apres si ce que tu veux faire c'est faire défiler des images, sur ton site, n'appelle plus sa des images de fond.
Pour ce qui est de lahauteur en %, ;D Ne jamais faire sa, une hauteur tu la met en pixel, parce que % sa signifie que sa s'adapte à la hauteur , et la pas de l'ecrant, mais du site, donc ton site est censé avoir la meme hauteur quelque soit la taille de l'ecrant.
|
Titre: Re:Problèmes avec résolutions d'écrans
Posté par: belzorash le le 24-07-2012 a 12:13:20
Si tu utilises les propriétés css suivantes sur ton background, il s'adaptera :
#background{
background-size:100% 100%!important;
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
}
L'image de background sera donc adapté à la taille de ton navigateur (et donc à diverses résolutions.
Sinon, il y a possibilité d'utiliser le web responsive design, qui permet de conditionner son css.
Voici le lien d'un article pouvant te servir :
http://belzorash.com/blog/web-responsive-design (http://belzorash.com/blog/web-responsive-design) |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|