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
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
A voir également:
- Popup sur plisieurs lignes
- Comment aller à la ligne sur excel - Guide
- Excel trier par ordre alphabétique en gardant les lignes - Guide
- Comment se mettre hors ligne sur instagram - Guide
- Firefox autoriser popup - Guide
- Afficher toutes les lignes masquées excel ✓ - Forum Excel
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
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
Utilisateur anonyme
12 avril 2014 à 08:18
12 avril 2014 à 08:18
salut, je pense que tu dois créer toi même tes propres infobulle.
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
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 ?
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 ?
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
14 avril 2014 à 00:27
Merci c'était effectivement cela. Voilà la solution trouvée :
... etc ...
... etc ...
Merci donc à tous.
Sujet clos.
<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.
