Mise en place d'une zone de code source
Bonjour à tous,
Je cherche à mettre en place une zone de code source sur ma page.
J'ai donc créé 2 div enfants imbriquées en gauche-droite dans une div parente.
Dans la div de droite, j'ai donc les numéros de ligne et dans la div de droite, le code source.
J'écris ce post pour une question et un problème.
- La question : Comment faire en sorte que le div de gauche reste visible lors du scroll horizontale mais que les numéros de ligne suivent le code source lors du scroll vertical en restant visible a droite (avec le bloc de droite qui passe sous le bloc gauche lors du scroll horizontale).
- Le problème : Je ne veux aucun retour de ligne si celle-ci dépasse le cadre du div : ça pas de problème, j'ai mis un white-space:nowrap; et ça fonctionne très bien sur Firefox. Par contre sur IE dans mon bloc de droite j'ai un bloc de texte, un grand blanc vertical jusqu'à la fin de mon div de gauche et ensuite à droite la suite du code source avec ma grande ligne, suivi du reste du bloc de source.
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
| <style type="text/css">
.textarea {
width:800px;
height:400px;
background-image:url(textareaSeparation.jpg);
background-repeat:repeat-y;
border:1px solid #000;
color:#000;
overflow:auto;
}
.lineNumber{
width:45px;
float:left;
border: 1px solid #00f;
}
.contenuDiv{
margin-left:55px;
white-space:nowrap;
border: 1px solid #f00;
}
</style>
<body>
<div class='textarea'>
<div class='lineNumber'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class='contenuDiv'>
<div>ma première ligne</div>
<div>deuxième ligne</div>
<div>blablablablablablablablablablablblablablablablablaablablabla</div>
<div>Ma ligne 4</div>
<div>Ma ligne 5</div>
</div>
</div>
</body> |
Si vous avez un quelconque élément de réponse à m'apporter, n'hésitez pas...
D'avance merci. Cordialement,
Damien LEVEQUE
