Position d'un élément qui varie selon les résolutions [Résolu]

Bonjour,

J'ai un élément que j'ai positionné de manière "fixed" et qui se place comme il faut pour une résolution standard de 1024x768, maintenant sur un notebook, il se décale vers la gauche, voici le code:

div{ 
position:fixed; 
right:750px; 
bottom:200px; 
width:128px; 
height:108px; 
cursor:pointer;
background:url('element.png') no-repeat top center;
 }

Ma question est si j'utilise les media queries pour l'adapter en mettant disons :

@media only screen and(min-device-width: 768px) and(max-device-width: 1024px) { 

div{
right: 500px!important;
   }

}

le code est correct?
Je débute dans les media queries
Modifié par jmlapam (09 Nov 2011 - 23:53)

Le code est correct, mais je te conseillerais d'éviter !important. Ça t'évitera des problèmes de priorités plus tard.

Sinon, tu n'as pas besoin d'inscrire "only screen and" sur ta querie. Ceci suffirait:

@media (min-device-width: 768px) and (max-device-width: 1024px) { }

Et ultimement, peut-être que trouver une manière de positionner ton bloc fixe de manière fluide serait plus avantageuse. (notamment dans le cas de support absent des MQ)

Ah merci, je fais enlever les écritures inutiles.

Pour le bloc, tu as raison pour le positionnement mais le souci est qu'il fonctionne avec un script (c'est un ascenseur en fait) à l'intérieur d'une div positionnée vers le milieu de la page. .

edit: donc pour position, je le passe en relative? Ouais pour les !important j'en mets partout, c'est nul, faut que je me renseigne plus, je croyais connaître et en fait non.
Modifié par jmlapam (10 Nov 2011 - 03:24)

!important donne une priorité absolue et s'appliquera peu importe.

Cela devient donc assez dérangeant quand au final tu souhaite à nouveau réécrire par dessus ce style.

C'est aussi, entre autre, une des raisons qui fait que plusieurs intégrateurs préfèrent utiliser des class plutôt que des ids dans la majorité des cas de figure.

Pour faire simple:

Priorité A : attribut style="" sur un élément
Piorité B : id
Priorité C : class
Priorité D : balises simple, pseudo-classe (:hover, etc), sélecteur d'attributs ([])
Nul: >, +

Vaut mieux offrir un poid équivalent pour appliquer notre style que de passer par un !important. Sauf dans des cas assez précis, par exemple où ton style doit s'appliquer dans un environnement que tu ne contrôle pas (ex: des plugins)

Je me fais une petite fiche, merci à toi

Bon ma querie ne marche pas, j'ai pas d'idée, je pensais avoir tout respecté, en plus j'ai changé mes id en class pour que cela soit plus souple au niveau des priorités comme tu le suggérais Vaxilart, mais rien n'y fait.

Commence par regarder si ta querie est appliquée sur la page. Par exemple:

@media (min-device-width: 768px) and (max-device-width: 1024px) {
  body::before {
    content: "ça marche !";
    display: block;
    padding: 40px;
  }
}

Non cela ne marche pas (merci de tuyau, je vais tester comme cela)
J'ai du me planter dans la résolution de mon écran, c'est pas possible autrement. La programmation PHP me grille le cerveau pour réfléchir à autre chose, je sature, je vais vérifier ma résolution de notebook.

RESOLU: n'importe quoi, évidemment si c'est pas le même nom dans le CSS et le HTML, on ne va pas loin.

Merci à toi Vaxilart.
Modifié par jmlapam (11 Nov 2011 - 02:54)

Utilise des unités fluides(%, em ...) pour tes éléments.

Tu gagnera en souplesse et en compatilibitée.