28172 sujets

CSS et mise en forme, CSS3

[Résolu] 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.

<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
Modifié par damienDWD (12 Nov 2012 - 09:47)
Je n'ai pas de solution toute faite mais je pense avoir une piste en modifiant ton CSS :


<style type="text/css">
	.textarea {
                position:relative;
		width:800px;
		height:400px;
		background-image:url(textareaSeparation.jpg);
		background-repeat:repeat-y;
		border:1px solid #000;
		color:#000;
		overflow:auto;
	}
	.lineNumber{
                position:absolute;
		width:45px;
		top:0;
                left:0;
		border: 1px solid #00f;
	}
	.contenuDiv{
		margin-left:55px;
		white-space:nowrap;
		border: 1px solid #f00;
                overflow:overflow-x;
                width:900px;
	}
</style>


Par contre tu ne devrais pas englober chaque ligne par des <div>. Regarde du côté de la balise <code> qui doit être plus appropriée (sémantique, style défini..)
Modifié par Javert67 (12 Nov 2012 - 14:44)
Salut Javert et merci pour ta suggestion.

J'y avais bien pensé, malheureusement si je met position en absolute et que je positionne ma div, je me retrouve avec tous mes DIV lineNumber de toute mes zones textarea aux coordonnées 0,0 de ma page et non de ma DIV.
Pour ce qui est de fixer mon div de gauche à gauche lors du scroll, j'ai trouver 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 :
function moveDIVlineNumber(obj,IDlineNumer)
{
	document.getElementById(IDlineNumer).style.marginLeft=obj.scrollLeft+"px";
}


Le soucis c'est que le DIV lineNumber ne se superpose pas à contenuDiv, ce qui est normal...
Auriez-vous une piste pour résoudre ce problème ?
Bon, alors finalement j'ai réussi a trouver la solution tout seul pour la première partie de mon post. Il suffit en effet de mettre un position absolute sur lineNumber mais pour que le positionnement ne sorte pas du cadre textarea, il fallait mettre une position relative sur cette dernière class.
<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>


J'ai conservé le bout de code javascript présent au dessus et comme çà le rendu est impeccable.
Je viens de refaire des tests sur IE et les dernières modifications ont réglé le bug que j'avais concernant le blanc entre 2 bloc de texte dans mon div de droite.
Sujet clos
Aller à