Partage
  • Partager sur Facebook
  • Partager sur Twitter

Déplacer une image en CSS

Sujet résolu
16 octobre 2018 à 17:18:17

Bonjour à tous,

Je me pose une petite question après avoir essayer pas mal de choses

Comment faire en sorte que cette image (le petit carton) ne dépasse pas sur le bouton "Acheter", comme le petit billet sur la gauche :

Je voudrais juste le descendre un peu de façon à l'aligner à l'autre image qui est déjà parfaitement alignée sans l'aide de CSS.

Merci d'avance pour vos réponses (désolé le CSS et moi ça fait 2) 

-
Edité par BaptisteNex 16 octobre 2018 à 17:31:05

  • Partager sur Facebook
  • Partager sur Twitter
16 octobre 2018 à 18:50:34

Bonjour, 

  Vous voulez déplacer une image sans l'aide du CSS? 

  • Partager sur Facebook
  • Partager sur Twitter
16 octobre 2018 à 18:54:34

Doue a écrit:

Bonjour, 

  Vous voulez déplacer une image sans l'aide du CSS? 


Je veux que l'icône du carton soit un peu plus bas du bouton "Acheter" en utilisant un code CSS mais je ne sais pas comment m'y prendre
  • Partager sur Facebook
  • Partager sur Twitter
16 octobre 2018 à 18:57:01

Vous pouvez utiliser sur votre code CSS: 

  img { position: absolute; left: 00px; right: .... ) vous allez jouer avec les dimensions selon votre maquette !!sinon, essayez de nous montrer une capture de votre code! 

  • Partager sur Facebook
  • Partager sur Twitter
16 octobre 2018 à 19:04:52

Doue a écrit:

Vous pouvez utiliser sur votre code CSS: 

  img { position: absolute; left: 00px; right: .... ) vous allez jouer avec les dimensions selon votre maquette !!sinon, essayez de nous montrer une capture de votre code! 


Je voudrais juste qu'il soit moins haut sans le déplacer à gauche ou à droite sinon l'icône du carton sort de la boxe 

Quel code voulez vous voir?

  • Partager sur Facebook
  • Partager sur Twitter
16 octobre 2018 à 19:07:53

Donc vous pouvez jouer avec 'top' ! 

img{

position absolute;

top: 100px; 

}

N.B: ici vous changez la valeur 100 selon de ce que vous allez la mettre 

  • Partager sur Facebook
  • Partager sur Twitter
16 octobre 2018 à 19:15:24

Doue a écrit:

Donc vous pouvez jouer avec 'top' ! 

img{

position absolute;

top: 100px; 

}

N.B: ici vous changez la valeur 100 selon de ce que vous allez la mettre 


J'utilise plusieurs images donc le img { décale tout du coup comment remédier à ça?

-
Edité par BaptisteNex 16 octobre 2018 à 19:15:43

  • Partager sur Facebook
  • Partager sur Twitter
16 octobre 2018 à 19:18:13

Vous avez plusieurs images! donc essayez d'écrire une classe pour ton image que vous voulez le déplacer ! 

<img class="mon_img" src="........" />

et dans votre css, à la place d'écrire img{....} écrivez 

.mon_img{

position absolute;

top: 100px; }

  • Partager sur Facebook
  • Partager sur Twitter
16 octobre 2018 à 19:22:45

Doue a écrit:

Vous avez plusieurs images! donc essayez d'écrire une classe pour ton image que vous voulez le déplacer ! 

<img class="mon_img" src="........" />

et dans votre css, à la place d'écrire img{....} écrivez 

.mon_img{

position absolute;

top: 100px; }

Je viens d'essayer ça, l'image reste immobile à l'endroit initial (comme sur le screen que j'ai mis dans mon sujet)

EDIT : J'avais oublié un : donc maintenant ça déplace l'image vers la gauche, le problème c'est que si je joue avec le left et le right mon image sort de la boxe

-
Edité par BaptisteNex 16 octobre 2018 à 19:24:51

  • Partager sur Facebook
  • Partager sur Twitter
16 octobre 2018 à 19:29:31

y a une autre solution: pourquoi vous ne déplacez pas le bouton acheter !! et vous jouez avec margin-top !!! c'est mieux de casser la tête avec l'image
  • Partager sur Facebook
  • Partager sur Twitter
16 octobre 2018 à 19:31:23

Doue a écrit:

y a une autre solution: pourquoi vous ne déplacez pas le bouton acheter !! et vous jouez avec margin-top !!! c'est mieux de casser la tête avec l'image


Je vous remercie pour votre aide précieuse ! Je viens de trouver la solution

Le code est : 

.mon_img{

position: relative;
top: 4px;
}

Il fallait utiliser position: relative; au lieu de position: absolute;

Bonne soirée

  • Partager sur Facebook
  • Partager sur Twitter
22 février 2022 à 15:55:04

je veux deplacer des images d'un colonne a une autre

  • Partager sur Facebook
  • Partager sur Twitter
22 février 2022 à 16:42:39

@AwaDiop12 Bonjour, merci de ne pas déterrer d'ancien sujet résolu. Créer le votre dans le respect des règles du forum à savoir qu'un message commence par des règles de politesses (un bonjour ou des salutations à la communauté et se termine par des remerciements par avance pour les futures réponses) un descriptif de votre problème et le code que vous avez écrit inséré sur le forum avec l'outil d'intégration de code soit le bouton code </>.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

  • Partager sur Facebook
  • Partager sur Twitter