É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
Design avec élements déplaçables - Design avec box étirables Développement d'un site Web ou d'une appli mobile 27 Avril 2007
WordPress Problème affichage style avec Elementor (titre, bordures, separateur) Administration d'un site Web 8 Août 2022
Problème indexation car élément "url" manquant sur logo Crawl et indexation Google, sitemaps 11 Février 2022
Js : récupérer un élément dans un array Développement d'un site Web ou d'une appli mobile 23 Octobre 2021
WordPress Suppression élément avec Css Demandes d'avis et de conseils sur vos sites 16 Août 2020
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
RESOLU Google Webmaster Tool Éléments tactiles trop proches Référencement Google 14 Mars 2015
Mon ménu déroulant décale tous les éléments qui se trouvent après Développement d'un site Web ou d'une appli mobile 18 Janvier 2015
Htaccess fonctionne partielement Débuter en référencement 26 Octobre 2014
[Cacher un élément] - Comment réagit Google Bot ? Référencement Google 7 Juillet 2014
Démantèlement de Google Google : l'entreprise, les sites web, les services 28 Juin 2014