Title sur plusieurs lignes

Version imprimable

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:

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

09/07/2011, 22h21
NoSmoking

Bonsoir,
les éléments Hx sont des éléments de type block, il te suffit de mettre un   pour aller à la ligne.
09/07/2011, 22h24
joreveur

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
09/07/2011, 22h34
NoSmoking

excuses je n'avais pas compris, ce n'est effectivement pas prévu.
Tu peux ruser en faisant cela en pur CSS.
09/07/2011, 22h41
joreveur

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

un exemple complet

Code:

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.

09/07/2011, 23h17
joreveur

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
09/07/2011, 23h36
NoSmoking

1 pièce(s) jointe(s)

sur cette ligne

Code:

nasceturAutre Bulle sur 2 lignes

voir image
10/07/2011, 13h02
joreveur
bonjour et merci de ces exemples

j'ai essayé d"adapter mais je me heurte à un problème de transparence.
http://jopervasco.free.fr/images/ccs_info_bulle.png
Code:

1 2 3 <a href="http://www.google.fr"> Google ceci est un info-bulle qui s'affichera sur 3 lignes au passage de la souris</a> 
où règle t-on cela ?

merci ...
11/07/2011, 18h54
NoSmoking
j'ai effectivement oublié, pour ton besoin cette partie de CSS
Code:

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.
11/07/2011, 21h59
joreveur

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..
11/07/2011, 22h17
NoSmoking

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
11/07/2011, 22h20
joreveur

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