Mise en place d'une zone de code source

**d.w.d** · 13/11/2012, 08h58

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 :

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
<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

**d.w.d** · 13/11/2012, 14h57

Bon, alors finalement j'ai réussi a trouver la solution tout seul. Il suffit en faite de mettre un position absolute sur lineNumber mais pour que le positionnement ne sorte pas du cadre textarea, il ne faut pas oublier de mettre un position relative sur cette dernière class. De cette facon les DIVs de gauche et de droite pourront se superposer.

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
<style type="text/css">
	.textarea {
		width:750px;
		height:400px;
		position: relative;
		border:1px solid #000;
		color:#000;
		overflow:auto;
	}
	.lineNumber{
		background-image:url(textareaSeparation.jpg);
		background-repeat:repeat-y;
		width:45px;
		padding-left:3px;
		position:absolute;
		float:left;
		z-index:20;
	}
	.contenuDiv{
		margin-left:45px;
		padding-left:5px;
		white-space:nowrap;
		z-index:10;
	}
</style>

Ensuite, pour fixer mon div de gauche à gauche lors du scroll horizontal, j'ai trouvé une astuce visant à utiliser du javascript.

Cela consiste à déplacer mon div lineNumber lors de l'utilisation du scroll sur textarea. Pour ce faire j'appelle une fonction sur l'action onscroll de mon div textarea. La fonction en question :

Code :

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

1
2
3
4
function moveDIVlineNumber(obj,IDlineNumer)
{
	document.getElementById(IDlineNumer).style.marginLeft=obj.scrollLeft+"px";
}

De cette façon le rendu est impeccable et contre tout attente le bug que j'avais sur IE est résolu.

Mise en place d'une zone de code source

CSS

Vue hybride

Discussions similaires

Partager

Partager