Popup sur plisieurs lignes

Résolu/Fermé
heliconius Messages postés 539 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 - 12 avril 2014 à 01:44
heliconius Messages postés 539 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 - 14 avril 2014 à 00:27
Bonjour,

Quelqu'un aurait-il la solution à un popup sur plusieurs lignes avec la balise acronym ?

<acronym title="ligne 1\nligne 2\nligne 3">?</acronym>

Au lieu de m'afficher 3 lignes comme souhaité, ça m'affiche exactement ce qui est entre quillemets, y compris le retour à la ligne : \n
Comment faire ou alors quelle autre balise permettrait de le faire ?
Merci beaucoup pour votre aide.

4 réponses

Bonjour,

houlà il y a pas mal de confusion...

Qu'est ce que vous appelez un pop up? En français ça s'appellerait une fenêtre surgissant, c'est une nouvelle page qui s'affiche au dessus d'une autre(d'où le pop et le up).

La balise acronym est utilisé(comme son nom l'indique) pour indiquer un acronyme et n'est plus valable en HTML5 comme indiqué dans par les normes du W3C:

http://www.w3schools.com/tags/tag_acronym.asp
A remplacer par abbr donc.

\n pour un saut à la ligne? c'est le cas dans certains langage de programmation (n=new pour new line) mais absolument pas en HTML...

Pour les saut à la ligne en html il faut utiliser la balise <br/>.
Si vous n'arrivez pas à indiquer le texte d'une infobulle comme vous le souhaitez avec acronym(ou plus judicieusement abbr) avec l'attribut title c'est simplement que ce n'est pas fait pour ça.
L'attribut title en HTML:

http://www.w3schools.com/tags/att_global_title.asp

Qui fait apparaître clairement que c'est un élément sémantique(structure du langage, méta informations à et non un élément d'affichage.
A vous de déterminer si vous voulez un élément visuel (donc css)ou un élément structurel sémantique(html) ou les 2 mais n'essayez pas d'utiliser l'un pour l'autre car:
L'affichage ne sera pas correct ni l'information juste.
Cela s'appelle une erreur et il y a de forts risque que ça ne marche pas car non seulement vous ne respectez pas les normes(ce qui n'est pas si grave) mais vous allez dans le sens contraire de celles ci.
.
Vous forcez quelque chose qui n'est pas fait pour et obliger l'utilisateur(son navigateur mais le rendu qui en découle) à s'adapter hors c'est l'inverse qui doit être fait: proposer une utilisation standard et le plus large et ouverte possible.


Pour l'aspect visuel:
https://www.google.fr/search?q=infobulle+css

En mettant le texte abrégé dans la balise abbr bien sûr.

Ou pour faire un pop up(une nouvelle fenêtre de navigation):
https://www.google.fr/search?q=pop+up+javascript
1
Utilisateur anonyme
12 avril 2014 à 08:18
salut, je pense que tu dois créer toi même tes propres infobulle.
0
heliconius Messages postés 539 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 139
13 avril 2014 à 14:48
Merci beaucoup Alko pour cette réponse complète et détaillée. Il y a effectivement eu de ma part mauvaise utilisation des termes convenables.

En fait, il s'agit d'une infobulle. L'objectif est d'aider le visiteur à remplir correctement un formulaire. Derrière chaque champ de saisie, il y aurait soit un point d'interrogation soit une petite image (un i dans un cercle) pour indiquer qu'au clic ou de préférence au survol, une information supplémentaire sera affichée en infobulle.

Certains textes d'aide peuvent être courts ("Saisissez le nom de famille") mais d'autres pourraient être beaucoup plus longs que la largeur de l'écran, d'où l'envie de faire tenir un texte sur plusieurs lignes. Comme tu l'as dit, le \n ne marche pas mais le <br/> non plus. D'où ma question sur ce forum.

Si j'ai bien compris, la balise à utiliser serait abbr et il me resterait à chercher sur le net "infobulle en CSS". C'est bien cela ?
0
heliconius Messages postés 539 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 139
14 avril 2014 à 00:27
Merci c'était effectivement cela. Voilà la solution trouvée :
<style type="text/css">
a.info {
	position:relative;
	z-index:24;
	color:#000000;
	text-decoration:none
}

a.info:hover {
	z-index:25;
	background-color:#FFFFA0;
}

a.info span {
	display:none
} 
 
a.info:hover span {
	display:block;
	position:absolute;
	top:2em; left:2em; width:20em;
	border:1px solid #000000;
	border-radius:5px;
	background-color:#FFFFA0;
	color:#000000;
	text-align:left
	font-weight:none;
	padding:5px;
}
</style>

... etc ...

<tr>
  <td>Adresse mail</td>
  <td><input type="text" name="mail" size="50">
  <a class="info" href="#">
    <img src="img/icone-i_24px.jpg" border="0">
    <span>Indiquez l'adresse mail pour laquelle vous souhaitez
    faire signer la clef publique. S'il y a plusieurs adresses
    mail qui correspondent à celle-ci, mentionnez l'adresse
    mail principale.</span>
  </a>
  </td>
</tr>

... etc ...

Merci donc à tous.
Sujet clos.
0