couleur de la scroll barre

[euphoria]

slt !

Je lutte pour changer la couleur de la scroll barre depuis une page modèle (template).

Ca marche nickel avec des pages normales, mais pas moyen dès que je rajoute une région modifiable

Quelqu'un aurait une idée ?

Merci d'avance

Ludo

[Ernestine]

Salut Ludo,

Tout d'abord, sache que :

1/ seul IE affiche des couleurs différentes pour les scrollbars

2/ le code qui change la couleur d'une scrollbar n'est pas conforme aux standards...

Ce qui fait deux raisons de laisser tomber ceci.

Si vraiment tu y tiens, dis nous au moins de quels templates du parles. Si c'est Dream, il n'y a aucune raison pour que ça ne fonctionne pas.

Au plaisir,

Ernestine

[Nissone]

C'est vrai que si tu nous donnais plus de précisions, on pourrait mieux t'aider.

Sur les deux remarques d'Ernestine, je me rappelle que quelqu'un avait dit, très sagement, à ce propos que si cela ne gène en rien les navigateurs qui ne le supporte pas, il n'y a aucune raison de s'en passer pour ceux pour lesquels ça marche.

Bien sûr, on peut se poser la question de savoir si on peut se permettre de toucher aux couleurs de l'ascenseur du navigateur, mais cela n'interdit pas la customisation des ascenseurs internes du site (textarea, par exemple)

Modifié 4 Novembre 2004 par Nissone

[LaurentDenis]

Si vous me permettez une remarque sur le fond : le contrôle de l'apparence des scrollbars n'est en effet pas "valide" en HTML-CSS "standard" pour la raison suivante : il faut bien, simplement, tracer une frontière entre:

- la page Web dont l'auteur définit la présentation (d'ailleurs modifiable par l'utilisateur)

- l'outil de navigation sur lequel l'auteur n'a pas à intervenir, car il intervient du coup sur les préférences et les besoins de l'utilisateur, dont il serait abusif et illusoire de vouloir contrôler le comportement.

Il se trouve que cette frontière exclut les barres de scroll...

[Denis]

Tout d'abord, j'abonde dans le même sens que Nissone et Ernestine, pour t'aider, il faudrait définitivement avoirlus d'information. Du code ou du moins, quelque chose de concret.

Sur les deux remarques d'Ernestine, je me rappelle que quelqu'un avait dit, très sagement, à ce propos que si cela ne gène en rien les navigateurs qui ne le supporte pas, il n'y a aucune raison de s'en passer pour ceux pour lesquels ça marche.

C'est le genre de trucs que j'aurais très bien pu dire sur ce forum à plus d'une reprise... c'est d'ailleurs l'approche préconisée pour recourir aux sélecteurs universels que MSIE ne supporte pas encore et qui permettent d'outre-passer les limitations de celui-ci en matière de CSS. Certains toutefois amènent le concept un peu plus loin et utilisent de telles règles (propriétaires), sachant que seuls certains navigateurs peuvent les interpréter.

C'est vrai avec les CSS pour modifier les scrollbars chez MSIE, et c'est aussi vrai pour les éléments de CSS-3 à venir et qui sont tout aussi propriétaires comme tous les -moz qui ne fonctionne que pour Gecko...

C'est tout aussi propriétaire, quoi qu'on en dise.

Si vous me permettez une remarque sur le fond : le contrôle de l'apparence des scrollbars n'est en effet pas "valide" en HTML-CSS  "standard"

Justement.... quelle différence avec -moz-border-radius et tous les autres ?

[LaurentDenis]

C'est vrai avec les CSS pour modifier les scrollbars chez MSIE, et c'est aussi vrai pour les éléments de CSS-3 à venir et qui sont tout aussi propriétaires comme tous les -moz qui ne fonctionne que pour Gecko...

C'est tout aussi propriétaire, quoi qu'on en dise.

Justement.... quelle différence avec -moz-border-radius et tous les autres ?

<{POST_SNAPBACK}>

La différence est nulle en CSS2. Mais elle apparaîtra avec CSS2.1, qui officialise et codifie le mécanisme des extensions propriétaires CSS: pour une question de syntaxe défectueuse (en particulier), les extensions CSS Microsoft ne seront pas reconnues comme valides, tandis que les extensions Gecko et Opera le seront.

