Design barre de défilement

poulpette -  
 poulpette -
Bonjour,
Je voudrais créer une barre de défilement personnalisée.
J'ai essaayé :
<style>
BODY {

scrollbar-face-color : #FFFFFF ;
scrollbar-shadow-color : #000000 ;
scrollbar-highlight-color : #4C9900 ;
scrollbar-3dlight-color : #999999;
scrollbar-darkshadow-color : #4C9900;
scrollbar-track-color : #FFFFFF ;
scrollbar-arrow-color : #4C9900 ;
}
</style>

mais ce genre de code n'est interpreté que par IE.
Avez-vous une solution pour que ça marche sur plusieurs navigateurs ou un script ?
D'avance merci.

2 réponses

Réponse 1 / 2
Aurelsicoko Messages postés 160 Statut Membre 4
 
Quand tu parles de barre de défilement tu penses à quoi exactement ???
0
poulpette
 
je parle de la barre de défilement qui sert à faire dérouler un texte par exemple quand celui-ci est trop grand pour la page web.
je te mets mon code, et tu verras que ma personnalisation marche sur IE et pas sur les autres navigateurs.
merci !


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>peinture</title>
<link href="granstitres.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#peinture {
position:absolute;
left:25px;
top:88px;
width:837px;
height:475px;
z-index:1;
}
#tx4 {
position:absolute;
left:155px;
top:1111px;
width:258px;
height:301px;
z-index:2;
visibility: visible;
}
#tx1 {
position:absolute;
left:503px;
top:1115px;
width:256px;
height:444px;
z-index:3;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
visibility: visible;
}
#Layer4 {
position:absolute;
left:203px;
top:54px;
width:114px;
height:21px;
z-index:4;
}
.Style3 {color: #993333}
#tx2 {
position:absolute;
left:495px;
top:85px;
width:256px;
height:237px;
z-index:4;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: thin;
background-image: none;
}
#Layer5 {
position:absolute;
left:812px;
top:519px;
width:26px;
height:30px;
z-index:5;
}
#Layer6 {
position:absolute;
left:104px;
top:94px;
width:2px;
height:0px;
z-index:6;
}
#Layer7 {
position:absolute;
left:191px;
top:149px;
width:646px;
height:457px;
z-index:6;
}
#tx3 {
position:absolute;
left:495px;
top:396px;
width:260px;
height:100px;
z-index:6;
}
#signe1 {
position:absolute;
left:315px;
top:545px;
width:53px;
height:16px;
z-index:7;
}
#Layer1 {
position:absolute;
left:439px;
top:446px;
width:0px;
height:2px;
z-index:8;
}
#signe2 {
position:absolute;
left:387px;
top:530px;
width:25px;
height:15px;
z-index:9;
visibility: visible;
}
#Layer2 {
position:absolute;
left:373px;
top:586px;
width:259px;
height:322px;
z-index:10;
}
#Layer3 {
position:absolute;
left:388px;
top:85px;
width:106px;
height:445px;
z-index:10;
}
#Layer8 {
position:absolute;
left:0px;
top:0px;
width:439px;
height:347px;
z-index:11;
}
#Layer9 {
position:absolute;
left:112px;
top:85px;
width:286px;
height:455px;
z-index:9;
overflow: auto;
}
#Layer10 {
position:absolute;
left:424px;
top:85px;
width:29px;
height:727px;
z-index:10;
}
-->
</style>
<script language="JavaScript">
<!--
function mmLoadMenus() {
if (window.mm_menu_0214095630_0) return;
window.mm_menu_0214095630_0 = new Menu("root",87,30,"Arial, Helvetica, sans-serif",10,"#999999","#333333","#FFFFFF","#FFFFFF","left","middle",0,0,1000,-5,7,true,false,false,0,false,false);
mm_menu_0214095630_0.addMenuItem("Petits formats","location='2.1petitsformats.html'");
mm_menu_0214095630_0.addMenuItem("Patchwork","location='2.2patchwork.html'");
mm_menu_0214095630_0.addMenuItem("Graphie","location='2.3graphie.html'");
mm_menu_0214095630_0.addMenuItem("Visages","location='2.4visages.html'");
mm_menu_0214095630_0.addMenuItem("Haute-couture","location='2.5.hautecouture.html'");
mm_menu_0214095630_0.addMenuItem("Picturoscope","location='2.6picturoscope.html'");
mm_menu_0214095630_0.addMenuItem("Lignes rouges","location='2.7lignesrouges.html'");
mm_menu_0214095630_0.hideOnMouseOut=true;
mm_menu_0214095630_0.bgColor='#555555';
mm_menu_0214095630_0.menuBorder=1;
mm_menu_0214095630_0.menuLiteBgColor='#FFFFFF';
mm_menu_0214095630_0.menuBorderBgColor='#777777';

mm_menu_0214095630_0.writeMenus();
} // mmLoadMenus()

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<script language="JavaScript" src="mm_menu.js"></script>
</head>

