Script conteneur corpus spécial

Version imprimable

06/04/2011, 18h06
templari

Script conteneur corpus spécial

Bonjour, je recherche une ébauche de script pour un conteneur de corpus.

C'est pas très clair ? C'est normal ! Je ne sais pas comment appeler ça !

En fait, je souhaiterai que lorsque j'appuie sur un des boutons de mon menu, le corpus qui se charge ait un effet en javascript.

Effet souhaité :

Une "fenêtre" si j'puis dire, enfin, un contenant quoi (là où sera situé le texte et les images du corpus), qui s'ouvre "depuis le milieu et s'expand (le mot n'est pas français mais on se comprend ;) ) aux 4 extrémités avec un effet de "zoom", qui grossit en l'espace de 0.3 / 0.5 secondes environ. Le tout avec des bordures en état "solid" de 0.5% de couleur bleues, et avec des bords arrondis. Le fond de cette "fenêtre", de ce contenant plutôt, est quant à lui blanc avec un effet d'opacité à 75 ou 80% (mon background étant noir). La largeur et hauteur du "contenant" doit être en %, disons 90% de large et la hauteur environ 60%. Il doit y avoir un ascenseur léger sur la droite, curseur vertical blanc qui s'adapte en fonction du contenu. Le padding est d'environ 3% sur les 4 côtés.

Si vous avez une ébauche de script... ou tout du moins un "nom" ! Pour que je puisse faire quelques recherches, parce-que je ne vois pas vraiment comment appeler cela donc il est difficile de trouver une ébauche de script sur google !

En vous remerciant.
06/04/2011, 19h51
nadox

Bonjour,
Ça ressemble à un LIGHTBOX. ;)
06/04/2011, 21h11
templari

Non. Lightbox c'est un "pop-up" si j'puis dire, avec un bouton "close" ET surtout la fenêtre est affichée en premier plan ce qui fait que l'on ne peut pas cliquer ailleurs sur la page ! Ce que je ne veux absolument pas !

Non en fait, ce que je veux, c'est un corpus avant tout ! C'est juste un corpus qui se génère d'une façon spéciale.
06/04/2011, 21h55
RomainVALERI

Alors plutot une sorte de ToolTip avec un effet graphique à l'ouverture, en somme... :?
06/04/2011, 22h43
templari

Voilà, c'est ça ! Enfin, c'est plus proche de la réalité quoi ;) Parce-que sur la démo, le petit carré gris, bon...

C'est quoi tool tip ?

Et sachant donc qu'à l'intérieur il doit y avoir du texte (et des images), scrollable...

Faisable ?

("Les laveurs de carreaux chopent le nouveau-né." :mouarf: )

Oui faisable, on peut mettre ce qu'on veut dans la div. :ccool:

Petit exemple testable en ligne :
http://www.tutorialspoint.com/cgi-bi...riptaculous_42

avec ce code

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
 
<html>
<head>
<title>script.aculo.us examples</title>
 
   <script type="text/javascript" 
   src="/javascript/prototype.js"></script>
   <script type="text/javascript" 
   src="/javascript/scriptaculous.js?load=effects"></script>
   <script type="text/javascript">
 
   function GrowEffect(element){
       new Effect.Grow(element, {duration:3,from:1.0,to:1.0});
   }
 
   </script>
</head>
<body>
<div style="width:500px; height:250px;border:1px solid red;">
<div id="grow_demo" style="display:none; width:500px; height:250px; background:#ccc;">
<div>une div</div>
<div>une autre div</div>
<table><tr><td>un</td></tr><tr><td>tableau</td></tr></table>
<img src="/images/scriptaculous.gif" alt="script.aculo.us" />
</div>
</div>
<ul>
  <li><a href="#" onclick="Effect.Grow('grow_demo'); return false;">Click me for a demo!</a></li>
  <li><a href="#" onclick="$('grow_demo').hide(); return false;">Reset</a></li>
</ul>
</body>
</html>

ça commence un peu plus à ressembler à ce que tu cherche ?

07/04/2011, 01h30
templari
ça commence un peu, oui. mais quand je mets ton code à gauche, ça donne rien comme effet... normal ? mais le premier exemple pré-fourni commence à ressembler un peu à la forme souhaitée certes ;)

on voit que ça charge ces fichiers :
Code:

