Suivez les fils RSS
 

Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • CSS2
  • PHP5 avanc�
  • Memento MySQL
  • Memento CSS 3
  • Memento XHTML
  • WordPress 3 100% pratique
  • jQuery et jQuery UI
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» Div margin css3 et responsive
Auteur
upMateOup
#
Citer
1 Posts
 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 :


#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...
^
Zachi
#
Citer
1 Posts
 Regards ceci : http://www.alsacreations.com/article/lire/930-css3-media-queries.html

^
Prévenir un modérateur
Répondre au sujet
Aller à