<body>
<div id="tx2" onfocus="MM_showHideLayers('tx2','','show','Layer5','','show','tx3','','show','Layer1','','show')">
<p class="txt2"><em>En bref :</em><span class="Style3"><em><br />
<br />
</em>Inspiration : </span>la <em>nature</em>, les <em>couleurs</em>, la <em>diversité</em> des choses.<br />
<br />
<span class="Style3"> Moteurs de recherches</span> : les tensions entre le <em>signifian</em>t et le <em>signifié</em>, les différents points de vue, la mise en oeuvre de la <em>matière</em>, l'importance de la <em>composition</em>, la puissance de la <em>couleur.<br />
</em><br />
<span class="Style3">Récurrences plastiques</span> : l'<em>écriture</em>, la <em>couture</em> utilisée comme symbole (ce qui lie et qui fait perdurer) et comme trait plastique, la <em>superposition</em> (densité de la matière et rapports entre la transparence et l'opacité).<br />
<br />
</p>
</div>
<div id="Layer5"><img src="boutons/home2.gif" width="39" height="38" /></div>
<div class="txt2" id="tx3" onfocus="MM_showHideLayers('tx2','','show','Layer5','','hide','tx3','','show')"><em>Navigation :<br />
<br />
</em>Pour accéder aux galeries, laissez votre souris sur le menu "Peinture", et celle-ci dévoilera les galeries.<br />
</div>
<div id="Layer1"></div>

<span class="Style3">


<style>
BODY {

scrollbar-face-color : #993333 ;
scrollbar-shadow-color : #ffffff ;
scrollbar-highlight-color : #ffffff ;
scrollbar-3dlight-color : #ffffff;
scrollbar-darkshadow-color : #ffffff;
scrollbar-track-color : #ffffff ;
scrollbar-arrow-color : #ffffff ;
}
</style>
</span>


<div class="txt2" id="Layer9">
<p><em>Petite présentation :ff<br />
<br />
</em>Huit galeries présentent mon travail par thèmes mais pas nécessairement dans un ordre chronologique, étant donné les nombreuses passerelles d'une période à l'autre.<br />
<br />
La première, •“<em class="Style3">Petits formats</em>” expose des tableaux de petite taille qui sont le fruit de mes expérimentations sur la mise en oeuvre de la matière.<br />
Des papiers superposés, de l'encre, de l'huile et la technique des apprêts à la colle de peau (méthode ancienne utilisée à la Renaissance)...<br />
<br />
•<em>“Patchwork"</em> est une galerie de tableaux formés de petits éléments pour former un ensemble. Les tableaux sont juxtaposés par collage ou couture...<br />
<br />
•<em>“Graphie”</em> rend compte de mon travail de fin d'étude universitaire qui s'intéresse au rapport entre le lisible et le visible (signifié - signifiant ) via l'écriture.</p>
<p><span class="Style3">•<em>“Visages”</em></span>, présente des peintures qui ont pour inspiration la figure humaine. Ces séries ont rarement été présentées. Je les dévoile aujourd'hui...<br />
<br />
<span class="Style3">•<em>“Haute-couture”</em></span>et <span class="Style3">•<em>“Picturoscope”</em></span>sont des évocations aux énergies enfouies, à l’esprit de la matière.<br />
Imaginaire cartographique rappelant des vue micro, macro ou aériennes...<br />
<br />
La série <span class="Style3">•<em>“ Lignes Rouges"</em></span> présente une ligne associable à une ligne d’horizon, qui évolue autour d'ambiances plus ou moins subjectives. La ligne symbolise ce qu’elle est dans son essence, c’est-à-dire un passage énergétique, un intermédiaire entre deux pôles...