1 2 3 4 <script type="text/javascript" src="/javascript/prototype.js"></script> <script type="text/javascript" src="/javascript/scriptaculous.js?load=effects">
mais je ne les ai évidemment pas donc je ne peux pas retoucher le code !
07/04/2011, 09h06
nadox

Il y a un bouton 'show result' pour rafraichir la partie droite avec le code de gauche.
07/04/2011, 09h26
RomainVALERI
Citation:
Envoyé par templari

on voit que ça charge ces fichiers :

Code:

1 2 3 4 <script type="text/javascript" src="/javascript/prototype.js"></script> <script type="text/javascript" src="/javascript/scriptaculous.js?load=effects">

mais je ne les ai évidemment pas donc je ne peux pas retoucher le code !
Ne me dis pas des choses pareilles :aie:
07/04/2011, 12h32
templari

Mille excuses, je ne connaissais vraiment pas ces libraries... autant pour moi.

Je vais donc réessayer tout cela.

Je reviens vers vous.

Merci.

Salut,

alors, j'ai essayé mais malheureusement cela ne marche pas.

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>script.aculo.us examples</title>
   <style type="text/css">
   <script type="text/javascript" src="/javascripts/prototype.js"></script>
   <script type="text/javascript" src="/javascripts/scriptaculous.js?load=effects"></script>
 
   <style type="text/css">
 
 
   	body, html 
{
    margin: 0;
	width:100%;
	height:100%;
   	background:#000;
    color:#fff;
    font:0.9em "Trebuchet MS";
}
 
 
   	</style>
 
   <script type="text/javascript">
 
    function GrowEffect(element)
    {
       new Effect.Grow(element, {duration:3,from:1.0,to:1.0});
    }
 
   </script>
 
</head>
 
<body>
 
<div style="width:500px; height:250px;border:2px solid red;">
<div id="grow_demo" style="display:none; width:500px; height:250px; background:#ccc;">
<div>une div</div>
<div>une autre div</div>
<table><tr><td>un</td></tr><tr><td>tableau</td></tr></table>
<img src="/images/test_image.png" alt="test_image" />
</div>
</div>
<ul>
  <li><a href="#" onclick="Effect.Grow('grow_demo'); return false;">Click me for a demo!</a></li>
  <li><a href="#" onclick="$('grow_demo').hide(); return false;">Reset</a></li>
</ul>
 
</body>
 
</html>

Ca ne fais strictement rien (quand on click sur "click me for a demo).

(de plus, je met le background en noir, et il ne veut pas... je ne sais pas pourquoi...)

:?

08/04/2011, 11h12
nadox

C'est un essai en local sur ta machine ? Vérifie donc les chemins des deux scripts...
[edit]
Il y a une balise style non fermée qui traine au dessus des deux script !
[\edit]
08/04/2011, 11h22
templari

J'ai test via MAMP, ça ne fonctionne pas non plus.

Oui, effectivement, ça me donnais un message d'erreur (enfin, 2) car ça ne chargeait pas les .js au bon endroit, j'arrivais pas à modifier ce foutu path, je ne sais pas pourquoi.

Mais j'te dis, là, j'ai re-testé via MAMP (je suis sur Mac) et... y'a y'a plus d'erreur dans le chargement de la page, et cela ne fonctionne toujours pas... :oops:

Arrghhhhh....!!!
08/04/2011, 11h48
nadox

Il y a une balise style non fermée qui traine au dessus des deux script !

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
40
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>script.aculo.us examples</title>
   <script type="text/javascript" src="/javascripts/prototype.js"></script>
   <script type="text/javascript" src="/javascripts/scriptaculous.js?load=effects"></script>
 
   <style type="text/css">
 
 
   	body, html 
{
    margin: 0;
	width:100%;
	height:100%;
   	background:#000;
    color:#fff;
    font:0.9em "Trebuchet MS";
}
   	</style>
</head>
 
<body>
 
<div style="width:500px; height:250px;border:2px solid red;">
<div id="grow_demo" style="display:none; width:500px; height:250px; background:#ccc;">
<div>une div</div>
<div>une autre div</div>
<table><tr><td>un</td></tr><tr><td>tableau</td></tr></table>
<img src="/images/test_image.png" alt="test_image" />
</div>
</div>
<ul>
  <li><a href="#" onclick="Effect.Grow('grow_demo'); return false;">Click me for a demo!</a></li>
  <li><a href="#" onclick="$('grow_demo').hide(); return false;">Reset</a></li>
</ul>
 
</body>
 
</html>

08/04/2011, 15h43
templari

....j'ai honte^^ :mouarf:

Ce sont des choses qui arrivent ;)

De plus, j'avais fait une autre boulette, j'appelais les fichiers avec un / avant.

ex: /javascripts/prototype.js

alors qu'il fallait mettre tout simplement :

javascripts/prototype.js

... ce sont des vieux réflexes de bash^^ :lol:

Donc ! je viens ENFIN de voir ce que tu as fait, et effectivement, c'est bien ce que je recherche !!!

Je te remercies beaucoup nadox.

Je vais travailler un peu tout cela pour voir comment améliorer la chose, puis je reviens vers toi en cas de souci ;)

Une fois bon, je posterai mon code en entier et validerai ce thread ;)

Merci encore.

A bientôt.

Salut,

alors, tout d'abord merci beaucoup ;)

j'ai modifié un peu le code à ma convenance, mais, ce n'est pas fini, je souhaite donc lui appliqué les styles que j'avais mentionnés au début.

Mais avant cela, souci Numéro 1 :

- L'image (le fond) arrive de droite ! Et pas du centre ! Et alors là... inutile d'essayer de le modifier (j'ai essayé un peu mais, ... non ^^ faut pas :mouarf: ). Donc, si vous avez une idée pour que ça arrive DU CENTRE, ça serait parfait.

Souci Numéro 2 :

- Je ne peux pas modifier le CSS de l'image dans le code ! Etrange non ? Je peux le faire dans la div, mais ce qu'il y a dans la div, je ne peux pas l'enlever et le mettre dans le CSS en haut entre les balises style... Etrange non ? Du coup j'peux faire aucun effet sur cette fenêtre... Etrange.

Je vous renvoie le code modifié à ma convenance, les liens "Démo" et "Reset" et les margin-top/bottom sont ainsi établis de sorte à ce que cela ressemble le + à mon site, en fait. Là c'est très réaliste niveau distance.

A noter que je ne travaille qu'avec des valeur en %, jamais en px (tout du moins le moins possible, car je souhaite que mon sit s'adapte à la dimension/résolution de l'écran du visiteur, qu'il soit sur un 13" ou un 32".

Bien, si vous avez des idées pour le souci N°1 et le souci N°2...

A vous les studios !

Re-voici le code :
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 40 41 42 43 44 45 46 47 48 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>test</title> <script type="text/javascript" src="javascripts/prototype.js"></script> <script type="text/javascript" src="javascripts/scriptaculous.js?load=effects"></script> <style type="text/css"> body, html { margin: 0; width:100%; height:100%; background:#000; color:#fff; font:0.9em "Trebuchet MS"; } #test_demo { text-align: center; margin-bottom: 3%; margin-top: 3%; } </style> <script type="text/javascript"> function GrowEffect(element) { new Effect.Grow(element, {duration:3,from:1.0,to:1.0}); } </script> </head> <body> <div id="test_demo"> <li><a href="#" onclick="Effect.Grow('grow_demo'); return false;">Demo</a></li><br /> <li><a href="#" onclick="$('grow_demo').hide(); return false;">Reset</a></li> <br /> </div> <div id="grow_demo" style="display:none; margin:auto; width:85%; height:70%; background:#ccc;"> </div> <br /> </body> </html>
Merci !

08/04/2011, 18h57
templari
Nan, j'essaie, mais, ça veut pas...
Code:

1 2 3 4 function GrowEffect(grow_demo) { new Effect.Grow(grow_demo,{'grow_demo',duration:3,fps:25,direction:center,from:0.0,to:1.0}); }
C'est pourtant ce qu'indique les paramètres de la fonction ici :

http://scriptaculous.le-developpeur-...ect.Grow().php

:calim2:
08/04/2011, 20h43
nadox
Il y avait une coquille dans mon premier code. La fonction n'était pas utilisée puisqu'on appelait l'effet directement dans le onclick.
il faut modifier le lien comme ça pour utiliser GrowEffect :
Code:

1 2 <li><a href="#" onclick="GrowEffect(this); return false;">Demo</a></li><br />
EDIT : je suis fatigué je crois : ce code n'est pas bon non plus :aie:

Oui nan mais ça ça ne change rien.

C'est cette ligne qui, je suppose, doit être modifiée :

Code:

new Effect.Grow(grow_demo,{'grow_demo',duration:3,fps:25,direction:center,from:0.0,to:1.0});

(sinon j'ai modifié la ligne, mais ça n'y change rien)

New code :

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
40
41
42
43
44
45
46
47
48
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
   <script type="text/javascript" src="javascripts/prototype.js"></script>
   <script type="text/javascript" src="javascripts/scriptaculous.js?load=effects"></script>
 
   <style type="text/css">
 
   	body, html 
{
    margin: 0;
	width:100%;
	height:100%;
   	background:#000;
    color:#fff;
    font:0.9em "Trebuchet MS";
}   	
 
#test_demo
{
	text-align: center;
	margin-bottom: 3%;
	margin-top: 3%;
}
   	</style>
 
   <script type="text/javascript">
 
    function GrowEffect(grow_demo)
    {
       new Effect.Grow(grow_demo,{'grow_demo',duration:3,fps:25,direction:center,from:0.0,to:1.0});
    }
 
   </script>
</head>
<body>
<div id="test_demo">
 
  <li><a href="#" onclick="Effect.Grow('grow_demo'); return false;">Demo</a></li><br />
  <li><a href="#" onclick="$('grow_demo').hide(); return false;">Reset</a></li>
<br />
</div>
<div id="grow_demo" style="display:none; margin:auto; width:85%; height:70%; background:#ccc;">
</div>
<br />
</body>
</html>

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
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
   <script type="text/javascript" src="javascripts/prototype.js"></script>
   <script type="text/javascript" src="javascripts/scriptaculous.js?load=effects"></script>
 
   <style type="text/css">
 
       body, html 
{
    margin: 0;
    width:100%;
    height:100%;
       background:#000;
    color:#fff;
    font:0.9em "Trebuchet MS";
}       
 
#test_demo
{
    text-align: center;
    margin-bottom: 3%;
    margin-top: 3%;
}
       </style>
 
   <script type="text/javascript">
 
    function GrowEffect(element_id)
    {
var elem = document.getElementById(element_id);
       Effect.Grow(elem,{,duration:3,fps:25,direction:center,from:0.0,to:1.0});
    }
 
   </script>
</head>
<body>
<div id="test_demo">
 
  <li><a href="#" onclick="Effect.Grow('grow_demo'); return false;">Demo</a></li><br />
  <li><a href="#" onclick="$('grow_demo').hide(); return false;">Reset</a></li>
<br />
</div>
<div id="grow_demo" style="display:none; margin:auto; width:85%; height:70%; background:#ccc;">
</div>
<br />
</body>
</html>

09/04/2011, 14h58
templari

Quelqu'un a une idée ... ?

Malheureusement, cela ne fonctionne toujours pas, ça arrive toujours de la droite !!!

(Nadox, je reste perplexe moi aussi, les paramètres de la fonction sont bien là, cela devrait fonctionner, mais... non... :cry: )
09/04/2011, 17h05
nadox

Le

Code:

margin:auto;

de la div fausse le positionnement.
Il vaut surement mieux utiliser un conteneur pour positionner l'élément(comme dans mon premier exemple).

Voilà :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
   <script type="text/javascript" src="prototype.js"></script>
   <script type="text/javascript" src="scriptaculous/scriptaculous.js?load=effects"></script>
 
<style type="text/css">
body, html{ margin: 0; width:100%; height:100%; background:#000; color:#fff; font:0.9em "Trebuchet MS"; }
#test_demo{ text-align: center; margin-bottom: 3%; margin-top: 3%;}
#corpus_container{ position: relative; width:85%; height:60%; margin: 0 auto;}
#corpus{ position: absolute; width:100%; height:100%; background:#FFF; border: 3px solid #0AF;}
#corpus_content { margin: 10px; color: #000; }
</style>
 
   <script type="text/javascript">
    function GrowEffect(elem)
    {
        var oElem = document.getElementById(elem) || elem; // permet de passer un id OU une reference directe en parametre
        Effect.Grow(oElem,{duration:0.4,fps:25,direction:center,from:0.0,to:1.0});
    }
   </script>
</head>
<body onload="Effect.Grow($('corpus'));">
<div id="test_demo">
  <li><a href="#" onclick="Effect.Grow('corpus'); return false;">Demo</a></li><br />
  <li><a href="#" onclick="$('corpus').hide(); return false;">Reset</a></li>
</div>
<div id="corpus_container">
    <div id="corpus" style="display:none;">
        <div id="corpus_content">
        <a href="#" onclick="$('corpus').hide(); return false;" style="display: block;float:right;"><img alt="X" src="close.png"/></a>
        <table width="100%">
            <tr>
                <th>entete 1</th>
                <th>entete 2</th>
            </tr>
            <tr>
                <td>colonne 1- ligne 1</td>
                <td>colonne 2- ligne 1</td>
            </tr>
            <tr>
                <td>colonne 1- ligne 2</td>
                <td>colonne 2- ligne 2</td>
            </tr>
        </table>
        </div>
    </div>
</div>
</body>
</html>

Il te reste à adapter le CSS (ne joue pas trop avec les positions et marges si tu ne maîtrise pas bien la chose), et faire en sorte d'utiliser plusieurs contenus...

09/04/2011, 23h15
templari

Miséricorde, ça ne fonctionne toujours pas... ça ne fais rien, rien ne se passe... j'ai essayé sous différents web browser, ça fait rien du tout...

Je t'assures que ça ne fonctionne pas, pourtant t'as vachement retravaillé tout le script là, merci beaucoup (de plus je ne vois aucune erreur dans ton code, il devrait fonctionner...).

Mais test le, ça ne fais rien.
10/04/2011, 12h53
nadox

J'ai modifié le chemin du premier script pour mes tests..
10/04/2011, 16h21
templari

Pourrais-tu être plus explicite ?

Bon là j'ai l'impression d'être un magnifique boulet, certes, mais qu'importe, j'arrive pas à le faire marcher.

Comment ça tu as modifié le chemin du premier script ????

Tu parles de cette ligne ?

Code:

var oElem = document.getElementById(elem) || elem; // permet de passer un id OU une reference directe en parametre

Enfin bref, dans tous les cas, je capte pas... :?
11/04/2011, 07h09
nadox

Je parle du lien vers prototype.
11/04/2011, 12h16
templari

Ah oui je n'avais pas vu.

Yes ! Ca fonctionne, là t'as géré Nadox ! Je sais pas comment on peut te donner un +1 mais je le ferai bien volontiers ! (ah si j'ai trouvé ;) c'est fait ;) ).

Par contre, sais-tu pourquoi il y a un "soubresaut" du "contener" vers la fin ? (l fenêtre sursaute un peu sur la fin).

Sauriez-vous comment arrondir les bords de l'ascenseur ? pour ne pas qu'il empiète sur là "border" ?

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
   <script type="text/javascript" src="javascripts/prototype.js"></script>
   <script type="text/javascript" src="javascripts/scriptaculous.js"></script>
 
<style type="text/css">
body, html{ 
	margin: 0; 
	width:100%; 
	height:100%; 
	background:#000; 
	color:#fff; 
	font:0.9em "Trebuchet MS"; 
}
 
#test_demo{ 
	text-align: center; 
	margin-bottom: 3%; 
	margin-top: 3%;
}
 
#corpus_container{ 
	position: relative; 
	width:85%; 
	height:60%; 
	margin: 0 auto;
}
 
