Liste d'items dont chaque item contient du texte et un lien (texte doit être sur plusieurs lignes) [Résolu]

mko · 12/05/2011, 21h43

Bonsoir

J'ai un problème qui dure déjà et qui me bloque et m'empêche d'avancer.
Je souhaite obtenir une liste d'items contenus dans une division.
Les contraintes sont les suivantes :
- Chaque item doit commencer sur une nouvelle ligne
- Chaque item est constitué du texte et d'un lien hypertexte à la suite du texte.
- La taille de la division contenant les items est connue.
- Lorsque le texte d'un item a une taille supérieure à celle du container d'items, le texte doit automatiquement occuper plusieurs lignes de façon à ne pas déborder le container
- Le contenu des liens hypertextes est le même pour tous : "[..]"

J'ai essayé plusieurs choses. Voici le code que j'ai écris :

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
 
<html>
<head>
<script type="text/javascript">
  function createItems() {
    var provider = [
    {id:'news1',date:'2011-04-25',title:'Nws 1',abstract:'MSE&nbsp;repr&eacute;sent&eacute;e&nbsp;par&nbsp;M.&nbsp;YOMEGNI&nbsp;L&eacute;opold&nbsp;signe&nbsp;un&nbsp;nouveau&nbsp;partenariat&nbsp;avec&nbsp;le&nbsp;leader&nbsp;mondial&nbsp;de&nbsp;l'automatisme',contentTitle:'News 1',content:'<p>MS&nbsp;Engineering&nbsp;repr&eacute;sent&eacute;e&nbsp;par&nbsp;M.&nbsp;YOMEGNI&nbsp;L&eacute;opold&nbsp;signe&nbsp;un&nbsp;nouveau&nbsp;partenariat&nbsp;avec&nbsp;le&nbsp;leader&nbsp;mondial&nbsp;de&nbsp;l'automatisme.<br/>La&nbsp;signature&nbsp;a&nbsp;eu&nbsp;lieu&nbsp;&agrave;&nbsp;l'h&ocirc;tel&nbsp;Hilton&nbsp;de&nbsp;Yaound&eacute;&nbsp;le&nbsp;mercredi&nbsp;20&nbsp;avril&nbsp;2011.&nbsp;news1&nbsp;news1&nbsp;news1&nbsp;news1</p>'},
    {id:'news2',date:'2011-04-25',title:'News 2',abstract:'MSE&nbsp;repr&eacute;sent&eacute;e&nbsp;par&nbsp;M.&nbsp;NJONGUE&nbsp;Appolinaire&nbsp;signe&nbsp;un&nbsp;nouveau&nbsp;partenariat&nbsp;avec&nbsp;le&nbsp;leader&nbsp;mondial&nbsp;de&nbsp;l'automatisme',contentTitle:'News 2',content:'<p>MS&nbsp;Engineering&nbsp;repr&eacute;sent&eacute;e&nbsp;par&nbsp;M.&nbsp;NJONGUE&nbsp;Appolinaire&nbsp;signe&nbsp;un&nbsp;nouveau&nbsp;partenariat&nbsp;avec&nbsp;SereniX&nbsp;Worldwide&nbsp;Solutions.<br/>La&nbsp;signature&nbsp;a&nbsp;eu&nbsp;lieu&nbsp;&agrave;&nbsp;l'h&ocirc;tel&nbsp;Hilton&nbsp;de&nbsp;Yaound&eacute;&nbsp;le&nbsp;mercredi&nbsp;20&nbsp;avril&nbsp;2011.&nbsp;News2&nbsp;news2&nbsp;news2&nbsp;news2</p>'},
    {id:'news3',date:'2011-04-20',title:'News 3',abstract:'MSE&nbsp;repr&eacute;sent&eacute;e&nbsp;par&nbsp;M.&nbsp;YOMEGNI&nbsp;L&eacute;opold&nbsp;signe&nbsp;un&nbsp;nouveau&nbsp;partenariat&nbsp;avec&nbsp;le&nbsp;leader&nbsp;mondial&nbsp;de&nbsp;l'automatisme',contentTitle:'News 3',content:'<p>MS&nbsp;Engineering&nbsp;repr&eacute;sent&eacute;e&nbsp;par&nbsp;M.&nbsp;YOMEGNI&nbsp;L&eacute;opold&nbsp;signe&nbsp;un&nbsp;nouveau&nbsp;partenariat&nbsp;avec&nbsp;le&nbsp;leader&nbsp;mondial&nbsp;de&nbsp;l'automatisme.<br/>La&nbsp;signature&nbsp;a&nbsp;eu&nbsp;lieu&nbsp;&agrave;&nbsp;l'h&ocirc;tel&nbsp;Hilton&nbsp;de&nbsp;Yaound&eacute;&nbsp;le&nbsp;mercredi&nbsp;20&nbsp;avril&nbsp;2011.<br/>News3&nbsp;news3&nbsp;news3&nbsp;news3</p>'},
    {id:'news4',date:'2011-04-25',title:'News 4',abstract:'MSE&nbsp;repr&eacute;sent&eacute;e&nbsp;par&nbsp;M.&nbsp;NJONGUE&nbsp;Appolinaire&nbsp;signe&nbsp;un&nbsp;nouveau&nbsp;partenariat&nbsp;avec&nbsp;le&nbsp;leader&nbsp;mondial&nbsp;de&nbsp;l'automatisme',contentTitle:'News 4',content:'<p>MS&nbsp;Engineering&nbsp;repr&eacute;sent&eacute;e&nbsp;par&nbsp;M.&nbsp;NJONGUE&nbsp;Appolinaire&nbsp;signe&nbsp;un&nbsp;nouveau&nbsp;partenariat&nbsp;avec&nbsp;SereniX&nbsp;Worldwide&nbsp;Solutions.<br/>La&nbsp;signature&nbsp;a&nbsp;eu&nbsp;lieu&nbsp;&agrave;&nbsp;l'h&ocirc;tel&nbsp;Hilton&nbsp;de&nbsp;Yaound&eacute;&nbsp;le&nbsp;mercredi&nbsp;20&nbsp;avril&nbsp;2011.<br/>News4&nbsp;news4&nbsp;news4&nbsp;news4</p>'},
    {id:'news5',date:'2011-04-25',title:'News 5',abstract:'MSE&nbsp;repr&eacute;sent&eacute;e&nbsp;par&nbsp;M.&nbsp;YOMEGNI&nbsp;L&eacute;opold&nbsp;signe&nbsp;un&nbsp;nouveau&nbsp;partenariat&nbsp;avec&nbsp;le&nbsp;leader&nbsp;mondial&nbsp;de&nbsp;l'automatisme',contentTitle:'News 5',content:'<p>MS&nbsp;Engineering&nbsp;repr&eacute;sent&eacute;e&nbsp;par&nbsp;M.&nbsp;YOMEGNI&nbsp;L&eacute;opold&nbsp;signe&nbsp;un&nbsp;nouveau&nbsp;partenariat&nbsp;avec&nbsp;le&nbsp;leader&nbsp;mondial&nbsp;de&nbsp;l'automatisme.<br/>La&nbsp;signature&nbsp;a&nbsp;eu&nbsp;lieu&nbsp;&agrave;&nbsp;l'h&ocirc;tel&nbsp;Hilton&nbsp;de&nbsp;Yaound&eacute;&nbsp;le&nbsp;mercredi&nbsp;20&nbsp;avril&nbsp;2011.<br/>News5&nbsp;news5&nbsp;news5&nbsp;news5</p>'},
    {id:'news6',date:'2011-04-25',title:'news 6',abstract:'MSE&nbsp;repr&eacute;sent&eacute;e&nbsp;par&nbsp;M.&nbsp;NJONGUE&nbsp;Appolinaire&nbsp;signe&nbsp;un&nbsp;nouveau&nbsp;partenariat&nbsp;avec&nbsp;le&nbsp;leader&nbsp;mondial&nbsp;de&nbsp;l'automatisme',contentTitle:'News 6',content:'<p>MS&nbsp;Engineering&nbsp;repr&eacute;sent&eacute;e&nbsp;par&nbsp;M.&nbsp;NJONGUE&nbsp;Appolinaire&nbsp;signe&nbsp;un&nbsp;nouveau&nbsp;partenariat&nbsp;avec&nbsp;SereniX&nbsp;Worldwide&nbsp;Solutions.<br/>La&nbsp;signature&nbsp;a&nbsp;eu&nbsp;lieu&nbsp;&agrave;&nbsp;l'h&ocirc;tel&nbsp;Hilton&nbsp;de&nbsp;Yaound&eacute;&nbsp;le&nbsp;mercredi&nbsp;20&nbsp;avril&nbsp;2011.</p>'}
    ];
    var elt = document.createElement('div');
    elt.style.width="205px";
    var item;
    for (var i=0;i<provider.length;i++) {
      item = document.createElement('div');
      item.style.width="205px";
      item.style.margin=0+"px";
      item.style.padding=0+"px";
      item.id = provider[i].id;
      item.innerHTML = provider[i].abstract;
      var a = document.createElement('a');
      a.href = "#";
      this.readNewsText = "[...]";
      a.innerHTML = this.readNewsText;
      item.appendChild(a);
      elt.appendChild(item);
    }
    document.body.appendChild(elt);
  }
</script>
</head>
<body>
<script type="text/javascript">createItems();</script>
</body>
</html>

Chaque item reste sur une ligne alors que le texte est assez long.

Je ne parviens pas à le faire et souhaiterais votre aide.

Merci d'avance

NoSmoking · 12/05/2011, 22h36

Bonsoir,
le premier soucis que je vois est le non échappement des quotes dans tes chaines, il n'est pour s'en convaincre de regarder la coloration syntaxique de ton code.

Code :

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

1
2
3
4
5
{ id:'news1',
  date : '2011-04-25',
  title : 'Nws 1',
  abstract : 'Attention &agrave; l\'affichage des quotes'
}

Bovino · 12/05/2011, 22h39

Citation:

Chaque item reste sur une ligne alors que le texte est assez long.

A priori, tu ne connais pas la signification de  .
Il s'agit d'un espace insécable, donc qui n'autorise pas les retours chariots. Change-les en espaces normaux et ton texte sera affiché normalement.

mko · 13/05/2011, 10h54

Merci pour vos réponses.
Merci Bovino mais je souhaiterais avoir plus de détail sur l'utilisation de   et de la conversion d'un texte en texte html pour éviter les problèmes d'accents.

Merci Bovino tu m'as sauvé !!!!!!

13/05/2011, 10h54	#4
mko Invité de passage Inscription : juillet 2005 Messages : 5 Détails du profil Informations forums : Inscription : juillet 2005 Messages : 5 Points : 2 Points : 2	Merci pour vos réponses. Merci Bovino mais je souhaiterais avoir plus de détail sur l'utilisation de   et de la conversion d'un texte en texte html pour éviter les problèmes d'accents. Merci Bovino tu m'as sauvé !!!!!!
	00

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