Taille de position et de background

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Taille de position et de background

    Bonjour,

    Ce n'est pas toujours facile d'expliquer, j'espère être assez clair.

    Je tente de développer un site sur un template avec un layout reponsif de 1920 px. Un aperçu des positions figure en pj1.

    Mon problème est d'ajuster correctement la position banner. Je m'explique : j'ai créé une bannière sous photoshop de 1920 px et j'ai adapté le code css du template pour que le background de la position bannière puisse s'afficher correctement dans toutes les résolutions (width : 100% height : auto) -> cf pj2.

    Si le background de la bannière s'affiche bien comme je veux (sur toutes les résolutions), je remarque que sur des résolutions inférieures à 1920 px, la position elle ne semble pas s'adapter -> cf pj3 et pj4

    Sauriez vous ce que j'ai mal fait ?

    merci

    Cliquez sur l'image pour l'afficher en taille normale

Nom : pj1.jpg 
Affichages : 1 
Taille : 23,9 Ko 
ID : 1820578Cliquez sur l'image pour l'afficher en taille normale

Nom : pj2.jpg 
Affichages : 1 
Taille : 143,8 Ko 
ID : 1820579Cliquez sur l'image pour l'afficher en taille normale

Nom : pj3.jpg 
Affichages : 1 
Taille : 47,2 Ko 
ID : 1820580Cliquez sur l'image pour l'afficher en taille normale

Nom : pj4.jpg 
Affichages : 1 
Taille : 35,6 Ko 
ID : 1820581

  • #2
    Re : Taille de position et de background

    l'idéal serait de voir cela en "live" pour analyser les valeurs que prennent les styles...
    Christophe
    http://www.webcrea.fr

    Commentaire


    • #3
      Re : Taille de position et de background

      Envoyé par vince26exe Voir le message
      Bonjour,


      Si le background de la bannière s'affiche bien comme je veux (sur toutes les résolutions), je remarque que sur des résolutions inférieures à 1920 px, la position elle ne semble pas s'adapter -> cf pj3 et pj4

      Sauriez vous ce que j'ai mal fait ?

      merci
      on dirais bien que ton image se retrecit bien mais pas la balise div qui la contient.
      au lieu de cibler le background dans la propriété #banner, cible directement la div.

      La pour le moment seul l image se deforme et non la div qui la contient.
      Ajoutes ceci dans le selecteur #banner :
      #banner {
      width:100%;
      height:auto;
      max-width:1920px;
      }
      Dernière édition par lefabdu51 à 30/07/2014, 18h23

      Commentaire


      • #4
        Re : Taille de position et de background

        Merci à vous pour vos réponses.

        lefabdu51 : j'ai tenté ta solution -> résultat l'image conserve ses proportions d'origine (1920 px * 162 px) donc image tronquée lorsque je baisse la résolution.

        webcrea : je ne peux offrir le live mais en pj je mets les styles calculés pour une résolution 1680 px et une résolution 1280 px... Est ce que cela peut aider à la résolution du problème ? On constate que la hauteur est de 162 px dans les 2 cas et c'est bien cela le problème

        Cliquez sur l'image pour l'afficher en taille normale

Nom : styles_calcules_1680px.jpg 
Affichages : 1 
Taille : 110,0 Ko 
ID : 1803595Cliquez sur l'image pour l'afficher en taille normale

Nom : styles_calcules_1280px.jpg 
Affichages : 1 
Taille : 101,5 Ko 
ID : 1803596

        Commentaire


        • #5
          Re : Taille de position et de background

          Je vous mets également en pj les styles calculés pour la div... En espérant que cela éclaire le sujet

          Cliquez sur l'image pour l'afficher en taille normale

Nom : styles_calcules_div_1280px.jpg 
Affichages : 1 
Taille : 98,7 Ko 
ID : 1803597

          Commentaire


          • #6
            Re : Taille de position et de background

            avec firebug, peut tu donner le selecteur css associé à la div ou est située ton image?

            Commentaire

            Annonce

            Réduire
            Aucune annonce pour le moment.

            Partenaire de l'association

            Réduire

            Hébergeur Web PlanetHoster
            Travaille ...
            X