insérer un retour à la ligne dans un titre de colonne [Fait]

**sanach** · 28/11/2008, 15h43

Bonjour
j'ai un tableau dans le quel j'insere des données de gde taille, donc je suis obligé de reduire la taille du texte et le faire en tant que title de la colonne.sauf que le title m'est affiché comme étant une ligne trop longue. comment je peux insérer un retour à la ligne dans ce texte, sachant que j'ai essayé d'insérer des balises <br> mais elle sont affichées comme un texte
Merci de m'evoyé une reponse rapidement j'ai besoin de le faire mnt avant 17h.
Merci

**Erwan31** · 28/11/2008, 19h22

Ah ben trop tard...

Mais sinon on ne peut pas insérer de balises dans l'élément title.

**Deallyra** · 28/11/2008, 23h05

Et sans code, ça va être difficile de débugger

**sanach** · 29/11/2008, 09h34

ben j'ai trouvé une solution avec IE qu'i est l'insertion de \n dans le teste du title...mais avec FireFox rien ne marche avec moi
qui pourrait me donner une solution pour les deux navigateur?
Merci

**Auteur** · 29/11/2008, 14h23

http://r-hunel.developpez.com/tutoriels/css/info-bulle/

**Deallyra** · 29/11/2008, 15h09

Tu veux dire afficher le début du titre normalement et le reste dans ton info-bulle Auteur?

**Auteur** · 29/11/2008, 18h06

Envoyé par Deallyra

Tu veux dire afficher le début du titre normalement et le reste dans ton info-bulle Auteur?

bien j'avoue ne pas avoir bien compris le problème et ce que souhaite Sanach

Visiblement Sanach voudrait afficher une infobulle en survolant les titres des colonnes de son tableau, donc je me suis dit que Sanach pouvait appliquer le tutoriel.

Un exemple fait à la va-vite (j'ai copier-coller le code du tutoriel) :

Code :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<style type="text/css">
<!--
a.info_bulle span
{                                                                  
  display          : none; /* Rend invisible tout notre bloc span */
} 
 
a.info_bulle
{                               
  color           : #2F368A;
  
  text-decoration : none; 
  
  padding         : 2px 16px 2px 2px; /*Définition des marges intérieures de notre lien */
  
  /* Définition de l'arrière plan de notre lien */
  background      : transparent url('comment.gif') no-repeat right center;
  
  position        : relative; /* Indispensable pour le bon positionnement de l'info-bulle */ 
}  
 
a.info_bulle:hover 
{
  border          : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
} 
 
a.info_bulle:hover span
{                               
  display        :  block;    /* Rend visible notre bloc span */
  position       :  absolute; /* Sort notre bloc de son conteneur afin de le positionner */
  
  background     : #DDEEFF;   /* Définition du fond, sinon on a le même que notre lien */
  border         : 1px solid #6699FF; /* Définition des bordures */
  
  padding        : 6px;       /* Définition des marges intérieures */   
  font-size      : 12px;
  
  width          : 180px;     /* On fixe une largeur par défaut */
  
  color          : #000;      /* Réinitialisation de la couleur du texte */
  
  text-align     : justify;   /* Justification du texte */      
  
  cursor         : default;   /* Réinitialisation de notre curseur, sinon par défaut on a le même que notre lien */
  
  /* Positionnement de notre info-bulle */
  top            : 1.8em;     
  left           : 1px;
  
  z-index        : 1000; /* Positionne au premier plan l'info-bulle en cas de chevauchement */
}            
 
-->
</style>
 
 
</head>
 
<body>
 
<table border="1">
  <tr style="background-color: #AAAAAA">
  <td>
    <a class="info_bulle" href="#" onclick="return false">
      titre du tableau 1
      <span>
        ici on affiche plus de détails sur cette colonne du tableau 
      </span>
    </a>    
  </td>
  <td>
    <a class="info_bulle" href="#" onclick="return false">
      titre du tableau 2
      <span>
        bla bla bla bla bla bla bla bla bla bla 
        bla bla bla bla bla
      </span>
    </a>    
  </td>
  </tr>
  <tr>
    <td>
      donnée 1
    </td>
    <td>
      donnée 2
    </td>
  </tr>
 </table>
</body>
 
</html>

**Deallyra** · 29/11/2008, 18h25

De ce que j'ai comprit, il souhaite que l'on fasse un renvoi à la ligne si le titre est plus grand que la case dans lequel il se trouve.

Maintenant, avec ta solution, il aura son titre tronqué mais s'il va sur le texte il l'aura complet.

Cela dépend des titres en questions mais ça me parait un bon compromis.

**Erwan31** · 29/11/2008, 18h31

Salut Auteur,
oui en effet si ce n'est que pour afficher un titre et que l'info est importante, il est AMHA préférable de se tourner vers une info bulle CSS, d'une part parce que celle-ci s'affiche instantanément contrairement au title et d'autre part parce que l'affichage du title en accès clavier implique de devoir passer par JS
alors que ça peut être facilement résolu si on couple le :hover de la pseudo-classe :focus.

**sanach** · 01/12/2008, 10h28

Merci beaucoup pour vos reponses mais j'ai pas encore le retour à la ligne dans mon info bulle...
qu'est ce que je dois insérer entre les caractère pour l'obtenir, dans firefox et dans IE: \n,&#10, &#13, j'ai essayé ça et ça n'a pas marché

**Erwan31** · 01/12/2008, 11h13

Envoyé par sanach

Merci beaucoup pour vos reponses mais j'ai pas encore le retour à la ligne dans mon info bulle...
qu'est ce que je dois insérer entre les caractère pour l'obtenir, dans firefox et dans IE: \n,
,
, j'ai essayé ça et ça n'a pas marché

Sans la totalité du code et sans savoir ce que tu souhaites faire (ton énoncé de départ n'est pas clair du tout), impossible de te conseiller de manière précise.
A priori il vaut mieux que tu oublies le title...

**sanach** · 01/12/2008, 12h27

Merci bien tout le monde...
j'ai utiliser une info bulle et j'ai inserer entre les caractère un <br>, ça la'accepte et ça me fait des retour à la ligne dans l'infobulle.
Merci

insérer un retour à la ligne dans un titre de colonne [Fait]

HTML

Discussions similaires

Partager

Partager