Disons que ce mécanismes des extensions propriétaires valides est simplement un moyen direct et efficace de gérer les "avancées" de tel ou tel navigateur (Comment faire autrement pour permettre par exemple à Opera 7.60 d'implémenter expérimentalement les CSS vocales et la norme X-Voice ?)... Mais encore faut-il que chaque navigateur se plie aux règles communes, notamment syntaxique

Rappelons que CSS2.1 n'a guère d'autre rôle que d'être l'errata (final ?) de CSS2, et d'y faire la part de l'implémenté, de l'inutile... et du concret.

Modifié 5 Novembre 2004 par LaurentDenis

[Vincent]

avec tout ca, il n'y a personne qui a montré un bout de code concernant la solution du pourquoi du comment !

allez je me jette à l'eau (infestée de crocodile?)

body
{
scrollbar-face-color: #F18E91; 
scrollbar-shadow-color: #FFD1D2;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #F6989B; 
scrollbar-darkshadow-color: #EA5666; 
scrollbar-track-color: #CCCCCC; 
scrollbar-arrow-color: #FFFFFF;
}

[Denis]

avec tout ca, il n'y a personne qui a montré un bout de code concernant la solution du pourquoi du comment !

Arf, c'est vrai ça !

J'ai fait des recherches, mais je n'ai malheureusemen pas trouvé un lien que j'aurais aimé partager à ce sujet. Quelqu'un quelque part a déjà réalisé une représentation graphhique des différentes composantes de la scrollbar... ce qu'est le face-color, le shadow-color, etc. De mémoire, cette information était très utile pour bien identifier chaque portion de la scrollbar... Si quelqu'un sait de quoi je parle, ce serait sympa de fournir le lien.

[Vincent]

alors, c'est vrai que je n'ai pas été très complet sur le sujet, je vais me rattraper :

scrollbar-face-color:

defini la couleur du dessus des boutons et de la barre de défilement.

scrollbar-shadow-color:

defini la couleur sombre du relief des boutons (noir conseillé).

scrollbar-highlight-color:

defini la couleur claire du relief des boutons (blanc conseillé).

scrollbar-3dlight-color:

defini la couleur claire du relief des boutons quand ceux-ci ne sont pas enfoncés (noir conseillé).

scrollbar-darkshadow-color:

defini la couleur sombre du relief des boutons quand ceux-ci ne sont pas enfoncés (noir conseillé).

scrollbar-track-color:

defini la couleur du fond de la barre.

scrollbar-arrow-color:

defini la couleur des flèches.

et pour finir, j'ai trouvé un beau schéma représentant la scrollbarre

edit : voila un autre expliquant la scroll barre en couleur

Modifié 6 Novembre 2004 par Vincent B

[martin©]

Sans aucune envie de troller, je suis d'accord sur le fait qu'il faille bien définir une frontière entre le navigateur et son contenu, mais je ne vois pas en quoi les scrollbars internes feraient plus partie du logiciel que du site consulté. Plus précisement, je suis d'accord sur la scrollbar de la fenêtre, elle fait partie du navigateur, mais pas sur celles internes à la page. C'est d'ailleurs le comportement de IE 6 en mode strict (me v'là en train de défendre IE ). Je ne vois pas en quoi elles seraient plus "délicates" que les éléments de formulaires par exemple (qui d'ailleurs quand ils sont trop triturés sur certains sites, sont difficilement appréhendables).

Personnellement j'aurai aimé (mais c'est visiblement pas le cas) que le wc3 les introduise dans les css3, et les perfectionne.

Par contre, effectivement, c'est dommage que leurs syntaxes propriétaires ne soit pas conforme... Qui sait si un jour elles ne feront pas basculer un navigateur en mode quirk.

[LaurentDenis]

Sans aucune envie de troller, je suis d'accord sur le fait qu'il faille bien définir une frontière entre le navigateur et son contenu, mais je ne vois pas en quoi les scrollbars internes feraient plus partie du logiciel que du site consulté.

Les frontières sont effectivement malaisées à tracer, et toujours sujettes à caution...

Par contre, effectivement, c'est dommage que leurs syntaxes propriétaires ne soit pas conforme... Qui sait si un jour elles ne feront pas basculer un navigateur en mode quirk.

J'avoue que je vois mal cette hypothèse se réaliser : les navigateurs disposent déjà d'un mécanisme effectif de bascule entre modes de rendu CSS (le doctype switching) et disposeront à terme d'une option beaucoup plus "fine" (la propriété box-sizing applicable à volonté à n'importe quel sélecteur CSS).

CSS2.1 permettra justement de gérer les extensions propriétaires.

[Xavfun]

Hello,

Je suis également en train de "lutter" dans mon coin avec le CSS

Concernant la barre de défilement je trouve ça plutôt sympa.

Voici un petit truc qui pourra peut-être éviter à certain de chercher (comme ça à été le cas pour moi )

Si on fait ses pages avec Dreamweaver. Dès que l'on créé une page, le logiciel ajoute automatiquement la ligne

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

au tout début du code source.

Et si l'on met

CODE

body

{

scrollbar-face-color: #F18E91;

scrollbar-shadow-color: #FFD1D2;

scrollbar-highlight-color: #FFFFFF;

scrollbar-3dlight-color: #F6989B;

scrollbar-darkshadow-color: #EA5666;

scrollbar-track-color: #CCCCCC;

scrollbar-arrow-color: #FFFFFF;

}

ça ne marche pas, sauf si on retire la ligne

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Si on veut laisser cette ligne, il faut mettre les options de défilement dans la balise <body> de chaque pages.

Ou alors si quelqu'un à une astuce autre que ça, (Vincent peut-être ?), qu'il n'hésite pas

[Vincent]

désolé,

j'ai pas d'idée, mais bon ... j'ai pas tout compris ce que tu racontais et je ne connais pas dreamweaver... je fais tout dans un notepad amélioré moi

donc je reformule :

- la couleur des scrollbar ne fonctionne pas avec ton Doctype + parametre css

- la couleur fonctionne sans le doctype ou en mettant le parametre CSS dans l'attribut style de la balise HTML

tu es sur que tu teste avec IE au moins? car la couleur ne fonctionne que dans ces navigateurs.

[vincent_w]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quot;http://www.w3.org/TR/html4/loose.dtd">

Bonjour a tous

Je m'etais trompé au debut moi j'avais mis HTML 4 strict ben ça passe pas faut obligatoireement que ce soit en transitionnel.

Mon script de scroll est dans ma fauille de style

/* BOdy */

body {

    font-size: 13pt;

    background-color: #000000;

    color: #FFFFCC;

    font-family: "Times New Roman","Times","serif";

    /* Scrollbar Color */

    SCROLLBAR-FACE-COLOR: #000000;

    SCROLLBAR-HIGHLIGHT-COLOR: #000000;

    SCROLLBAR-SHADOW-COLOR: #000000;

    SCROLLBAR-3DLIGHT-COLOR: #666666;

    SCROLLBAR-ARROW-COLOR: #FFFFCC;

    SCROLLBAR-TRACK-COLOR: #333333;

    SCROLLBAR-DARKSHADOW-COLOR: #000000;

}

Je fais appel a ma feuille de style dans mon doc ensuite

<LINK href="style.css" type=text/css rel=stylesheet>

Pi ben ça marche Comme t'a explique vincent tu met tes couleur que tu veux

voyez vous meme page d'emple

Amicalement

vincent

[Xavfun]

est-ce que la casse à une importance ?

moi je met tout en minuscule, voici ce que j'ai mis sur un site (et qui marche sur IE)

body {	
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  scrollbar-face-color:#339900;
  scrollbar-arrow-color:#FFFFCC;
  scrollbar-track-color: #000000;
  scrollbar-3dlight-color: #ffcc00;
  scrollbar-darkshadow-color: #00FF33;
  color:#006600;
  A:hover {font-decoration: underline;
  A:active {color: #FFFF00;
 	 background-image: url(/fonds.gif)	}

j'ai pas d'idée, mais bon ... j'ai pas tout compris ce que tu racontais et je ne connais pas dreamweaver... je fais tout dans un notepad amélioré moi

moi je ne suis pas un prodige du Notepad

c'est vrai que parfois je ne suis pas super clair