css et balise select

Pour illustrer ma question précédente, et pour ne pas reposter un nouveau
post, pouvez vous me donner votre avis sur ce que j'ai pu faire en
xhtml-css. Sachant que : l'accessibilité est très importante pour moi.
Voilà l'adresse : http://www.vinyl-collector.com/TEST/

les soucis:

- pour le menu, on m'avait conseillé une technique (avec une seule image de
fond qui change de hauteur selon le survol) qui marche du feu de dieu sous
mozilla mais pas top du tout sous IE. Si qq1 a une idée pour optimiser le
truc (a mon avis faut se pencher sur un preload pour eviter de charger à
chaque fois.)

- Sinon, pour l'affichage de la liste des reponses, j'ai utilisé des
tableaux (ca me parait logique d'utiliser des tableaux pour ca mais j'ai
tellement lu de critiques sur l'usage des tab que j'ai un doute).Le souci,
pour cette liste justement, j'ai mis un cursor:hand; sur les lignes de
réponses. Mais cela ne marche pas sous mozilla.

- j'ai tjrs rien trouvé pour modif le style des balises select. Mais je vais
tenté de modif le style dans mon body des scrolls, je pense que ca devrait
marcher (car les styles se ressemblent. peut être sont ils liés...)

- Dernières question pour cette page: dans monjavascript le validateur aime
pas les deux & dans mes formules:
this.ns=(this.b=="ns"&&this.v>=4);
Si jamais qq1 a une idée...c'est la seule chose qui me manque pour être aux
normes!!!

Merci d'avance pour toutes vos remarques,idées,conseils pertinents!

Pour le problème de javascript : une balise CDATA a résolu mon pb.
;-)
Reste des souci de validation de ma feuille de style. Je m'y lance!
Jvé pas me laisser faire par un ptit validateur quand même!!!
Julien

put1 jsuis un boulet de chez boulet. Pour le cursor:hand, c'est pointer
qu'"il faut mettre...
Désolé...

*OUIFFI* a écrit :

xhtml-css. Sachant que : l'accessibilité est très importante pour moi.

Dommage car la sémantique du document est mauvaise.

« ::: 10 000 disques... » devrait être dans une balise H1.

L'image de la tête de lecture devrait être l'image de fond de la boîte
#Header car elle n'apporte rien à la compréhension du document. Ce qui
te permettrait de te débarrasser de ce div #Disque qui n'apporte rien.
Idem pour le #Logo, tu peux l'attribuer à l'image et en profiter pour y
mettre tous ces styles plutôt que d'utiliser un attribut style="...".

L'attribut alt du logo est bon, garde-le.

- pour le menu, on m'avait conseillé une technique (avec une seule image de
fond qui change de hauteur selon le survol) qui marche du feu de dieu sous
mozilla mais pas top du tout sous IE. Si qq1 a une idée pour optimiser le
truc (a mon avis faut se pencher sur un preload pour eviter de charger à
chaque fois.)

C'est un problème de gestion du cache de IE. Tu peux le régler sur
"Automatique" mais ça ne règle pas le problème chez les clients ;)

Ton menu a un grave problème de sémantique, tout ces liens à la suite
n'ont pas de sens. Tu devrais utiliser UL/LI que tu mettra en forme par CSS.

« Recherche Rapide » doit donc être un titre de niveau 2.

Pour le formulaire de recherche, il faudrait utiliser DL/DT/DD pour le
mettre en forme. DT pour l'étiquette, avec LABEL de préférence et DD
pour le champ. Ferme la liste, remet un titre H2 pour la recherche
avancée et ouvre une nouvelle liste de définition.

- Sinon, pour l'affichage de la liste des reponses, j'ai utilisé des
tableaux (ca me parait logique d'utiliser des tableaux pour ca mais j'ai
tellement lu de critiques sur l'usage des tab que j'ai un doute).Le souci,
pour cette liste justement, j'ai mis un cursor:hand; sur les lignes de
réponses. Mais cela ne marche pas sous mozilla.

