Comment faire un champ de texte avec ce type de scrollbar ?

Comment faire un champ de texte avec ce type de scrollbar ? - HTML/CSS - Programmation

Marsh Posté le 07-04-2004 à 08:23:15    

Bonjour, étant limité dans la hauteur de mon site web, je suis forcé de faire un scroll via les CSS pour le défilement du texte, comment le réaliser ?
 
Voici a quoi ressemble le scroll (ici il est super joli mais c'est juste pris comm exemple)
 
http://olbi.free.fr/scroll.jpg
 
PS : il s'agit d'ajouter un champ de texte avec un scroll et non betement changer le scroll de la barre du browser...
 
Important : mon site doit etre valide XHTML STRICT donc voilà...
 
Merci de m'aider  :hello:


Message édité par Dolby le 07-04-2004 à 08:34:45
Reply

Marsh Posté le 07-04-2004 à 08:23:15   

Reply

Marsh Posté le 07-04-2004 à 08:33:08    

Tu as regardé le code source de la page que tu nous mets ?  
 
Par hasard ?
 
Si c'est non alors fonce, suis sûr que tu trouveras ton bonheur.

Reply

Marsh Posté le 07-04-2004 à 08:35:53    

tu met un div et tu lui attribut des dimensions fixes puis le style css overflow:auto

Reply

Marsh Posté le 07-04-2004 à 08:38:48    

C'est ok pour l overflow, mais maintenant je voudrais modifier les attributs de la barre (la rendre plus petite par exemple) comment faire ?


Message édité par Dolby le 07-04-2004 à 08:45:49
Reply

Marsh Posté le 07-04-2004 à 08:46:10    

testé ton code avec mozilla et ie 6.0, ça marche parfaitement avec le overflow:auto !!
 
Edit : tu peux changer les couleurs de la scrollbar avec les css, mais
- ça ne marchera qu'avec ie
- tu ne pourras pas changer la taille de la barre
 
-> tu dois faire des pseudo scrollbars (avec un peu de javascript) pour faire ce que tu veux. En vaut-ce la peine ?


Message édité par deliriumtremens le 07-04-2004 à 08:48:01
Reply

Marsh Posté le 07-04-2004 à 08:52:51    

non ca ne vaut pas la peine, sinon j'ai un nouveau souci, il y a un scroll de haut en bas (ca OK) mais aussi un de gauche a droite alors qu'on voit pourtant tout le texte dans la fenetre et ca m'embete ! Comment l'enlever ? J'ai modifier les tailles du width de mon bloc mais ca ne change rien il est tj là, que faire ?
 
http://olbi.free.fr/scroll2.jpg

Reply

Marsh Posté le 07-04-2004 à 09:48:53    

Dans ton style
 
overflow-y:auto;
 
EDIT : foire avec Mozilla, âne que je suis...
 
Mais bon tu devrais pouvoir faire sans, ça me paraît bizarre. Ca viendrait pas de tes autres styles ?


Message édité par deliriumtremens le 07-04-2004 à 09:55:38
Reply

Marsh Posté le 07-04-2004 à 11:06:52    

<div id="scrollbar">
   <div id="bloc_texte">
   </div>
</div>
 
#scrollbar {
width: 600px;
overflow: auto;
}
 
#bloc_texte {
width: 550px;
left: 50%;
margin-left: -275px;
}
 
Cela devrait marcher : ton texte n'aura pas plus de 550px de large


---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !
Reply

Marsh Posté le 07-04-2004 à 19:35:43    

essaie avec:  
 

Code :
  1. overflow: auto;
  2. overflow-x: none;


 
Mozilla tiendra compte du premier et IE tiendra compte des deux (le second devrait avoir l'ascendant pour la barre horizontale en théorie mais j'ai pas testé).
 
overflow-x et overflow-y sont dans le document de travail pour les css3. Ce sera à priori standard à l'avenir donc.
 
Le rapport de bug pour Mozilla:
http://bugzilla.mozilla.org/show_bug.cgi?id=72747#c3
 
Le lien pointe sur le troisième commentaire qui indique les équivalents dans gecko.
 
En utilisant ces extensions gecko, tu ferais alors:
 

Code :
  1. overflow-y: auto;
  2. overflow: -moz-scrollbars-vertical;


 
(Pour le cas où la première proposition ne fonctionnerait pas)


Message édité par bobe le 07-04-2004 à 19:36:27
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed