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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par henri80, 11 Septembre 2011.

  1. henri80
    henri80 WRInaute discret
    Inscrit:
    21 Mars 2009
    Messages:
    165
    J'aime reçus:
    0
    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:

    Code:
    #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 !
     
  2. Amauri
    Amauri WRInaute occasionnel
    Inscrit:
    7 Avril 2011
    Messages:
    314
    J'aime reçus:
    0
    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 ;)
     
  3. henri80
    henri80 WRInaute discret
    Inscrit:
    21 Mars 2009
    Messages:
    165
    J'aime reçus:
    0
    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 ?
     
  4. Amauri
    Amauri WRInaute occasionnel
    Inscrit:
    7 Avril 2011
    Messages:
    314
    J'aime reçus:
    0
    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).
     
  5. henri80
    henri80 WRInaute discret
    Inscrit:
    21 Mars 2009
    Messages:
    165
    J'aime reçus:
    0
    Impeccable ! merci :mrgreen:
     
Chargement...
Similar Threads - Élément design déplace Forum Date
Fil d'Ariane : nom de l'élément sans objet, c'est grave ? Crawl et indexation Google, sitemaps 22 Octobre 2019
Search Console Texte illisible et éléments cliquables trop rapprochés Débuter en référencement 7 Juillet 2019
nofollow sur les éléments de menu : impact référencement Demandes d'avis et de conseils sur vos sites 27 Novembre 2018
Redirections de pages avec suppression d'un élément dans l'URL [RegEX] Débuter en référencement 21 Novembre 2017
Type d'erreur Champ manquant : fn - 422 éléments Débuter en référencement 11 Janvier 2017
Ergonomie mobile > Éléments tactiles trop proches Crawl et indexation Google, sitemaps 20 Août 2015
Google veut crawler des élèments qui n'existe pas sur mon serveur Crawl et indexation Google, sitemaps 26 Juin 2015
getElementById et onChange Développement d'un site Web ou d'une appli mobile 26 Mai 2015
précision : mots clefs réelement totalement inutile ou pas ? Débuter en référencement 25 Avril 2015
Microdata et SiteNavigationElement Débuter en référencement 18 Mars 2015
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice