Bonjour,
Je travaille actuellement sur mon site, j'ai voulu faire une scrollbar en javascript pour ne pas gacher le design. Malheuresement j'ai un soucis, cela ne fonctionne pas et je ne trouve pas la cause.
Voici la site : http://www.sensitiv.fr
Et le code source :
Le css
Donc si quelqu'un d'experimenter pouvais eclairer ma lenterne
.
Merci d'avance pour votre aide.
Je travaille actuellement sur mon site, j'ai voulu faire une scrollbar en javascript pour ne pas gacher le design. Malheuresement j'ai un soucis, cela ne fonctionne pas et je ne trouve pas la cause.
Voici la site : http://www.sensitiv.fr
Et le code source :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>AsCorp</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" id="css" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./swfobject.js"></script>
<!--[if IE]>
<link rel=stylesheet href="./stylesheet/styleie.css" type="text/css">
<![endif]-->
<script language="javascript" type="text/javascript">
var Timer;
var Pas = 3;
function moveLayer(Sens) {
Objet=document.getElementByClassName("contenu");
if(parseInt(Objet.style.top) + (Pas*Sens)>0) {
clearTimeout(Timer);
}
else if(parseInt(Objet.style.top) + (Pas*Sens)<-(Objet.offsetHeight-document.getElementByClassName("text").offsetHeight)) {
clearTimeout(Timer);
}
else {
Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
}
Timer = setTimeout("moveLayer(" + Sens + ");", 30);
}
</script>
</head>
<body>
<div id="content">
<div id="header">
<div id="nav">
<dl>
<dt> </dt>
<dd>
<ul>
<li><a href="#" title="Accueil" class="accueil"> </a></li>
<li><a href="#" title="Portfolio" class="portfolio"> </a></li>
<li><a href="#" title="Téléchargement" class="telechargement"> </a></li>
<li><a href="#" title="Forum" class="forum"> </a></li>
<li><a href="#" title="Contact" class="contact"> </a></li>
<li><a href="#" title="Staff" class="staff"> </a></li>
</ul>
</dd>
</dl>
</div>
</div>
<div id="body">
<div class="text_fond">
<div class="titre">
Lorem ipsum dolor sit amet
</div>
<div class="text">
<div class="contenu">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac mollis metus. In consequat aliquam justo, a placerat lorem tempus eget. Etiam malesuada iaculis tellus, sit amet malesuada lacus vehicula eu. Duis nec lectus eget enim vehicula ultrices ut id est. Aenean vitae pharetra urna. Praesent auctor, tortor sit amet dapibus fringilla, est enim ultrices lectus, vitae porttitor metus quam sit amet nisi. Nunc malesuada, dui vel bibendum euismod, erat urna fermentum velit, nec pretium elit ligula vel leo. Nullam lectus magna, pharetra nec eleifend ac, consectetur sit amet quam. Mauris velit eros, sodales sed pretium vitae, convallis quis nisi. Vestibulum id aliquam odio. Suspendisse potenti. Suspendisse cursus magna vitae massa faucibus sed iaculis sapien elementum. Duis elementum ullamcorper felis ac volutpat. Ut vitae nunc auctor nisl varius porttitor quis at libero. Aliquam eu dolor non nibh scelerisque ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh orci, consequat non tristique quis, euismod a ligula. Fusce mauris elit, egestas ac eleifend ac, ullamcorper id ligula.
Vestibulum tincidunt placerat metus, sed porta orci accumsan molestie. Mauris commodo tortor et mi pretium mattis. In ante nulla, sagittis eget faucibus in, faucibus tincidunt urna. Phasellus vulputate orci dui. Fusce sed nulla in est dictum fringilla. Integer et urna a arcu imperdiet hendrerit. Mauris vehicula felis eu magna feugiat volutpat. Vestibulum pulvinar varius leo sit amet lacinia. Vivamus aliquet convallis accumsan. Nam laoreet justo iaculis ligula congue accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum mollis pellentesque neque non pulvinar. Sed eget dui mauris.
Praesent ac accumsan sapien. Proin et metus ligula, eu ullamcorper quam. Donec blandit diam vel purus commodo elementum. Praesent tincidunt convallis neque ut euismod. Cras hendrerit bibendum massa, ut bibendum nisl varius eget. Fusce aliquet augue eleifend diam ullamcorper sed interdum enim molestie. Vivamus vitae rhoncus massa. Etiam dignissim, ante tristique tincidunt euismod, quam lorem vestibulum eros, id venenatis elit mauris sed urna. Proin at enim tellus. Duis non leo fermentum erat cursus interdum vel eget sapien. Phasellus sodales sem quam. Maecenas venenatis neque sed eros fermentum ut iaculis odio rutrum. Aenean eget nisi leo, ut varius sapien. Proin interdum suscipit auctor. Donec tortor enim, sollicitudin in dapibus id, imperdiet quis urna. Nulla facilisi.
Fusce non turpis ac libero varius luctus quis sit amet nunc. Vestibulum faucibus ligula nec nunc adipiscing sit amet fringilla turpis egestas. Nulla eu sollicitudin orci. Pellentesque ac nulla lacus. Mauris non tincidunt nibh. Cras porta aliquet libero et venenatis. Etiam nunc metus, ullamcorper vehicula ornare id, dignissim et turpis. Fusce ipsum leo, suscipit sed fermentum non, placerat quis arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque quis tellus quis nibh posuere interdum sed et nulla. Aliquam euismod euismod varius. Maecenas venenatis ullamcorper posuere. Vestibulum lobortis adipiscing ullamcorper. Praesent vestibulum, ante ut tempor egestas, velit sem convallis arcu, sed rutrum metus leo quis tellus. Aliquam cursus, nisl pharetra consectetur luctus, felis lacus varius diam, sit amet aliquam lorem velit sit amet erat. Nam eu lectus quam. Duis ornare, metus id semper aliquet, dolor erat tempor lorem, quis tincidunt diam velit et dolor. Nulla lobortis vulputate molestie.
Nam tincidunt malesuada nibh, in accumsan est fringilla a. Aliquam vitae diam libero. Duis quis sem at felis fermentum sagittis. In in augue neque, vitae aliquam ligula. Quisque a est a dui tincidunt vulputate. Maecenas quis urna nisl, rutrum euismod augue. Etiam quis mattis nulla. Mauris sed semper nisl. In laoreet, elit eu cursus suscipit, nisl eros blandit ipsum, in mattis magna eros et lorem. In odio tellus, eleifend vel mattis id, pulvinar non sem. Donec sed ipsum lobortis ante facilisis tempus sit amet ac libero. Cras ultricies nisl et neque sagittis ac ornare velit egestas. Nunc dolor dolor, varius in ultrices eu, fermentum at elit. Mauris placerat scelerisque leo nec dapibus. Curabitur est elit, tristique sed eleifend a, sagittis quis justo. Suspendisse suscipit magna sed sem aliquam lobortis. Aliquam lorem urna, lacinia vel scelerisque ac, ultricies vitae elit. Vestibulum gravida velit placerat arcu tempor et venenatis lectus euismod. In eget leo a arcu aliquet fermentum varius quis sem.
</div>
</div>
<div class="scrollbar">
<img onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer);" src="./images/arrow-up.png" class="up" alt="" />
<img onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer);" src="./images/arrow-down.png" class="down" alt="" />
</div>
</div>
<div class="video_fond">
<div id="video">
<p id="ascorp_player"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript">
var s1 = new SWFObject('player.swf','player','280','175','9');
s1.addParam('allowscriptaccess','always');
s1.addParam('allowfullscreen','true');
s1.addParam('flashvars','&file=http://video.wankil.fr/jesuisunprops.flv&backcolor=111111&frontcolor=eeeeee&volume=35&controlbar=over&dock=false');
s1.write('ascorp_player');
</script>
</div>
</div>
<div class="select_fond">
</div>
</div>
<div id="footer">
</div>
</div>
</body>Le css
/* Auteur: Sorrow */
/* E-mail: seekcoldgirl@hotmail.com */
/*----- Général -----*/
body {
background: url('./images/background.jpg') no-repeat center top;
background-color: #000;
color: black;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
border: 0px none;
text-decoration: none;
outline: none;
}
a {
border: 0px none;
text-decoration: none;
outline: none;
}
#content {
position:absolute;
left: 50%;
top: 50%;
width: 1024px;
height: 675px;
margin-left: -512px;
margin-top: -337px;
}
/*----- Header -----*/
#header {
background: url('./images/header.png') no-repeat;
width: 1024px;
height: 100px;
}
#nav {
position: absolute;
background: url('./images/nav.png') no-repeat scroll 0 0;
width: 143px;
height: 50px;
margin-top: 50px;
margin-left: 43px;
}
#nav:hover {
background: url('./images/nav.png') no-repeat scroll 0 -50px;
}
#nav dl {
height: 50px;
margin: 0px;
padding: 0px;
display: block;
float: left;
}
#nav dt {
width: 143px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
#nav dd ul {
background: url('./images/nav_fond.png') no-repeat;
width: 143px;
height: 144px;
margin-left: -43px;
margin-top: 0px;
padding: 0px;
text-align: center;
list-style: none;
padding-top: 5px;
}
#nav dd ul li {
display: block;
margin: 0px;
padding: 0px;
}
#nav dd ul li a {
width: 125px;
height: 20px;
margin-left: 9px;
line-height: 20px;
display: block;
}
#nav dd ul li a.accueil {
background: url('./images/accueil.png') no-repeat scroll 0 0;
}
#nav dd ul li a:hover.accueil {
background: url('./images/accueil.png') no-repeat scroll 0 -20px;
}
#nav dd ul li a.portfolio {
background: url('./images/portfolio.png') no-repeat scroll 0 0;
}
#nav dd ul li a:hover.portfolio {
background: url('./images/portfolio.png') no-repeat scroll 0 -20px;
}
#nav dd ul li a.telechargement {
background: url('./images/telechargement.png') no-repeat scroll 0 0;
}
#nav dd ul li a:hover.telechargement {
background: url('./images/telechargement.png') no-repeat scroll 0 -20px;
}
#nav dd ul li a.forum {
background: url('./images/forum.png') no-repeat scroll 0 0;
}
#nav dd ul li a:hover.forum {
background: url('./images/forum.png') no-repeat scroll 0 -20px;
}
#nav dd ul li a.contact {
background: url('./images/contact.png') no-repeat scroll 0 0;
}
#nav dd ul li a:hover.contact {
background: url('./images/contact.png') no-repeat scroll 0 -20px;
}
#nav dd ul li a.staff {
background: url('./images/staff.png') no-repeat scroll 0 0;
}
#nav dd ul li a:hover.staff {
background: url('./images/staff.png') no-repeat scroll 0 -20px;
}
#nav dl:hover dd {
display: block;
}
#nav dl dd {
display: none;
}
/*----- Body -----*/
#body {
background: url('./images/body.png') no-repeat;
width: 1024px;
height: 500px;
}
.text_fond {
position: absolute;
background: url('./images/text_fond.png') no-repeat;
width: 500px;
height: 480px;
margin-top: 10px;
margin-left: 162px;
overflow: hidden;
}
.titre {
float: right;
font-size: 26px;
font-weight: bold;
margin-top: 19px;
margin-right: 10px;
}
.text {
width: 485px;
height: 395px;
text-align: justify;
position: relative;
}
.contenu {
margin-top: 65px;
padding-top: 10px;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 10px;
position: absolute;
top: 0;
}
.scrollbar {
margin-top: -315px;
width: 15px;
height: 395px;
position: absolute;
right: 0;
}
.up {
cursor: pointer;
position: absolute;
right: 0;
}
.down {
cursor: pointer;
position: absolute;
right: 0;
bottom: 0;
}
.video_fond {
position: absolute;
background: url('./images/video_fond.png') no-repeat;
width: 320px;
height: 215px;
margin-top: 20px;
margin-left: 682px;
}
.select_fond {
position: absolute;
background: url('./images/select_fond.png') no-repeat;
width: 280px;
height: 141px;
margin-top: 300px;
margin-left: 702px;
}
#video {
position: absolute;
margin-top: 10px;
margin-left: 20px;
}
/*----- Footer -----*/
#footer {
background: url('./images/footer.png') no-repeat;
width: 1024px;
height: 75px;
}Donc si quelqu'un d'experimenter pouvais eclairer ma lenterne
.Merci d'avance pour votre aide.
