feuille de style externe

[klaviebel]

Merci Mongo Bob d'avoir pris le temps de regarder tout ça...
Je vais donc appliquer les changements.

Pour la largeur, ne mets pas de pixels mais un pourcentage qui te convient, type 80% pour que ça s'adapte sur toutes les résolutions.

oui, j'ai vu Chinon37 en parler dans un post. Du coup dans mon "div je sais plus" j'ai mis 100% pour qu'il s'applique à toute les largeurs d'écran (dixit Chinon37)
Bon, j'avoue que cet histoire de block, j'ai pas tout compris, et je l'ai fait un peu au feeling...

Grosse bourde :
Code:
<p class="centrer"><a href="accueil.html" title="Cliquer pour aller à la page d'accueil"/><img src="boutons%20de%20navigation/entr%E9e.gif" alt"bouton pour entrer dans le site"></p></a>

Un <p> est fait pour contenir du texte, ici, y'en a pas , enfin une image-texte mais c'est pas du texte pour autant (ah, mais c'est peut-être pas fini, au fait!). Il y a un lien (<a>) dedans mais le </a> est après le </p>. Aïe! Et pourtant le lien marche quand même, c 'est tout klaviebel, ça! Clin d'oeil Je me demande comment il peut marcher, ton lien Choqué

j'avais au départ mis <img> au lieu de <p> puisque comme tu le remarques si justement c'est une image et non un paragraphe... mais le lien ne marchait pas.... d'où l'idée, farfelue certes, de <p> et ça marche... alors....

Je te dirais bien un truc à propose de l'accessibilité aux non-voyants, mais une chose à la fois (en gros, les images-texte, c'est moins bien que les vrais textes, bon, on verra).

si tu as des liens qui parlent de tout ça, je suis preneuse...

C'est trés bien d'utiliser les commentaires ("/* et */ ) pour te faire des mémos

L'idée ne vient pas de moi, c'est dans un tuto que j'ai pris l'idée (merci le site du Zéro)...

quels progrès par rapport à la semaine dernière...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[klaviebel]

Mongo Bob, je reviens sur l'idée de l'adaptabilité de mon site pour les personnes mal voyantes... Est-ce qu'il faudrait changer beaucoup de choses dans le mien ? Ou alors, idée farfelue (mais j'aime bien... )
je pourrais par la suite en refaire un autre qui serait complètement adaptée... (c'est faisable ou idiot?)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[chinon37]

Il suffira de faire une feuille de style spécifique... Il est même possible d'adapter directement le site existant en mettant encore un peu plus de rigueur dans le code

[klaviebel]

en mettant encore un peu plus de rigueur dans le code

...


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[Mongo Bob]

Autant tout faire bien dés le début, voici le lien d'un validateur comme celui du W3C, mais axé sur l'accessibilité :
http://validateur-accessibilite.apinc.org/

Regarde ce qu'il dit sur ton site, en collant l'adresse http://klaviebel.free.fr/ dans la fenêtre. Ce qu'il y a de bien, c'est qu'il donne énormément d'explications sur comment réparer une erreur : clique sur l'erreur et il te dit quoi faire. L'avantage sur celui du W3C, c'est que les expli sont plus claires, à part ça, c'est pareil.
Les règles d'accessibilité aux non-voyants se confondent avec les règles d'accessibilité aux moteurs de recherche...
Un exemple : actuellement, ton menu est entièrement fait d''images, donc ton menu est inaccessible et aux machines utilisées par les non-voyants et par une machine comme le moteur de recherche de Google!
Exemple, tu n'as pas indiqué la langue de ton site, le validateur ci-dessus a vu l'erreur et donne cette solution :
http://validateur-accessibilite.apinc.o ... /04_3_lang
C'est vachement bien, on apprend plein de choses! Essaie! A+

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[klaviebel]

Effectivement, c'est efficace ce validateur. Merci.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[klaviebel]

Donc, enlève "absolue" dans position pour le bloc <div id="page">, mets "Non défini"'.

J'ai essayé mais ça n'a pas marché... mon bloch c'est collé sur le côté gauche... je suis donc revenue à "absolue" +

Pour la largeur, ne mets pas de pixels mais un pourcentage qui te convient, type 80% pour que ça s'adapte sur toutes les résolutions. Du coup, pour le <table> à l'intérieu du <div> : aussi une largeur en pourcentage (par rapport au <div> qui le contient bien sûr)."

je l'ai fait et effectivement ça marche (même sous IE)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[Mongo Bob]

J'ai essayé mais ça n'a pas marché... mon bloch c'est collé sur le côté gauche... je suis donc revenue à "absolue" +

Un bloc avec margin auto en marge gauche et droite qui se déporte sur la gauche alors qu'il est en position "Non définie"?
J'ai pris ton code, je l'ai fait chez moi et le bloc #page se centre... Curieux, curieux... dirais-je...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[klaviebel]

j'y comprends plus rien aujourd'hui.... oui, effectivement expliqué comme ça, ça parait logique... m'en vais donc réessayer....

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[klaviebel]

ça marche....

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[chinon37]

si je puis me permettre, je ne parlerais pas trop fort... puisque tu es un peu énervée...

Pour centrer ta première page:
body >alignement du texte centré et espacement 13%, position non définie

#page > position relative , marges gauche et droite auto
C'est la méthode la plus catholique ou orthodoxe ou etc...

testé sous IE et FF

[Mongo Bob]

ça marche....

ouf!...
chinon37:
Elle fera bien ce qu'elle veut, mais c'est position "non définie", que je préconise.
A+

PS : D'ailleurs, je mettrais aussi le <body> en margin gauche droite auto et Non définie...


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[chinon37]

bah! allez, un arbitre:
http://css.alsacreations.com/Faire-une- ... web-en-CSS
Après, chacun fait comme il veut... Mais si la page évolue en complexité, autant partir sur de bonnes bases

Quel intérêt de mettre le body en marges auto???

[Mongo Bob]

Quel intérêt de mettre le body en marges auto???

Absolument aucun, je me suis planté, j'ai fait du html toute la journée. Plutôt toutes les marges à 0 pour le <body>, ça aide.

Ton lien de ton site inconnu (smiley superflu, je suppose?) précise bien :

Exemple de conteneur prévu pour un contenu avec des éléments positionnés :

#global {
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
width: ...;
text-align: left;
}

Je parlais du bloc contenu pas du conteneur, d'où la confusion.
Je dirais que ma remarque est valable pour 1/un bloc dans le flux inséré dans un bloc dans le flux aussi ((ce qui se justifie dans le cas de la page de klaviebel) ou 2/ un bloc dans le flux inséré dans un bloc positionné mais jamais dans 3/un bloc positionné (pas dans le flux) inséré dans un autre bloc ou pas, d'ailleurs.

Si tu as un bloc contenu positionné tu dois en effet positionner aussi le conteneur éventuel en "relative" avec margin:auto gauche droite (exemple Alsa).
Pour la page de klaviebel, son div #page peut trés bien être en Non défini margin:auto g et d, mais avec un <body> en Non défini aussi (effectivement, margin:auto complètement inutile, par contre pour ce dernier).


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[chinon37]

les sondages après ce débat donnent 50/50