Élément du design qui se déplace selon la résolution...

[henri80]

Bonsoir,

Je voulais créer un encart de connexion pour mon site, j'ai réussi tant bien que mal à le mettre en place, mais je me suis rendu compte qu'il bougeait selon la résolution.

Par exemple, en 1024*768, il vient se mettre sur le titre du site et en cache la moitié, alors que dans ma résolution(16/9e), il est bien dans le rectangle supérieur droit.

L'encart est composé d'un formulaire basique en html et une image de fond que je superpose; je vous mets le CSS:

#en_tete
{
   position:absolute;
   width: 470px;
   height: 370px;
   background-image: url("images/connexion-image.png");
   right: 145px; 
   top:9px;
   z-index:100	
}

#connexion {
        position:absolute;
	right:300px;
	top:95px;
	z-index:150;
}

J'ai lu qu'il fallait utiliser des % au lieu des px et définir un max/min-width, j'ai essayé mais ça ne donne rien.

Est-ce que quelqu'un pourrait me donner la possibilité de fixer mon encart précisément, et indépendamment de la résolution ?

Merci d'avance !

 

[Amauri]

C'est normal qu'il se déplace, il est toujours à 300 pixel de la bordure droite de l'écran.
Pour qu'il reste fixe, remplace le right:300px; par "left:50%;margin-left:-XXXpx" en modifiant XXX par la taille en px pour le bon placement

 

[henri80]

C'est normal qu'il se déplace, il est toujours à 300 pixel de la bordure droite de l'écran.
Pour qu'il reste fixe, remplace le right:300px; par "left:50%;margin-left:-XXXpx" en modifiant XXX par la taille en px pour le bon placement

Merci beaucoup! je débute à peine, et je crois donc comprendre que right, left... c'est par rapport aux bords de l'écran mais margin-x ce sont les marges du site !

Par contre, le "left:50%" place le bloc a 50% de la marge gauche ? quelle est la différence avec margin-left:XXpx au niveau du placement ?

 

[Amauri]

En position absolute l’élément se positionnera par rapport à l'écran, en position relative par rapport au bloc contenant l’élément.

Donc il faut le mettre à 50% de la bordure gauche pour le centrer + le positionner correctement en jouant avec margin-left:XXpx (XX peut-être positif ou négatif en fonction de l’endroit ou tu souhaites mettre le bloc).

 

[henri80]

Impeccable ! merci :mrgreen: