Un probleme de scrollbar

salut tous,
Je viens de programmer le design de mon futur site web, et j'ai un souci, pour que le design colle a ce que j'avais en tête, je voulais un div contenant mon texte qui ait une talle fixe, et donc, une scrollbar, mais, le problème, c'est que la scrollbar me convient pas, elle n'est pas en accord avec mon design, apres mes recherches, j'ai vu que le css pouvait modifier ca, mais que c'est pas conforme au w3c, et que ca marche qu'avec IE et netscape, je me demande donc, comment faire... je commence a peine a me servir de l'xhml et du css, j'suis donc novice de chez novice...
Si au passage vous pouviez jeter un oeil a mon site pour me dire si des choses ne vont pas au niveau codage.. (je débute, alors soyez indulgents) (au passage, j'ai pas d'erreurs a la validation w3c...)

Merci d'avance de prendre un peu de temps pour moi

http://inzemixdesign.free.fr/
Modifié par inzemix (12 Mar 2008 - 19:22)

Hellouppe Inzemix, il y a ces 3 adresses, qui peuvent ptêtre te renseigner sur ta requête. Bon amusement ...

1
2
3

Sinon, y'a flash qui permet de genre de choses, mais niveau accessibilité c'est pas top je crois...
Modifié par FranZz (12 Mar 2008 - 20:14)

Bonjour

FranZz, c'est mieux d'indiquer un intitulé dans les liens : 1 2 3 c'est pas très parlant...

Ben, chais pas si la promo vers d'autres sites est toléré?

Bonsoir,

inzemix a écrit :
je me demande donc, comment faire...

