Placement de texte avec image !

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Placement de texte avec image !

Message par Petite-Nikita83 le Dim 2 Jan 2011 - 13:42

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 ? Smile

Merci d'avance Smile


Dernière édition par Petite-Nikita83 le Mar 4 Jan 2011 - 16:39, édité 1 fois

Petite-Nikita83
*

Féminin
Messages : 35
Inscrit(e) le : 04/12/2009

http://v-diaries.forums-actifs.net
Petite-Nikita83 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placement de texte avec image !

Message par Automne le Lun 3 Jan 2011 - 10:28

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

Automne
+ Hyperactif +

Messages : 8423
Inscrit(e) le : 22/03/2010

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placement de texte avec image !

Message par no_way le Lun 3 Jan 2011 - 11:22

Bonjour
@Automne Wink
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>


Dernière édition par no_way le Lun 3 Jan 2011 - 12:05, édité 2 fois (Raison : Grammaire)

no_way
Aidactif
Aidactif

Messages : 1779
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placement de texte avec image !

Message par tupac le Mar 4 Jan 2011 - 6:08

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

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placement de texte avec image !

Message par no_way le Mar 4 Jan 2011 - 9:51

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

no_way
Aidactif
Aidactif

Messages : 1779
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placement de texte avec image !

Message par tupac le Mar 4 Jan 2011 - 10:16

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

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placement de texte avec image !

Message par Petite-Nikita83 le Mar 4 Jan 2011 - 16:13

Merci beaucoup Very Happy

Petite-Nikita83
*

Féminin
Messages : 35
Inscrit(e) le : 04/12/2009

http://v-diaries.forums-actifs.net
Petite-Nikita83 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placement de texte avec image !

Message par Anzu le Mar 4 Jan 2011 - 16:18

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 résolu
  • 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 Smile

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum