Sujet Précédent Sujet Suivant

Html mettre 2 image côte a côte + lien

Résolu/Fermé
mickapro84
Messages postés
6
Date d'inscription
vendredi 10 juillet 2015
Statut
Membre
Dernière intervention
8 août 2015
 - Modifié par mickapro84 le 10/07/2015 à 09:31
mickapro84
Messages postés
6
Date d'inscription
vendredi 10 juillet 2015
Statut
Membre
Dernière intervention
8 août 2015
 - 10 juil. 2015 à 17:55
Bonjour,

Je n'arrive pas à mettre 2 image cote a cote avec un lien

les images :


et


Les 2 images forme un cercle une fois cote a cote, et si ont clique a droit ou a gauche ont change de page (en théorie)

Sauf que quand je les met côte a côte, les 2 lien ont font pulque 1, comme si c'était une seul image...




<p>
<a href="resultat.php"><img src="boutonlive.png" /></a>
<a href="utilisateur.php"><img src="boutonpilote.png" /></a>
</p>

p {position:relative; width:180px; padding-right:780px; text-align:right;}
p img {position:absolute; right:0;}

merci d'avance
A voir également:

3 réponses

Réponse 1 / 3
mickapro84
Messages postés
6
Date d'inscription
vendredi 10 juillet 2015
Statut
Membre
Dernière intervention
8 août 2015
10 juil. 2015 à 10:58
MERCI, mais sa ne marche toujours pas ... :(

Voici ce que sa fait :



Les liens marchent mais les images sont pas sur la même ligne...

J'ai pas de style CSS... Y a t'il une fonction css qui peux résoudre sa ?
0
nichola
Messages postés
111
Date d'inscription
jeudi 7 juin 2007
Statut
Membre
Dernière intervention
24 avril 2016
 11
Modifié par nichola le 10/07/2015 à 11:20
Il y à plusieurs raisons qui peuvent faire que çà marche pas:

- Soit les images ne sont pas bien découpés (trop large avec transparent)
- Soit le conteneur est trop petit et du coup fait partir l'image de droite en bas
- Soit tu as un style qui fait "interférence" mais là difficile à dire sans voir

Pour t'aider, essaye de rajouter des bordures aux éléments pour mieux voir, par exemple: 

<div style="border:1px solid red;"> 
<a href="resultat.php" style="float:left;border:1px solid black;""><img src="boutonlive.png" /></a> 
<a href="utilisateur.php" style="float:left;border:1px solid green;""><img src="boutonpilote.png" /></a> 
</div>


Le simple fait de faire ce genre de chose peut peut être t'aider à voir ce qu'il ne va pas
0
Réponse 2 / 3
mickapro84
Messages postés
6
Date d'inscription
vendredi 10 juillet 2015
Statut
Membre
Dernière intervention
8 août 2015
10 juil. 2015 à 11:43
Voici ce que sa fait :



Mon CSS 

html { 
  margin:0;
  padding:0;
  background: url(fond.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}
0
nichola
Messages postés
111
Date d'inscription
jeudi 7 juin 2007
Statut
Membre
Dernière intervention
24 avril 2016
 11
Modifié par nichola le 10/07/2015 à 11:50
Si les deux images sont exactement celles que tu as joint plus haut, le problème est bien ce que je te disais, il faudrai qu'elle soient bien découpés, il y a un espace transparent qui fait qui l'image ne coïncide pas exactement.

En clair, chacune des images doit faire en largeur, la moitié du diamètre total du cercle
0
mickapro84
Messages postés
6
Date d'inscription
vendredi 10 juillet 2015
Statut
Membre
Dernière intervention
8 août 2015
10 juil. 2015 à 17:55
oh non, je suis trop bête vous avez raison !
C'est ce que je voulais faire, mais je sais pas pourquoi j'ai pas fait au bonne dimension.

Sa fait 1 semaine que je cherche une solution alors que c'est moi qui est a coté de la plaque.

Bref un grand merci a vous ! Vous m'avais énormément aidé
0
Réponse 3 / 3
nichola
Messages postés
111
Date d'inscription
jeudi 7 juin 2007
Statut
Membre
Dernière intervention
24 avril 2016
 11
10 juil. 2015 à 10:02
Salut,

Je pense que quelque chose comme çà devrait suffire (à condition que tes images soient bien découpées):

<div>
<a href="resultat.php" style="float:left;"><img src="boutonlive.png" /></a>
<a href="utilisateur.php" style="float:left;"><img src="boutonpilote.png" /></a>
</div>

Ensuite peut être qu'il faudrait ajuster par rapport aux styles que tu appliques déjà ...
-1