[Résolu] 2 images collées qui se décollent dès changement dimension

Bonjour,

C'est mon premier message sur ce forum, mais ça fait un petit moment que je tourne dessus en mode "discret" ...

Mais aujourd'hui j'ai décidé de sauter le pas car j'ai un problème !

Mon objectif est de coller deux images, jusque là ça fonctionne.
Mais dès que ma résolution est modifiée les deux images soient : se chevauchent ou se décalent complément.

J'aimerais donc savoir comment faire (dans un but responsive) pour que les images soient constamment collées.

Voici mon bout de code HTML :

<div id="conteneur2">
  <div class="thomas"> <img src="Thomas.png"> </div>
  <div class="guy"> <img src="Guy-Man.png"> </div>
</div>

Et voici la partie CSS :
J'ai créé une div "conteneur2" pour faire des motifs sur l'ensemble des images mais ça ne m'a pas encore servi....

#conteneur2 {

}

#conteneur2 .thomas {
  position: relative;
  display: inline;
  left: 35%;
}

#conteneur2 .guy {
  position: relative;
  display: inline;
  left: 21%;
}

Voici une capture du résultat actuel :


Pour info par la suite je veux que lorsque l'utilisateur place sa souris sur l'ensemble les deux images se décollent et partent des deux cotés de la page.


Voila ! Merci d'avance pour votre aide !
Modifié par HexaGo (07 Sep 2015 - 18:47)

Bonjour, commence par créer une classe genre:

.imgctr {text-align: center;}

Et après tu mets tes images comme cela:

<div class="imgctr">
                    <img src="xxx1.yyy">
                    <img src="xxx2.yyy">
</div>

Modifié par dann (07 Sep 2015 - 22:18)

Nickel ! Merci beaucoup, je ne savais pas que l'on pouvait se servir de "text-align" pour des objets

J'ai du rajouter ça :

.imgctr img {
  margin: 80px -97px;  /* Marge pour les recoller */
}

...pour recoller les deux images qui étaient séparées par un blanc.

Merci pour ta réponse
Modifié par HexaGo (07 Sep 2015 - 23:52)

Salut,
On peut se servir de la propriété 'text-align' pour tous les éléments de type 'inline' (span, a, img, input...)

Nickel je prends note