Pour commencer bonjour...
je bosse actuellement sur l'intégration d'un design qui doit s'adapter à un maximum d'écrans.
Je m'arrache les cheveux sur le fait que j'ai 3 div avec un background différents qui s'adaptent à l'écran (background-size en autre).
Cependant, j'ai mis sur la div du milieu un margin (top et bottom) afin que mes 3 div soient collées les unes aux autres et quand je passe sur un écran de taille inférieure à 12 pouces, les margin ne s'adaptent pas à l'écran et du coup mes div s'éloignent. Donc le background est par la même occasion explosé.
voici le code CSS que j'ai mis en place :
La class container est le contenu présent dans la div encmid.
Il y a t-il une solution pour que le margin s'adapte aussi à l'écran et se proportionne comme une div ?!?
Merci beaucoup...
je bosse actuellement sur l'intégration d'un design qui doit s'adapter à un maximum d'écrans.
Je m'arrache les cheveux sur le fait que j'ai 3 div avec un background différents qui s'adaptent à l'écran (background-size en autre).
Cependant, j'ai mis sur la div du milieu un margin (top et bottom) afin que mes 3 div soient collées les unes aux autres et quand je passe sur un écran de taille inférieure à 12 pouces, les margin ne s'adaptent pas à l'écran et du coup mes div s'éloignent. Donc le background est par la même occasion explosé.
voici le code CSS que j'ai mis en place :
#enchau {
background-attachment: scroll;
background-clip: border-box;
background-color: #143D6B;
background-image: url("img/encarthaut.png");
background-origin: padding-box;
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
height: 165px;
margin-left: 70px;
max-width: 406px;
}
#encbas {
background-attachment: scroll;
background-clip: border-box;
background-color: #143D6B;
background-image: url("img/encartbas.png");
background-origin: padding-box;
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% auto;
height: 95px;
margin-left: 70px;
max-width: 406px;
}
#encmid {
background-attachment: scroll;
background-clip: border-box;
background-color: #143D6B;
background-image: url("img/encartmilieu.png");
background-origin: padding-box;
background-position: center top;
background-repeat: repeat-y;
background-size: 100% auto;
margin: -21px 0 -16px 70px;
max-width: 406px;
}
.container p {
height: 114px;
max-width: 350px;
overflow: auto;
padding: 0 20px;
}
La class container est le contenu présent dans la div encmid.
Il y a t-il une solution pour que le margin s'adapte aussi à l'écran et se proportionne comme une div ?!?
Merci beaucoup...