- au minimum, ne pas modifier le rendu par défaut des scrollbars. C'est à la fois ringard à souhait et très discutable pour l'ergonomie (c'est fou les scrollbar personnalisées que les gens, du coup, ne voient plus).
- beaucoup mieux: ne pas faire de div scrollables et de pages qu-tiennent-dans -la hauteur-de-la-fenêtre-du-navigateur. Une page Web de media Screen n'est pas une projection (media projectio), ni un écran de télé, ni une page minitel. C'est assez lamentable également du point de vue ergonomique (sans parler de l'accessibilité quand le contenu scrollé ne comporte pas d'éléments susceptibles de recevoir le focus).

Mais au pire, si tu tiens vraiment à tout cela, utilise simplement les propriétés CSS IE qui permettent de le faire. C'est une cause mineure d'invalidité CSS, et une bien moins mauvaise solution que les autres astuces dans ce domaine.
Modifié par Laurent Denis (12 Mar 2008 - 20:49)

Bon, j'ai changé d'optique alors
Fini les div bloquées... (meme si je trouve que c'était plus joli (et de toute facon, mes pages de texte rentreront surement dans la taille de page d'origine mais osef..)
Donc, autre question, on m'a dit de faire les liens de mon menu en utilisant <ul><li>...</li></ul> et de mettre les images en css, mais il se pose le probleme de l'accessibilité pour cela... les navigateurs qui n'affichent pas les images vont avoir un probleme (je parle pas des sourds qui utilisent un logiciel de diction, etc...)
Mais, alors, je fais quoi..??
(si vous pouviez jeter un oeil a mon code source et a mon .css pour me dire quelles conneries ne pas faire, et comment améliorer tout ca

Bonsoir,

Sage décison

Les images de contenu (ou de navigation) qui nécessitent une alternative textuelle (attribut ALT) qui sera prise en compte par les lecteurs d'écran, par exemple, restent des images IMG HTML. Une image-lien, par exemple, reste toujours une image HTML avec un ALT qui désigne la cible du lien. De même pour l'image texte du bandeau.

Seules les images qui ne véhiculent pas d'information nécessaire à la compréhension de la page ou à la navigation deviennent des images de background CSS ou peuvent rester des images HTML, mais avec un attribut ALT="" (rien entre les deux guillemets).

(Sinon, ce sont plutôt les aveugles utilisant un logiciel de lecture d'écran auxquels tu pensais, je crois )

Si l'accessibilité t'intéresse, consulte le guide accessiweb, très pédagogique.
Modifié par Laurent Denis (13 Mar 2008 - 19:04)

Donc on m'a mal orienté, il ne faut pas mettre les liens comme on m'a dit, mais plutôt laisser comme c'est actuellement..??

(mais alors j'ai un problème pour les rollover et "on" (image du lien qui est différente des autres quand on est sur la page), il va falloir que je mette du js (grrrrr j'ai déjà assez de mal avec html et css^^ :'()

(et ouaip, je pensais plutôt aux aveugles^^ des fois, j'me relis pas assez souvent )
Enfin, l'accessibilité me parait être importante (bien que je pense pas que le nombre de pages visitées par des aveugles soient vraiment importantes... j'sais pas encore si je fais l'effort pour eux... mais toujours est il que mon problème est le meme pour les navigateurs qui n'affichent que du texte ou ne prennent pas en compte le css... sont chiants les gens, pourraient pas tous avoir un ordi en minimum 1024x768 et firefox (ou opera^^) comme navigateur, ca faciliterait la programmation web)
Bref, j'en ai marre, mais j'aime en chier, alors j'y retourne (ouaip, j'ai encore 2-3 choses a coder *se pend*)
Moi qui me disais que la prog web devait pas être si compliquée (j'suis des fois très crédule )
Modifié par inzemix (13 Mar 2008 - 20:02)

inzemix a écrit :
Donc on m'a mal orienté, il ne faut pas mettre les liens comme on m'a dit, mais plutôt laisser comme c'est actuellement..??

Oui, tout à fait.

Tu pourrais à la rigueur utiliser une liste, mais en gardant le même principe pour les images:

<ul id="menu_haut">
	<li><a href="index.html"><img src="sx_diz/sx_diz_boutonhor_accueil.png" alt="Accueil" class="images_lien" title="Accueil"></a></li>
	<li><a href="galerie.html"><img src="sx_diz/sx_diz_boutonhor_galerie.png" alt="Galerie" class="images_lien" title="Galerie"></a></li>
	<li><a href="quisuisje.html"><img src="sx_diz/sx_diz_boutonhor_quisuisje.png" alt="Qui suis-je?" class="images_lien" title="Qui suis-je?"></a></li>
	<li><a href="partenaires.html"><img src="sx_diz/sx_diz_boutonhor_partenaires.png" alt="partenaires" class="images_lien" title="partenaires"></a></li>
	<li><a href="blog.html"><img src="sx_diz/sx_diz_boutonhor_blog.png" alt="blog" class="images_lien" title="blog"></a></li>
	<li><a href="contact.html"><img src="sx_diz/sx_diz_boutonhor_contact.png" alt="contact" class="images_lien" title="contact"></a></li>
</ul>

Ça demande de gérer les styles des éléments ul et li dans ce code pour obtenir le résultat souhaité, mais rien de méchant.

inzemix a écrit :
(mais alors j'ai un problème pour les rollover et "on" (image du lien qui est différente des autres quand on est sur la page), il va falloir que je mette du js

Oui, dans ce cas les rollovers se font en Javascript.

Tu peux aussi envisager de découper tes images du menu autrement:
- une image de fond CSS sans texte (fond de style «onglet bleuté»);
- pour chaque item du menu, une image en PNG juste pour le texte (fond transparent) côté HTML, avec attribut alt correctement renseigné (comme actuellement).

Tu peux alors faire un rollover CSS qui ne change que l'image de fond (le texte gardera donc la même couleur dans ce cas).
Modifié par Florent V. (13 Mar 2008 - 22:18)

hello,
Ca c'est une super idée les images transparentes pour le texte en html et le reste en php pour les rollover, mais ça me demande de refaire tous mes boutons (et j'avais déjà fait les normaux, les "on" et les pour le rollover... j'vais m'y remettre ), et je risque aussi d'avoir du mal a faire en sorte que tout soit a sa place, mais ça mérite d'être essayé
Sinon, le reste du code n'est pas trop pire..??

Merci d'avoir pris de ton temps pour me répondre

inzemix a écrit :
Sinon, le reste du code n'est pas trop pire..??

Côté HTML, ça va. Tu pourrais juste avoir de vrais paragraphes de texte (éléments p distincts) plutôt qu'un seul paragraphe avec des br dans tous les sens. Séparer les paragraphes dans des éléments p permet une plus grande souplesse dans la mise en forme du texte.

Côté CSS, tu as un gros problème: tu as figé la hauteur et fait disparaitre la barre de défilement principale. Du coup, sur mon écran de portable (800px de hauteur tout de même!), toute la partie basse du site est invisible.

Conseil: ne jamais figer les hauteurs, et ne pas utiliser de barre de défilement interne pour les contenus. Ça ne passe jamais correctement chez tous les utilisateurs. D'ailleurs, tu remarqueras qu'il est très rare que les sites professionnels fassent ce genre de design.

Merci florent d'avoir pris un peu de temps
Mais, j'avais déjà fait une mise a jour en profitant d'infos piochées ailleurs

http://inzemixdesign.free.fr/inzedesign2/

Voila a quoi ce ressemble maintenant, me reste plus trouver comment faire pour régler le problème du corps ou j'ai mes images qui se superposent, faut aussi que je refasse mon image de fond car j'avais pas prévu de ne pas faire de design extensible mais je vais le faire, donc je repense un peu mes images
(les images qui colorent le corps, sont en jaune transparent, il y en a 3, une pour le haut, une pour le bas, et une pour le centre qui se répète, le problème c'est que celle du milieu su superpose a celles du haut et du bas, ce qui fait que ça fonce la couleur, et qu'on ne voit pas les arrondis... si quelqu'un a une solution, j'suis preneur )

Merci d'avance a ceux qui prendront un peu de temps pour m'aider
(en ce qui concerne les images de fond, je vais re-découper, c'est pour ça qu'il n'y a pas continuité en bas autour du corps, mais j'étais pas chez moi ce weekend, alors j'ai un peu laissé de coté )

Désolé du double post, mais je vois pas comment éditer mon post... (si y'a une astuce, j'suis preneur, faudrait que je modifie mon titre de départ, il colle plus trop a mes demandes... )

Donc, j'ai encore fait une maj, mais il me reste quelques soucis... (comment ca vous vous en doutez pour un newbie comme moi..?? )

J'ai réglé pas mal de mes problèmes, mais d'autres se posent
J'aimerai que ma partie blanche transparente soit au dessus de ma banniere (a environ la moitié entre le haut de la page et la bannière) (c'est une image de 1px qui se répète) et je trouve pas, quand j'essaie de la positionner, la bannière descend aussi, et si je remonte la banniere, le tout remonte... (c'est a en devenir fou vive le css ^^), j'aimerai aussi que cette partie blanche s'arrête avant le bas de la page (a a peu pres la meme distance que ce qu'il restera entre le haut de page et la bannière...)
Suis-je clair, si c'est pas le cas, hésitez pas a me le dire
Pis, une fois ca fait, je pense que je serais pas mal avancé (restera a régler le probleme des boutons, mais ca, je devrai y arriver, j'en ai parlé plus haut, faut juste que je les refasse avec le texte sur un fond transparent, et mettre en css les boutons...)
Je crois que mon probleme vient de la facon dont j'organise mes div, mais, j'sais pas trop comment m't prendre, j'ai déjà essayé de les tourner dans tous les sens, j'm'en sort pas...

Merci d'avance de vous pencher sur mon problème...

Pour vous faire gagner du temps:
<<le site>>
<<le .css>>

(je suis relou, mais j'apprends vite, une fois que j'aurai pigé tout le css, j'vous embêterai plus