La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML
(Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Problèmes avec résolutions d'écrans
« Précédent Suivant »
Pages: [1] Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: Problèmes avec résolutions d'écrans  (Lu 1555 fois)
Problèmes avec résolutions d'écrans
« sur: le 04-05-2012 a 00:22:05 »
Numbieworld
Membre récent
*

Hors-Ligne

Messages: 1





Voir le Profil
Répondre avec citation

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 !!! 

Rapporter au modérateur  

Re:Problèmes avec résolutions d'écrans
« Répondre #1 sur: le 04-05-2012 a 08:30:47 »
WebD
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 938





Voir le Profil    WWW    E-Mail
Répondre avec citation

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;
}

« Dernière Édition: le 04-05-2012 a 08:32:13 par WebD » Rapporter au modérateur  

Agence Web  | Sticker MacBook | Lunettes personnalisées
Re:Problèmes avec résolutions d'écrans
« Répondre #2 sur: le 21-06-2012 a 19:35:48 »
sweb knife
Membre récent
*

Hors-Ligne

Messages: 9





Voir le Profil
Répondre avec citation

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 "

Rapporter au modérateur  

Ne jamais abandonner !
C'est complexe de rester simple, et c'est tout aussi dur de penser différemment.. ( Steve Jobs )
Re:Problèmes avec résolutions d'écrans
« Répondre #3 sur: le 22-06-2012 a 15:21:22 »
KB
Superactif
****

Hors-Ligne

Messages: 613





Voir le Profil
Répondre avec citation

hello,

.
Citation:
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 ?

Rapporter au modérateur  
Re:Problèmes avec résolutions d'écrans
« Répondre #4 sur: le 22-06-2012 a 19:04:20 »
sweb knife
Membre récent
*

Hors-Ligne

Messages: 9





Voir le Profil
Répondre avec citation

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 %,  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.

Rapporter au modérateur  

Ne jamais abandonner !
C'est complexe de rester simple, et c'est tout aussi dur de penser différemment.. ( Steve Jobs )
Re:Problèmes avec résolutions d'écrans
« Répondre #5 sur: le 24-07-2012 a 12:13:20 »
belzorash
Membre récent
*

Hors-Ligne

Sexe: Male
Messages: 4





Voir le Profil    WWW    E-Mail
Répondre avec citation

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

Rapporter au modérateur  

Développeur / intégrateur freelance à Strasbourg
Passionné par le dev PHP, l'animation jquery et tout ce qui touche aux nouvelles technologies.


http://www.belzorash.com/
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg