Discussion :

[gueud]

Bonjour,
Je viens de mettre en place un annuaire d'anciens élèves et je rencontre un problème. Lorsque j'ouvre les fiches des élèves, certains noms sont trop grands et du coup l'image dépasse sur la deuxième ligne. Voir image ci dessous :



Par exemple pour un petit nom et un petit prénom, l'image orange ne va pas jusqu'au bout de la fenêtre et vice versa si le nom prénom est trop grand cela dépasse.

Voilà comment s'affiche le titre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
    $database->setQuery( "SELECT * FROM ...);
    $rows = $database->loadObjectList();
    foreach($rows as $row1) {
      echo "<span class='componentheading'>";
 
      # Titre
 
      echo "<font size='3'>$row1->name&nbsp;$row1->position</font>";
 
      echo "</span><br />";

Voilà le Css qui gère l'entete :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.componentheading {
    text-align: left;
    padding-right:490px;
    height:20px;
    color: #ffffff;
    padding-left:10px;
    font-size: 18px;
    line-height:15px;
    background-image:url(../images/entete_contenu.png);
    background-repeat:repeat-x;
    background-position:bottom left;
    padding-bottom:-5px !important;
    padding-bottom:0px;

En jouant sur le padding right, on arrive à augmenter ou pas la longueur de l'image orange, mais selon la taille du titre, l'image est plus ou moins grande en largeur.

J'ai déjà essayé en utilisant <NOBR>, le problème est que cela aggrandi la largeur du template et un scroller horizontal apparait ..
Comment faut il faire pour que l'image s'adapte en fonction de la longueur du titre ?

Merci d'avance

[san1981]

As-tu créé une image de 1px de largeur?

Le plus simple est de créer donc une image d'un pixel de largeur et de faire un repeat-x en utilisant une balise "p" par exemple au lieu de "span"; normalement l'image s'arrêtera automatiquement à la fin du nom selon les paddings et margins définis.

[gueud]

Parfait ca fonctionne. Merci beaucoup !