Placement de texte avec image !

[Petite-Nikita83]

Bonjour,

je cherche a savoir comment faire pour mettre un texte juste a coté d'une image dans un message. Je sais plus les codes a mettre.

J'ai éditer mon message.
J'ai vu et sa se fait de plus en plus des pages d'accueil avec icones des personnages mais en passant la souris dessus, sa met un avatar avec des explications. Comment fait-on ?

Merci d'avance

[Automne]

Bonjour,

Se dont vous parlez doit être image avec infobulle

Code:


<img src="LIEN DE TON IMAGE" title="texte de l'info bulle" />

Placer texte et image cote a cote (merci no-way). Ici à droite, mettre left poour le texte à gauche, changer la valeur margin:5px pour l'espace

<div><img src="Chemin" style="float:right;margin:5px;"/><p>BLABLA</p></div>

Cordialement

[no_way]

Bonjour
@Automne
Je pense que vous trouverez la solution pour votre deuxième requête par ici:
infobulle
J'ai mis un lien en exemple dans le-dit sujet.

Placer texte et image cote a cote...
<div><img src="Chemin" style="float:right;margin:5px;"/><p>BLABLA</p></div>

Pour la solution que vous a donné Automne, vous pouvez voir l'effet >ici<.
Le cadre flotte en haut à droite et le texte court à côté de l'image (à gauche donc Automne), puis sous l'image.
Si vous souhaitez éviter ce dernier comportement il vous faudra créer un tableau,
exemple de base:

Code:


<table><tr><td>Votre texte</td><td>Votre image</td></tr></table>


[tupac]

Bonjour

Vous avez aussi cela et beaucoup plus simple

Code:


<img src="votre image" alt="" height="100" width="150" align="left">bla bla bla bla<br>bla bla bla<br>bla bla bla


Bonne journée

[no_way]

Exact c'est équivalent à la solution CSS, exception faite de la marge ...

[tupac]

Vous avez aussi la solution de l'infobulle pour votre 2 ème demande.

A placer dans votre feuille de style css

Code:


a.infobulle {
  position: relative;
}
a.infobulle span {
  display: none;    /* ceci masque l'infobulle */
}
a.infobulle:hover {
  background: none;    /* correction d'un bug IE */
  z-index: 999;      /* on définit une valeur pour l'ordre d'affichage */
}
a.infobulle:hover span {
  display: inline;    /* ceci affiche l'infobulle */
  position: absolute;
white-space: nowrap;    /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 15px; /* on positionne notre infobulle */
left: -23px;
background: #ebebeb;    /* arrière-plan de l'infobulle */
color: black; /* texte dans l'infobulle */
padding: 5px;
border: 5px dotted black;/* bordures de votre infobulle*/
border-left: 5px dotted black;
}
a.infobulle:hover span{
-moz-border-radius : 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
}

et celui la dans votre page d'accueil

Code:

<table><tr><td><a href="#" class="infobulle">titre
<span><img src=""><br><center><p>texte</p><div><a href="lien" target="_blank"><font color=black>titre lien</a></div></span></a></td><td/><td/><td/><td/><td/>
<td><a href="#" class="infobulle">titre
<span><img src=""><br><center><p>texte</p><div><a href="lien" target="_blank"><font color=black>titre lien</a></div></span></a></td></tr></table>

Je réédite celui que j'ai placé plus haut pour mettre un texte a droite d'une image.

Code:


<img src="votre image" alt="" height="100" width="150" align="left">bla bla bla bla<br>bla bla bla<br>bla bla bla

[Petite-Nikita83]

Merci beaucoup

[Anzu]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif