Title sur plusieurs lignes [Résolu]

joreveur · 09/07/2011, 22h12

Bonjour
sous IE7 j'arrive à avoir des retours à la ligne dans les title
cela ne marche pas sous FF
comment peut-on faire pour que cela fonctionne ?
voici le code qui fonctionne sous IE7

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title>essai</title>
</head>
<body>
<h3>Essai de title avec retour ligne</h3>
<a href="http://www.developpez.net" title="un site
super bien">developpez.com un site sympa</a>
</body>
</html>

merci

NoSmoking · 09/07/2011, 22h21

Bonsoir,
les éléments Hx sont des éléments de type block, il te suffit de mettre un <br> pour aller à la ligne.

joreveur · 09/07/2011, 22h24

Bonsoir,

je parle des retours ligne (les info bulles... ) dans les title des liens ligne 7
actuellement j'arrive à le faire avec un & # 1 3 ; sous IE

NoSmoking · 09/07/2011, 22h34

excuses je n'avais pas compris, ce n'est effectivement pas prévu.
Tu peux ruser en faisant cela en pur CSS.

joreveur · 09/07/2011, 22h41

c'est moi qui m'étais mal expliqué...
et en ccs tu as le code qui pourrait aller pour tous les navigateurs ?

merci d'avance

NoSmoking · 09/07/2011, 22h51

un exemple complet

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Bulle CSS]</title>
<meta name="Author" content="NoSmoking">
 
<style type="text/css">
* {
  font-family : Verdana;
}
h1 {
  color : #4488bb;
  font-size : 1.3em;
  border : 1px solid #c0c0c0;
  padding : 10px;
}
span.bulle {
  position : relative;
  border-bottom : 1px dotted #fa8;
}
span.bulle span {
  display : none;
  border : 1px solid #fa8;
  background-color : #ffb;
  color : #000;
  text-decoration : none;
  white-space : nowrap;
}
span.bulle:hover span {
  position : absolute;
  top : 18px;
  left : 20px;
  padding : 5px;
  display : block;
}
</style>
</head>
<body>
<h1>CSS Info bulle...</h1>
<p><a href="http://www.developpez.net" title="Pour tout savoir sur...">Visitez le site developpez.net</a></p>
<p>Antequam in <span class="bulle">provincia<span>Bulle</span></span> toto fuerit pervenire denique provincia <span class="bulle">nascetur<span>Autre <b>B</b>ulle<br>sur 2 lignes</span></span> antequam.</p>
<p>Coalito dignitates ordinarias<span class="bulle"> coalito Rufinus annonae<span> ad in est et praefectus Rufinus</span></span> convectio enim tempestate.</p>
<p><a href="http://www.developpez.net">Visitez le site <span class="bulle">developpez.net <span><img src="http://aka-cdn-ns.adtech.de/apps/36/Ad2881060St3Sz1Sq5149476V0Id3/developpez-728-2.gif" alt=""></span></span></a></p>
</body>
</html>

je reste dispo pour explication.

joreveur · 09/07/2011, 23h17

Merci ça fonctionne bien et l'image est super bien affichée et sans javascript

mais je ne vois pas l'exemple d'un info-bulle sur plusieurs lignes... ce n'est pas possible ?

merci

NoSmoking · 09/07/2011, 23h36

sur cette ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span class="bulle">nascetur<span>Autre <b>B</b>ulle<br>sur 2 lignes</span></span>

voir image

joreveur · 10/07/2011, 13h02

bonjour et merci de ces exemples

j'ai essayé d"adapter mais je me heurte à un problème de transparence.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p>
<a href="http://www.google.fr"> <span class="bulle">Google <span> ceci est un info-bulle<br/> qui s'affichera sur 3<br/>lignes au passage de la souris</span></span></a>
</p>

où règle t-on cela ?

merci ...

NoSmoking · 11/07/2011, 18h54

j'ai effectivement oublié, pour ton besoin cette partie de CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
span.bulle:hover {
  z-index : 100;
}

sachant que ce que tu essaies de faire devient à mes yeux une erreur, le texte contenu dans l'attribut tittle se devant d'être court et ne pas porter une information capitale à la compréhension du document, mais une information supplémentaire à l'élément survolé.

PS :
- tu peux d'une façon générale remplacer les class sur les SPAN par des class sur des A.
- "bug" connu, sur Safari et Chrome, sur les balises A si tu mets en oeuvre cette technique et que tu n'a pas au préalable mis un text-decoration:none, le contenu apparaîtra souligné, berk!
- sur les balises A, un click sur "l'infobulle" déclenchera le lien.

joreveur · 11/07/2011, 21h59

merci des infos car le css, je ne connais pas vraiment.