#corpus{ 
	position: absolute; 
	width:100%; 
	height:100%; 
	background:#FFF; 
	border: 4px solid;
	border-color: #00CCFF;
	-moz-border-radius: 13px;
	-webkit-border-radius: 13px;
	-khtml-border-radius: 13px;
	border-radius: 13px;
	behavior: url("border-radius.htc");	
	overflow: auto;
}
 
#corpus_content { 
	margin-top: 2%;
	margin-bottom: 2%;
	margin-left: 2%;
	margin-right: 2%; 
	color: #000; 
}
 
</style>
 
   <script type="text/javascript">
    function GrowEffect(elem)
    {
        var oElem = document.getElementById(elem) || elem; // permet de passer un id OU une reference directe en parametre
        Effect.Grow(oElem,{duration:0.4,fps:25,direction:center,from:0.0,to:1.0});
    }
   </script>
</head>
<body onload="Effect.Grow($('corpus'));">
<div id="test_demo">
  <li><a href="#" onclick="Effect.Grow('corpus'); return false;">Demo</a></li><br />
  <li><a href="#" onclick="$('corpus').hide(); return false;">Reset</a></li>
</div>
<div id="corpus_container">
    <div id="corpus" style="display:none;">
        <div id="corpus_content">
        <a href="http://www.casimages.com/img.php?i=110412021409181346.jpg" target="_blank" title="upload image"><img src="http://nsa26.casimages.com/img/2011/04/12/mini_110412021409181346.jpg" border="0" alt="Hebergement gratuit d'image et photo"/></a></a>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet mauris eros. Fusce aliquet molestie nisl, ac vehicula massa mattis vitae. Donec adipiscing arcu tortor, varius porta eros. Nunc quis dolor tortor, eu euismod orci. Proin tincidunt, nunc vel ullamcorper dignissim, justo ligula molestie purus, at pellentesque leo nisl et dui. Integer ut ante faucibus enim gravida hendrerit. Fusce aliquam erat at leo tincidunt volutpat hendrerit sem aliquet. Aliquam erat volutpat. Sed vitae dui elit, id egestas dolor. Curabitur tincidunt vulputate tincidunt.</p>
 
			<p>Integer consectetur magna sit amet urna pellentesque id auctor risus gravida. Ut eu orci nisi, eu dictum lectus. Donec lorem augue, porta malesuada condimentum suscipit, hendrerit ac purus. Proin posuere volutpat est ac sodales. Vestibulum at mauris at lacus cursus euismod. Sed nec odio ipsum. Curabitur lectus risus, feugiat in dapibus id, congue nec sem. Aliquam in felis in turpis consequat adipiscing. Sed elementum egestas interdum. Curabitur ultricies eros nec odio sollicitudin sit amet dignissim magna venenatis. Phasellus molestie consequat ante, a suscipit neque commodo quis. Donec placerat malesuada mauris, sit amet pharetra nunc auctor dapibus. Maecenas ultrices, nisi eu aliquam pharetra, sem diam accumsan nunc, pellentesque tincidunt sapien lacus eu elit. Integer mollis pulvinar sapien non pretium.</p>
 
			<p>Nam varius urna augue. Nulla hendrerit hendrerit massa a lobortis. Quisque sem quam, elementum at tempus vel, porttitor eu justo. In ornare purus eget neque faucibus eu luctus orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tincidunt ultricies tristique. Quisque bibendum rutrum auctor. Aliquam at volutpat velit. Vestibulum nulla sem, lacinia eget adipiscing at, malesuada in ante. Sed est augue, luctus at mattis vitae, laoreet eget nunc. Donec sed condimentum nunc. Sed feugiat condimentum fermentum.</p>         
 
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet mauris eros. Fusce aliquet molestie nisl, ac vehicula massa mattis vitae. Donec adipiscing arcu tortor, varius porta eros. Nunc quis dolor tortor, eu euismod orci. Proin tincidunt, nunc vel ullamcorper dignissim, justo ligula molestie purus, at pellentesque leo nisl et dui. Integer ut ante faucibus enim gravida hendrerit. Fusce aliquam erat at leo tincidunt volutpat hendrerit sem aliquet. Aliquam erat volutpat. Sed vitae dui elit, id egestas dolor. Curabitur tincidunt vulputate tincidunt.</p>
 
			<p>Integer consectetur magna sit amet urna pellentesque id auctor risus gravida. Ut eu orci nisi, eu dictum lectus. Donec lorem augue, porta malesuada condimentum suscipit, hendrerit ac purus. Proin posuere volutpat est ac sodales. Vestibulum at mauris at lacus cursus euismod. Sed nec odio ipsum. Curabitur lectus risus, feugiat in dapibus id, congue nec sem. Aliquam in felis in turpis consequat adipiscing. Sed elementum egestas interdum. Curabitur ultricies eros nec odio sollicitudin sit amet dignissim magna venenatis. Phasellus molestie consequat ante, a suscipit neque commodo quis. Donec placerat malesuada mauris, sit amet pharetra nunc auctor dapibus. Maecenas ultrices, nisi eu aliquam pharetra, sem diam accumsan nunc, pellentesque tincidunt sapien lacus eu elit. Integer mollis pulvinar sapien non pretium.</p>
 
			<p>Nam varius urna augue. Nulla hendrerit hendrerit massa a lobortis. Quisque sem quam, elementum at tempus vel, porttitor eu justo. In ornare purus eget neque faucibus eu luctus orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tincidunt ultricies tristique. Quisque bibendum rutrum auctor. Aliquam at volutpat velit. Vestibulum nulla sem, lacinia eget adipiscing at, malesuada in ante. Sed est augue, luctus at mattis vitae, laoreet eget nunc. Donec sed condimentum nunc. Sed feugiat condimentum fermentum.
			</p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet mauris eros. Fusce aliquet molestie nisl, ac vehicula massa mattis vitae. Donec adipiscing arcu tortor, varius porta eros. Nunc quis dolor tortor, eu euismod orci. Proin tincidunt, nunc vel ullamcorper dignissim, justo ligula molestie purus, at pellentesque leo nisl et dui. Integer ut ante faucibus enim gravida hendrerit. Fusce aliquam erat at leo tincidunt volutpat hendrerit sem aliquet. Aliquam erat volutpat. Sed vitae dui elit, id egestas dolor. Curabitur tincidunt vulputate tincidunt.</p>
 
			<p>Integer consectetur magna sit amet urna pellentesque id auctor risus gravida. Ut eu orci nisi, eu dictum lectus. Donec lorem augue, porta malesuada condimentum suscipit, hendrerit ac purus. Proin posuere volutpat est ac sodales. Vestibulum at mauris at lacus cursus euismod. Sed nec odio ipsum. Curabitur lectus risus, feugiat in dapibus id, congue nec sem. Aliquam in felis in turpis consequat adipiscing. Sed elementum egestas interdum. Curabitur ultricies eros nec odio sollicitudin sit amet dignissim magna venenatis. Phasellus molestie consequat ante, a suscipit neque commodo quis. Donec placerat malesuada mauris, sit amet pharetra nunc auctor dapibus. Maecenas ultrices, nisi eu aliquam pharetra, sem diam accumsan nunc, pellentesque tincidunt sapien lacus eu elit. Integer mollis pulvinar sapien non pretium.</p>
 
			<p>Nam varius urna augue. Nulla hendrerit hendrerit massa a lobortis. Quisque sem quam, elementum at tempus vel, porttitor eu justo. In ornare purus eget neque faucibus eu luctus orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tincidunt ultricies tristique. Quisque bibendum rutrum auctor. Aliquam at volutpat velit. Vestibulum nulla sem, lacinia eget adipiscing at, malesuada in ante. Sed est augue, luctus at mattis vitae, laoreet eget nunc. Donec sed condimentum nunc. Sed feugiat condimentum fermentum.</p>         
 
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet mauris eros. Fusce aliquet molestie nisl, ac vehicula massa mattis vitae. Donec adipiscing arcu tortor, varius porta eros. Nunc quis dolor tortor, eu euismod orci. Proin tincidunt, nunc vel ullamcorper dignissim, justo ligula molestie purus, at pellentesque leo nisl et dui. Integer ut ante faucibus enim gravida hendrerit. Fusce aliquam erat at leo tincidunt volutpat hendrerit sem aliquet. Aliquam erat volutpat. Sed vitae dui elit, id egestas dolor. Curabitur tincidunt vulputate tincidunt.</p>
 
			<p>Integer consectetur magna sit amet urna pellentesque id auctor risus gravida. Ut eu orci nisi, eu dictum lectus. Donec lorem augue, porta malesuada condimentum suscipit, hendrerit ac purus. Proin posuere volutpat est ac sodales. Vestibulum at mauris at lacus cursus euismod. Sed nec odio ipsum. Curabitur lectus risus, feugiat in dapibus id, congue nec sem. Aliquam in felis in turpis consequat adipiscing. Sed elementum egestas interdum. Curabitur ultricies eros nec odio sollicitudin sit amet dignissim magna venenatis. Phasellus molestie consequat ante, a suscipit neque commodo quis. Donec placerat malesuada mauris, sit amet pharetra nunc auctor dapibus. Maecenas ultrices, nisi eu aliquam pharetra, sem diam accumsan nunc, pellentesque tincidunt sapien lacus eu elit. Integer mollis pulvinar sapien non pretium.</p>
 
			<p>Nam varius urna augue. Nulla hendrerit hendrerit massa a lobortis. Quisque sem quam, elementum at tempus vel, porttitor eu justo. In ornare purus eget neque faucibus eu luctus orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tincidunt ultricies tristique. Quisque bibendum rutrum auctor. Aliquam at volutpat velit. Vestibulum nulla sem, lacinia eget adipiscing at, malesuada in ante. Sed est augue, luctus at mattis vitae, laoreet eget nunc. Donec sed condimentum nunc. Sed feugiat condimentum fermentum.
			</p>			
 
        </div>
    </div>
</div>
</body>
</html>

un "z-index" ne suffirait pas ? (en positionnant la "border" toujours en FRONT par rapport à la scrollbar)