<br />
<br />
<br />
</p>
</div>
<script language="JavaScript1.2">mmLoadMenus();</script>
<table width="855" height="555" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
<tr>
<td height="555" colspan="9" bordercolor="#CCCCCC"><table width="855" height="552" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="104" rowspan="3" valign="top"><div align="center"><img src="2.docs/monopagetype.gif" alt="monogramme" width="91" height="53" /></div></td>
<td width="14" height="12"></td>
<td width="73"></td>
<td width="103"></td>
<td width="126"></td>
<td width="89"></td>
<td width="118"></td>
<td width="97"></td>
<td width="131"></td>
</tr>
<tr>
<td height="19"></td>
<td valign="top" class="grandstitres"><a href="index.html">> HOME</a></td>
<td valign="top" class="grandstitres"><a href="2.peinture.html" name="link3" id="link1" onmouseover="MM_showMenu(window.mm_menu_0214095630_0,-30,15,null,'link3')" onmouseout="MM_startTimeout();">> PEINTURE </a></td>
<td valign="top"><span class="grandstitres"></span><span class="grandstitres"><a href="3.infographie.html" class="grandstitres">> INFOGRAPHIE</a></span><span class="grandstitres"> </span></td>
<td valign="top" class="grandstitres"><a href="4.objets.html">> OBJETS</a> </td>
<td valign="top" class="grandstitres"><a href="5.biographie.html">> BIOGRAPHIE</a> </td>
<td valign="top" class="grandstitres"><a href="6.contact.html">> CONTACT</a> </td>
<td valign="top" class="grandstitres"><a href="7.liens.html">> LIENS </a></td>
</tr>
<tr>
<td height="22" colspan="8"></td>
</tr>
<tr>
<td height="499" colspan="9"> </td>
</tr>
</table></td>
</tr>
</table>
<p class="grandstitres"> </p>
<p class="legendessss"> </p>
</body>
</html>
0
Aurelsicoko Messages postés 160 Statut Membre 4 > poulpette
 
c'est normal que ca ne marche pas sur les autres car c'est une fonctinnalit inventé par IE. Mais celle-ci n'a pas été validé par W3C donc voilà.

++
0
poulpette > Aurelsicoko Messages postés 160 Statut Membre
 
oui, j'ai vu que c'était des balises propriétaires de IE,
mais quand tu dis "donc voilà", tu veux dire qu'il n'y a pas de solution pour éviter les barres de défilement par défault des autres navigateurs ?
0
Réponse 2 / 2
pazz
 
non il n'y a pas de solution par contre tu peut t'amuser a faire un site flash ou un scroll en javascript ou autre mais les bar par default reste les bar par default et dailleur si jause me permetre je trouve souvant très moche quant les gent change la couleur du scroll de ie
0
poulpette
 
as-tu quelque chose à me proposer pour ce problème en javascript ?
Merci d'avance
0

Discussions similaires

Excel 365 + Windows 10 Arrêt défilement flèches
VALBRISE -
VALBRISE -

5 réponses
Excel - Ajuster Bare de défilement verticale.
stranger-46 -
messemble -

33 réponses
O barré horizontalement
JCB40 -
JCB40 -

3 réponses
Excel : les flèches déplacent le document
Hypergonar -
Hypergonar -

2 réponses
Touche arrêt défil sur clavier
munette -
inconnusoldat -

48 réponses