je viens d'essayer sous Seamonkey 2.2 et Firefox 5 et 7 (Aurora) et ça fonctionne bien.

par curiosité sur Dillo 2.2 alors là tout reste affiché... (mais ce n'est pas fait pour...) question annexe pour les navigateurs non compatibles peut-on désactiver CCS ? mais pas par javascript qui lui n'est pas supporté...)

concernant l'erreur que je compte faire... (en fait je pousse un peu le bouchon) c'est pour savoir jusqu’où on peut aller et je pense que 2 lignes sur une info-bulle, c'est déjà bien) en fait on m'a posé la question et j'avais répondu que CR-LF codé en html ça devait marcher d'où le & #13 (le & #20 ne sert à rien) et ça marchait en IE7 !

le problème en html, javascript, ccs c'est la compatibilité entre les différents navigateurs voire même d'une version à l'autre de la même famille.

voila encore merci, j'aurais appris plein de choses et notamment la puissance de ccs qui pour moi se résumait encore à de la déco..

NoSmoking · 11/07/2011, 22h17

Citation:

Envoyé par joreveur

question annexe pour les navigateurs non compatibles peut-on désactiver CCS ?

Pour FireFox -> Affichage / Style de la page / Pas de style, donc je présume que les autres possèdent également ce genre de fonctionnalité, mais cela reste un acte propriétaire de l'internaute.

Citation:

Envoyé par joreveur

voila encore merci, j'aurais appris plein de choses et notamment la puissance de ccs qui pour moi se résumait encore à de la déco..

attend de voir les capacités du CSS3

joreveur · 11/07/2011, 22h20

Citation:

Envoyé par NoSmoking

attend de voir les capacités du CSS3

je pense que je n'ai rien vu alors

bonne continuation et merci

09/07/2011, 22h21	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 774 Points : 4 774	Bonsoir, les éléments Hx sont des éléments de type block, il te suffit de mettre un <br> pour aller à la ligne.
	01

09/07/2011, 22h24	#3
joreveur Membre habitué Développeur informatique Inscription : janvier 2010 Messages : 142 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : Finance Informations forums : Inscription : janvier 2010 Messages : 142 Points : 127 Points : 127	Bonsoir, je parle des retours ligne (les info bulles... ) dans les title des liens ligne 7 actuellement j'arrive à le faire avec un & # 1 3 ; sous IE
	00

09/07/2011, 22h34	#4
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 774 Points : 4 774	excuses je n'avais pas compris, ce n'est effectivement pas prévu. Tu peux ruser en faisant cela en pur CSS.
	00

09/07/2011, 22h41	#5
joreveur Membre habitué Développeur informatique Inscription : janvier 2010 Messages : 142 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : Finance Informations forums : Inscription : janvier 2010 Messages : 142 Points : 127 Points : 127	c'est moi qui m'étais mal expliqué... et en ccs tu as le code qui pourrait aller pour tous les navigateurs ? merci d'avance
	00

09/07/2011, 23h17	#7
joreveur Membre habitué Développeur informatique Inscription : janvier 2010 Messages : 142 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : Finance Informations forums : Inscription : janvier 2010 Messages : 142 Points : 127 Points : 127	Merci ça fonctionne bien et l'image est super bien affichée et sans javascript mais je ne vois pas l'exemple d'un info-bulle sur plusieurs lignes... ce n'est pas possible ? merci
	00

11/07/2011, 21h59	#11
joreveur Membre habitué Développeur informatique Inscription : janvier 2010 Messages : 142 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : Finance Informations forums : Inscription : janvier 2010 Messages : 142 Points : 127 Points : 127	merci des infos car le css, je ne connais pas vraiment. je viens d'essayer sous Seamonkey 2.2 et Firefox 5 et 7 (Aurora) et ça fonctionne bien. par curiosité sur Dillo 2.2 alors là tout reste affiché... (mais ce n'est pas fait pour...) question annexe pour les navigateurs non compatibles peut-on désactiver CCS ? mais pas par javascript qui lui n'est pas supporté...) concernant l'erreur que je compte faire... (en fait je pousse un peu le bouchon) c'est pour savoir jusqu’où on peut aller et je pense que 2 lignes sur une info-bulle, c'est déjà bien) en fait on m'a posé la question et j'avais répondu que CR-LF codé en html ça devait marcher d'où le & #13 (le & #20 ne sert à rien) et ça marchait en IE7 ! le problème en html, javascript, ccs c'est la compatibilité entre les différents navigateurs voire même d'une version à l'autre de la même famille. voila encore merci, j'aurais appris plein de choses et notamment la puissance de ccs qui pour moi se résumait encore à de la déco..
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email