Non non, c'est bien un cas d'école d'utilisation des tableaux. Ceci dit,
tu peux améliorer son accessibilité. D'abord l'attribut summary de TABLE
permettra de le décrire. Ensuite THEAD, TFOOT et TBODY devraient aider à
mieux le comprendre.

De toute façon, le (enfin les) tableau est à refaire. Cette coupure en 3
morceaux est une horreur. Une table ne fait qu'un et les cellules
d'entête doivent être signalées par des TH.

- j'ai tjrs rien trouvé pour modif le style des balises select. Mais je vais
tenté de modif le style dans mon body des scrolls, je pense que ca devrait
marcher (car les styles se ressemblent. peut être sont ils liés...)

Tu ne peux pas le contrôler, ça tient à la représentation que fait le
User Agent de SELECT.

- Dernières question pour cette page: dans monjavascript le validateur aime
pas les deux & dans mes formules:
this.ns=(this.b=="ns"&&this.v>=4);
Si jamais qq1 a une idée...c'est la seule chose qui me manque pour être aux
normes!!!

Il est fortement conseillé de mettre le code Javascript entre
commentaires HTML (<!-- ... -->) afin justement d'empêcher son
interprétation par les moteurs HTML. De toute façon, je te conseille de
le mettre dans son propre fichier. Comme ça, il pourra être partagé par
toutes les pages et mis en cache par les navigateurs pour accélerer la
navigation.

Merci d'avance pour toutes vos remarques,idées,conseils pertinents!

Tant mieux, j'ai pas fini :-)

Tu sers un document XHTML 1.1 mais en tant que "text/html". Je doute que
ça soit conforme. Tout au plus, reste à XHTML 1.0 (1.1 ne t'apporte rien
d'utile ici de toute façon).

Il y a trop de DIV dans ton document. Tu n'es pas obligé de tout
entourer de DIV. les Id et les styles peuvent s'appliquer à tout autre
élément.

En parlant des styles, il y en a trop dans les balises (attribut style)
et leur code est bien compliqué. C'est difficile à maintenir et tu joue
avec des propriétés capricieuses à mon avis.

Même remarque pour le pied de page que pour le menu, utilise une liste
UL/LI plutôt que d'aligner des liens à la suite. Dans l'idéal, tu ne
devrais pas avoir à mettre ce caractère séparateur car CSS 2 sait le
faire mais il manque son support dans un navigateur dont je tairai le nom...

Dans l'idéal, la partie la plus importante, le contenu, devrait se
placer avant le menu et la recherche dans le document mais je sais bien
que ce n'est pas facile de faire une mise en page CSS avec des colonnes
dans ce cas. Pense alors à mettre en début de document (avant le logo)
un lien "Aller au contenu" qui pointe vers un lien interne au document,
juste après l'ouverture du DIV central. Utilise un style CSS pour le
masquer à ceux qui ont un navigateur graphique "display: none".

Ouf ! Heureusement que je ferai pas des tartines comme ça tous les jours ;-)

--
Hervé

Wahoo ! Mille mercis j'ai jamais eu autant de conseils !!! C'est génial!
Mais forcément tout n'est pas clair !
Voilà entre autre ce qu'il faut que je cherche car je ne comprends pas du
tout:

L'image de la tête de lecture devrait être l'image de fond de la boîte
#Header car elle n'apporte rien à la compréhension du document. Ce qui
te permettrait de te débarrasser de ce div #Disque qui n'apporte rien.
Idem pour le #Logo, tu peux l'attribuer à l'image et en profiter pour y
mettre tous ces styles plutôt que d'utiliser un attribut style="...".

L'attribut alt du logo est bon, garde-le.

OK mais si je zappe le #Logo en mettant l'image en background (ce que j'ai
fait en ligne) je perds l'attribut alt qui semblait te plaire!!!

Pour le formulaire de recherche, il faudrait utiliser DL/DT/DD pour le
mettre en forme. DT pour l'étiquette, avec LABEL de préférence et DD
pour le champ. Ferme la liste, remet un titre H2 pour la recherche
avancée et ouvre une nouvelle liste de définition.

Alors là jsuis pommé à 200%, jamais entendu parler de ca faut que je fasse
une recherche!!! (DL ! DT ! DD ???) J'imagine que cela se nomme "liste de
définition"...

Non non, c'est bien un cas d'école d'utilisation des tableaux. Ceci dit,
tu peux améliorer son accessibilité. D'abord l'attribut summary de TABLE
permettra de le décrire. Ensuite THEAD, TFOOT et TBODY devraient aider à
mieux le comprendre.

Idem je connais pas ca, je vais faire une recherche !!!! Jamais entendu
parler de ca.

Il y a trop de DIV dans ton document. Tu n'es pas obligé de tout
entourer de DIV. les Id et les styles peuvent s'appliquer à tout autre
élément.

Ca me parait chaud d'en zapper beaucoup d'autre...mais je vais tâcher d'en
tenir compte. Cela dit je vois pas comment mettre une ligne calée en haut de
mon #content autremnt qu'avec une autre div...

En parlant des styles, il y en a trop dans les balises (attribut style)
et leur code est bien compliqué. C'est difficile à maintenir et tu joue
avec des propriétés capricieuses à mon avis.

Quelles sont les propriétés capricieuses? lesquelles sont à évitées?

Même remarque pour le pied de page que pour le menu, utilise une liste
UL/LI plutôt que d'aligner des liens à la suite. Dans l'idéal, tu ne
devrais pas avoir à mettre ce caractère séparateur car CSS 2 sait le
faire mais il manque son support dans un navigateur dont je tairai le

nom...

Donc je zappe complètement les séparateurs? C'est bien dommage.Mais je te
suis.

Pense alors à mettre en début de document (avant le logo)
un lien "Aller au contenu" qui pointe vers un lien interne au document,
juste après l'ouverture du DIV central. Utilise un style CSS pour le
masquer à ceux qui ont un navigateur graphique "display: none".

Y a t-il une technique pour savoir si le navigateur n'est pas graphique?
diplay:none sert à cacher un div? c'est l'équivalent de visible:hidden ?

Ouf ! Heureusement que je ferai pas des tartines comme ça tous les jours

;-)

En tout cas mille millions de mille merci pour moi grand chef!!!

Julien

*OUIFFI* a écrit :

OK mais si je zappe le #Logo en mettant l'image en background (ce que j'ai
fait en ligne) je perds l'attribut alt qui semblait te plaire!!!

Non, le logo tu le garde, c'est l'image du bras de lecture qui est de la
pure décoration.

Alors là jsuis pommé à 200%, jamais entendu parler de ca faut que je fasse
une recherche!!! (DL ! DT ! DD ???) J'imagine que cela se nomme "liste de
définition"...

Oui, ce type de liste est mal connu et c'est dommage car on peut faire
des choses formidables avec :

http://pompage.net/pompe/listesdefinitions/
http://www.btinternet.com/~historiae/gallery.html

La référence :

http://www.w3.org/TR/html401/struct/lists.html#h-10.3

et en français :

http://www.la-grange.net/w3c/html4.01/struct/lists.html#h-10.3

(au passage, des milliers de mercis aux traducteurs)

permettra de le décrire. Ensuite THEAD, TFOOT et TBODY devraient aider à

Idem je connais pas ca, je vais faire une recherche !!!! Jamais entendu
parler de ca.

C'est apparu avec HTML 4.

Ca me parait chaud d'en zapper beaucoup d'autre...mais je vais tâcher d'en
tenir compte. Cela dit je vois pas comment mettre une ligne calée en haut de
mon #content autremnt qu'avec une autre div...

« Votre recherche... » ? En réglant son margin et celui de son conteneur
à zéro, elle devrait se caler. C'est à H2 qu'il faut appliquer ce style.
Tiens, je me demande pourquoi le titre est en deux morceaux, avec deux
niveaux.

Quelles sont les propriétés capricieuses? lesquelles sont à évitées?

J'avais le souvenir d'avoir vu des z-index. Pas grave, j'étais pas
encore réveillé ;-)

Donc je zappe complètement les séparateurs? C'est bien dommage.Mais je te
suis.

Non non, justement, je te dis que tu ne peux pas t'en passer. Je signale
juste que c'est du travail de CSS en théorie.

Y a t-il une technique pour savoir si le navigateur n'est pas graphique?

La notion de graphique est floue. Avec w3m, un navigateur en mode texte,
je peux faire afficher les images si je suis dans une session graphique.
Ce n'est pas pour autant qu'il supporte les feuilles de style.

Tout au plus, tu peux avertir :

<p style="display: none">Votre navigateur ne supporte pas les CSS.</p>

Mais sérieusement, je ne vois pas et l'auteur d'un document HTML ne
devrait pas s'en soucier. C'est justement la grande force de HTML de
pouvoir s'adapter à tous les appareils susceptibles de l'interpêter.

diplay:none sert à cacher un div? c'est l'équivalent de visible:hidden ?

Le résultat n'est pas le même. "display: none" retire réellement la
boîte de l'affichage et l'espace qui lui était réservé. "visibility:
hidden" ne la fait pas afficher mais elle occupe toujours sa place.

Si tu utilise Mozilla (ou Firefox), pense à installer et utiliser la Web
Developer Toolbar :

http://www.chrispederick.com/work/firefox/webdeveloper/

--
Hervé

Tiens je remarque que tu as mis le bras de lecture en image de fond.
C'est bien mais tu as eu un mauvais réflexe.

Tu as fait une longue image noire avec une photo au bout. L'image finale
fait 3.73 Ko. Il y a moyen de réduire ça à quelques centaines d'octets.

En plus, tu avais bien commencé puisque tu avais écrit :

background-color:#000;
background: url("./img/header.gif") top right no-repeat;

Tu peux le concentrer sur une ligne et te contenter de ne mettre que
l'image du bras comme image de fond. Les navigateurs vont en fait
afficher ta couleur de fond puis caler à droite cette image.

Et voilà comment virer 36250 pixels inutiles !

Retiens aussi l'autre économie qui consiste à mettre les lignes
concernant le background ensembles, tous ces caractères en moins à
trasmettre.

Tout ce qui peut aider à charger les pages plus rapidement est le
bienvenu. N'est-ce pas messieurs et mesdames les possesseurs de
connexion bas-débit ? :-)

Évite quand même d'en abuser en rendant tes sources illisibles et donc
difficiles à maintenir.

Allez hop, je vais aller garder mes propres moutons !

--
Hervé

Bonjour ! Avant tout re-merci à ceux qui m'aident régulièrement.
voici où j'en suis, j'ai bien avancé je pense par rapport à toutes les
remarques d'Hervé.
http://www.vinyl-collector.com/TEST/

Reste qq questions :

1- au niveau des <dt> je ne vois pas du tout comment faire en sorte qu'il
n'y ait pas de marge. J'ai pourtant tout tenté...
(la zone "recherche test" a été rajouté pour mettre en évidence mon souci)

Voici ce que j'ai mis:

<h2>Recherche test</h2>
<dl class="recherche">
<dt>Test</dt><dd><select id="genre" name="genre"
class="selectRech"><option id="genre1" value="genre1" /></select></dd>
</dl>

et la feuille de style:

.recherche dl {
margin: 0px;padding:0px;
}

.recherche dd {
margin: 0px;padding:0px;
}

.recherche dt {
margin: 0px;padding:0px;
padding-left:10px;
background-image: url("./img/fd_menu.gif");background-repeat: no-repeat;
font: bold 11px Verdana,Geneva,Arial,Helvetica,sans-serif;color:#000;
}




2- Sinon, au niveau de l'assemblage tel que me l'a préconisé Hervé tout est
ok pour moi, mais je ne vois pas comment insérer mon bouton submit .(qui
doit être après le input du titre) dans mon menu. J'ai ca :

Voici ce que j'ai mis:

<h2>Recherche rapide</h2>
<dl class="recherche">
<dt>Artiste</dt><dd><input id="artist" value="" class="inputRech" /></dd>
<dt>Titre</dt><dd><input id="title" value="" class="inputRech" /></dd>
</dl>

<input type="submit" id="submit" value="ok" class="submitRech">

Or ce n'est pas très cohérent. Qui plus est j'aimerais bien le placer à la
droite du dernier <input>...



3 - Au niveau des espaceurs de mon footer, je voudrais le symbole | entre
mes liens, mais j'ai pas compris ce que m'a dit Hervé. A priori c'est la
feuille de style qui doit prendre ca en charge? Comment?

Voici ce que j'ai mis:

<div id="Footer">
<ul>
<li><a href="mailto:contact@ouiffi.com">Webmaster</a></li>
<li><a href="mailto:contact@vinyl-collector.com">Contact</a></li>
<li>&#169;Copyright 2004</li>
</ul>
</div>

et la feuille de style:

#Footer {
margin:0;padding:0;
height:12px;
background-color:#000;
}

#Footer ul {
list-style-type:none;
margin:0px;padding:0;
margin-left:510px;
left:540px;
color: #FFF;font-size: 10px;font-weight: bold;
}

#Footer li {
display:inline;
padding-left:15px;
}
#Footer a {
text-decoration:none;
color: #FFF;font-size: 10px;font-weight: bold;
}


4- Enfin , Hervé m'a dit que j'étais trop friand des balises div et que j'en
mettais trop. Or,
j'ai
* header
* content
* menu
* body
* footer

Le souci est au niveau du body que j'aimerais diviser en 3 avec un topBody,
un centerBody et un bottomBody. (comme c'est fait en ligne) Pour cela j'ai
dû rajouter 3 balises div au seing de mon div body. Je pense que cela n'est
pas optimisé au niveau technique et sémantique. QQ1 peut il me conseiller
sur la marche à suivre? Il faut que mon topBody soit toujours calé en haut
de mon body et que mon bottomBody se cale en bas.


5 - Petite chose aussi qui m'embête : pour mon tableau affichant la liste
des disques, j'ai un truc qui marche bien avec la feuille de style suivante
table { ... } th { ... } td { ... }
Or il serait à mon sens utile de créer une classe pour cette mise en forme
mais ca implique non seulement que je mette
<table class="results"> mais que j'indique cela sur tous les th et les
td???? Or si je le fais il ne prends plus en compte mes feuilles de style..
je mets alors .results table{} .results th {} et .results td{}. Mais ds ce
cas ca marche plus...


MERCI POUR TOUS CEUX QUI POURRONT M'AIDER !
Julien

Julien Trotoux a écrit :

Bonjour ! Avant tout re-merci à ceux qui m'aident régulièrement.
voici où j'en suis, j'ai bien avancé je pense par rapport à toutes les
remarques d'Hervé.
http://www.vinyl-collector.com/TEST/

J'ai testé une version nettoyée de mon coté. C'était un bon exercice
mais facile vu que je n'ai regardé le résultat que sur Mozilla.

J'ai placé le résultat sur
http://herve.cauwelier.free.fr/Vinyl-Collector.html (c'est même la
première fois que je m'en sers !). Dis-moi au plus vite en privé si tu
veux que je les retire.

Reste qq questions :

1- au niveau des <dt> je ne vois pas du tout comment faire en sorte qu'il
n'y ait pas de marge. J'ai pourtant tout tenté...
(la zone "recherche test" a été rajouté pour mettre en évidence mon souci)

J'en ai moins que toi mais je n'ai pas vu pourquoi. Par contre, j'ai un
problème d'alignement.

2- Sinon, au niveau de l'assemblage tel que me l'a préconisé Hervé tout est
ok pour moi, mais je ne vois pas comment insérer mon bouton submit .(qui
doit être après le input du titre) dans mon menu. J'ai ca :

Je le met soit dans un DD à la suite, soit dans un P.

Or ce n'est pas très cohérent. Qui plus est j'aimerais bien le placer à la
droite du dernier <input>...

"align: right" dans ce cas.

3 - Au niveau des espaceurs de mon footer, je voudrais le symbole | entre
mes liens, mais j'ai pas compris ce que m'a dit Hervé. A priori c'est la
feuille de style qui doit prendre ca en charge? Comment?

Ça c'est la théorie, en pratique je fais ça :

<li><a href="">Conditions générales</a>&nbsp;|</li>

4- Enfin , Hervé m'a dit que j'étais trop friand des balises div et que j'en
mettais trop. Or,
j'ai
* header
* content
* menu
* body
* footer

Il y a ceux-là qui ne servent à rien :

Logo (attribué à IMG dans Header)
Body (vu j'ai sorti menu de content, ils s'opposent justement)
TopBody (H2 fait ça très bien)
Centerbody (n'apporte rien)
Footer (attribué à UL dans Footer)

Sinon il y a tous les disque1G, disque1D, etc. qui servent un effet
visuel. Je ne m'en suis pas occupé. Il y aurait pourtant pas mal
d'optimisations à faire car trop de redondance. Je suis que c'est
faisable en pur CSS mais je pense que IE va mal digérer le "TR:hover"
avec changement de couleur de fond et "TR:hover TD.gauche" et "TR:hover
TD.droite" avec changement de l'image de fond (chacun sa flèche).

Il faut que mon topBody soit toujours calé en haut de mon body

Aucun problème avec un bon vieux titre.

et que mon bottomBody se cale en bas.

Là j'ai pas su faire autrement.

5 - Petite chose aussi qui m'embête : pour mon tableau affichant la liste
des disques, j'ai un truc qui marche bien avec la feuille de style suivante
table { ... } th { ... } td { ... }
Or il serait à mon sens utile de créer une classe pour cette mise en forme
mais ca implique non seulement que je mette
<table class="results"> mais que j'indique cela sur tous les th et les
td???? Or si je le fais il ne prends plus en compte mes feuilles de style..
je mets alors .results table{} .results th {} et .results td{}. Mais ds ce
cas ca marche plus...

Heu déjà là tu définis le style de toutes les tables du document. J'ai
préféré les réserver à celles à l'intérieur de #Content.

Ensuite, écrire "<table class="results">" ça veut dire avoir en CSS :

table.results {...}

et ses sous-éléments sont stylés par :

table.results tr {...}

et ainsi de suite.

Ou alors ta syntaxe mais avec tous les styles injectés dans les balises
elles-mêmes, difficile de le savoir, hein.

Si ta CSS ne semble plus marcher, passe-là au validateur. C'est souvent
une erreur de syntaxe. Sinon ça peut être le cache du navigateur.

En parlant de validation, tu prétendais faire du XHTML mais tu en étais
loin niveau syntaxe.

Une dernière note, je ne sais pas comment tu fais pour te relire sans
indentation cohérente et avec plusieurs élements sur une même ligne :-)

--
Hervé

Merci pour tout ces conseils j'ai donc de quoi m'occuper ! j'ai regardé ca
ce matin tout semble ok.
J'ai reussi à intégrer tout ca avec mon code php et mes templates.
Je relance donc quiconque saura me placer la barre jaune sous la liste de
resultat en bas de mon content. (pas trop esthetique sinon...
pour finir, toutes tes balises sont en maj et les attrbuts sans guillements:
c'est pas vraiment aux normes je me trompe?
Mille mercis encore à toi hervé et aux autres s'ils ont ma solution pour la
barre jaune.
ciao tutti !