Déplacer et centrer des images

Résolu

Skyronn Messages postés 41 Statut Membre -
Skyronn Messages postés 41 Statut Membre - 3 mars 2015 à 22:16

Bonjour,

Je suis en train d'améliorer mon site web !
Par contre j'ai un problème avec des icônes que j'ai créé, je n'arrive pas à les mettre bien à droite et en face de chacun des textes.

Voilà l'adresse du site
http://www.worlddiscover.esy.es/

On voit bien pour le premier thème que j'ai quasiment réussi à centrer l'image, mais pas totalement :/

Bref, merci d'avance pour votre aide !!

Afficher la suite

1 réponse

Résumé de la discussion

Un problème d’alignement des icônes à droite par rapport au texte sur un site web a été identifié, le rendu visuel ne centrant pas correctement l’image pour le premier thème. Plusieurs contributeurs proposent une approche CSS et HTML consistant à encapsuler l’image dans une div avec un span, et à appliquer float: right et alignement vertical pour obtenir le positionnement souhaité. La solution a été rapidement testée et devrait s’adapter, avec possibilité d'ajuster la hauteur et l'espacement selon les cas et peut être affinée via le code source si nécessaire. Par ailleurs, certains échanges évoquent des modifications d’alignement liées au padding ou à la largeur des blocs, et signalent l’intérêt d’effets hover pour l’interactivité des icônes.

codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention 123

bonjour,

<div class="black-50">
 <h2>
  <span style="width: 0%;display: inline-block;">Incontournable</span>
  <span style="vertical-align: middle;display: inline-block;text-align: right;width: 97%;">
   <img  src= "http://www.worlddiscover.esy.es/imagesjapon/bouton2t.png" />
  </span>
 </h2>
</div>

Skyronn Messages postés 41 Statut Membre

Encore merci à toi ! Ça fonctionne ^_^

Dis moi, si je veux écrire un petit "cliquez ici pour en savoir plus ->" juste à gauche de l'image, je dois m'y prendre comment ?
0

codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention 123


<div class="black-50">
			<h2>
				<span style="width: 0%;display: inline-block;white-space: nowrap;">Exemple de séjour</span>
				<span style="vertical-align: middle;display: inline-block;text-align: right;width: 97%;">
					<a style="font-size: 14px;vertical-align: 64%;margin-right: 15px;" href="https://www.google.fr/?gws_rd=ssl">cliquez ici pour en savoir plus</a><img  src= "http://www.worlddiscover.esy.es/imagesjapon/bouton6t.png" />
				</span>
			</h2>
		</div>

Skyronn Messages postés 41 Statut Membre > codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention

C'est ça ! Mais je me suis mal exprimé, désolé, c'était en fait "cliquez sur l'icône pour en savoir plus"
En gros, il faut la même chose mais que le lien soit sûr l'image :)
Merci de ta patience xD
0

codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention 123

lol je n'ai pas beaucoup mieux compris.

<div class="black-50">
			<h2>
				<span style="width: 0%;display: inline-block;white-space: nowrap;">Exemple de séjour</span>
				<span style="vertical-align: middle;display: inline-block;text-align: right;width: 97%;">
					<a style="font-size: 14px;margin-right: 15px;" href="https://www.google.fr/?gws_rd=ssl">
						cliquez sur l'icône pour en savoir plus
						<img style="vertical-align:-70%;"  src= "http://www.worlddiscover.esy.es/imagesjapon/bouton6t.png" />
					</a>
				</span>
			</h2>
		</div>

Skyronn Messages postés 41 Statut Membre > codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention

Ouais, ça rend pas si bien que je le pensais :(
J'hésite en fait entre un hover/rollover sur l'image ou juste ce système avec une phrase et le lien sur l'icône. Mais ça a pas l'air si simple :/
0

Déplacer et centrer des images

1 réponse

Discussions similaires

Newsletters