Tutoriels vidéo art graphique gratuits

 
Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Pages: [1]   En bas

Auteur Sujet: Agir sur les scrollbar avec les CSS ?  (Lu 6977 fois)

Adel

  • Wisi J'habite sur le forum
  • ****
  • Hors ligne Hors ligne
  • Messages: 403
    • Live Messenger (MSN) - adelkamel@hotmail.fr
    • Voir le profil
    • Adel Kamel - Porte Folio
    • E-mail
Agir sur les scrollbar avec les CSS ?
« le: février 19, 2010, 13:25:46 pm »

Bonjour tout le monde,

Je travail en ce moment sur mon projet de fin d'étude, il s'agit d'un site Web pour une association.

Pour présenté du contenu rédactionnel, j'ai opté pour une boite aux dimension fixe, si le contenu dépasse, une barre de scroll sera affiché. (l'image en pièce jointe sera plus explicite  ;)).

Voila mon soucis, j'aurai aimé savoir si il existe une petite astuce pour agir sur la barre de scroll (peut-être avec les CSS ??) afin de pouvoir la déplacer légèrement sur la gauche afin que le contour vert soit parfaitement visible.

Voici le code HTML du bloc :
<div id="conteneur">
                <div id="titre_01"><img src="../images/bloc_texte/titre_vert_01.png" alt="" width="447" height="32" /></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet mauris at sapien iaculis pulvinar. Morbi ut mi in felis fringilla semper. </p>           
            </div><div id="footer_01"><img src="../images/bloc_texte/titre_vert_03.png" alt="" width="447" height="9" /></div> 
          </div>


Ainsi que le code CSS associé
@charset "utf-8";

#conteneur {
width:447px;
margin-top:32px;
margin-left:16px;
background:url(../images/bloc_texte/titre_vert_02.png) repeat-y top left;
}


#conteneur p {
padding:10px;
max-height:150px;
overflow:auto;
}

#titre_01 {
width:447px;
height:32px;
}

#footer_01 {
width:447px;
height:32px;
margin-left:16px;
background:url(../images/bloc_texte/titre_vert_03.png) no-repeat top left;
}

Merci pour votre aide.

Adel
IP archivée

Adel

  • Wisi J'habite sur le forum
  • ****
  • Hors ligne Hors ligne
  • Messages: 403
    • Live Messenger (MSN) - adelkamel@hotmail.fr
    • Voir le profil
    • Adel Kamel - Porte Folio
    • E-mail
Re : Agir sur les scrollbar avec les CSS ?
« Réponse #1 le: février 23, 2010, 21:27:42 pm »

Bonsoir tout le monde,

Pas d'idée personne ?

Adel
IP archivée

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : Agir sur les scrollbar avec les CSS ?
« Réponse #2 le: février 24, 2010, 05:20:45 am »

Salut.
Essaye de placer le padding dans le conteneur et non dans les paragraphes.
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

Adel

  • Wisi J'habite sur le forum
  • ****
  • Hors ligne Hors ligne
  • Messages: 403
    • Live Messenger (MSN) - adelkamel@hotmail.fr
    • Voir le profil
    • Adel Kamel - Porte Folio
    • E-mail
Re : Agir sur les scrollbar avec les CSS ?
« Réponse #3 le: février 24, 2010, 13:25:03 pm »

Bonjour Edfred,

Merci pour tes indications, elles m'ont misent sur la voie.

.conteneur {
width:447px;
margin-top:32px;
margin-left:15px;
margin-right:12px;
float:left;
background:url(../images/bloc_texte/contour_vert.png) repeat-y top left;
}


.conteneur p {
padding:10px;
max-height:150px;
overflow:auto;
text-align:left;
line-height:15px;
width:420px;
}

J'ai ajouté un "width" au .conteneur p; ce dernier est de moindre taille que celui du conteneur principal et ça marche parfaitement sur tout les navigateurs que j'ai testé :

Internet Explorer 8 (les précédentes version d'IE, 5, 6, 7 donnent une mise en page catastrophique... )

Firefox 3.6
Google Chrome 4
Safari 4
et Opera 10

Cordialement,

Adel
IP archivée

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : Agir sur les scrollbar avec les CSS ?
« Réponse #4 le: février 24, 2010, 16:36:39 pm »

Sais-tu aussi que dans cette config, tu auras une barre de scroll à chaque paragraphe inséré dans le conteneur ?
Ça risque d'être barbant…
Perso j'aurais placé le overflow dans le conteneur.
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

shawn123

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 1
    • Voir le profil
Re : Agir sur les scrollbar avec les CSS ?
« Réponse #5 le: décembre 10, 2010, 06:13:31 am »

hi guys,..
trying changing it from body to html, that's what worked for me.

html {
  scrollbar-arrow-color:#663333;
  scrollbar-track-color:#cccc99;
  scrollbar-shadow-color:#cccc99;
  scrollbar-face-color:#cccc99;
  scrollbar-highlight-color:#cccc99;
  scrollbar-darkshadow-color:#663333;
  scrollbar-3dlight-color:#663333;
}

i hope this will helps,..
thanks,..
 



Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.
Contact - Wisibility est une marque déposée

Blog - Tutoriels - Wisi TV - Forum