Je travaille sur un éditeur de code en javascript qui doit disposer d'une colonne à gauche indiquant le numéo de ligne.
Pour des raisons un peu longue à expliquer, voici la solution retenue :
Le résultat peut être consulté ici : http://www.lrbabe.com/upload
Plusieurs problèmes se posent :
- Sous IE6/7, les numéros de lignes ne s'affichent tout simplement pas !
- Pour garder un alignement constant des numéros avec les lignes de code, j'ai été obligé de mettre la liste ordonnée et le code dans un <pre>. Or Firefox et Opera "sautent une ligne" entre chaque numéro (d'où les <br/> à la fin de chaque ligne de code), alors que IE6/7 ne le font pas visiblement (si on enlève le float:left). Sur ce coup là je préfère le comportement de IE, même si ça ne doit pas être lui qui est valide. Je cherche donc un solution pour conserver cet alignement, soit en réduisant l'espace entre les numéros (mais je n'y arrive pas), soit en supprimant la balise <pre> et en simulant son comportement (mais je n'y arrive pas non plus, c'est jamais aligné sous tous les navigateurs, et ça ne le reste jamais si l'utilisateur redimensionne les polices).
Merci d'avance.
Modifié par lrbabe (27 May 2007 - 17:31)
Pour des raisons un peu longue à expliquer, voici la solution retenue :
<html>
<head>
<style>
.zob {
float:left;
background-color:#DDDDDD;
border-right:1px ridge;
}
</style>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/>
<pre>
<ol class="zob">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ol>
<code>
some text<br>
on many lines<br>
lorem<br>
ipsum<br>
whatever<br>
</code>
</pre>
</body>
</html>
Le résultat peut être consulté ici : http://www.lrbabe.com/upload
Plusieurs problèmes se posent :
- Sous IE6/7, les numéros de lignes ne s'affichent tout simplement pas !
- Pour garder un alignement constant des numéros avec les lignes de code, j'ai été obligé de mettre la liste ordonnée et le code dans un <pre>. Or Firefox et Opera "sautent une ligne" entre chaque numéro (d'où les <br/> à la fin de chaque ligne de code), alors que IE6/7 ne le font pas visiblement (si on enlève le float:left). Sur ce coup là je préfère le comportement de IE, même si ça ne doit pas être lui qui est valide. Je cherche donc un solution pour conserver cet alignement, soit en réduisant l'espace entre les numéros (mais je n'y arrive pas), soit en supprimant la balise <pre> et en simulant son comportement (mais je n'y arrive pas non plus, c'est jamais aligné sous tous les navigateurs, et ça ne le reste jamais si l'utilisateur redimensionne les polices).
Merci d'avance.
Modifié par lrbabe (27 May 2007 - 17:31)