Discussion :

[redah75]

Bonjour,

J’ai réussi à personnaliser les boutons de type button et aussi sous forme de lien <a> j'avoue avoir eu trop de mal pour que ca soit compatible avec tous les navigateurs. Mais mon souci actuellement et que si je fais un truc du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<p><button type="submit" class="btn">Valider</button></p>
<p>ici un texte</p>

Mon texte est place au même niveau que le bouton et cela m'oblige de rajouter un <br> après le bouton, est-ce normal? Y a-t-il un remède??
Voici la page concernée: www.moroccan-arts.co.uk

Merci

[Michel Rotta]

Testé sur FF3, FF4, Iron, Opera, IE8.

Sur les 4, la page est correctement affiché, le texte est sous le bouton.

Avec quoi as-tu testé ?

[redah75]

Merci d'avoir répondu.
Je travaille sur mac, j'ai alors testé avec Safari et FF5
Si tu vas par exemple sur http://moroccan-arts.co.uk/ pour afficher le texte en bas du bouton, j'étais obligé de mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="clear-30 clear-both"><h5 class="brick"><b>Moroccan Arts ensures that the information you provide will remain strictly confidential.</b></h5></div>

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.clear-both: clear: both;

Avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<p><h5>Moroccan Arts...</h5></p>

le texte est placé en haut à droite du bouton

Est-ce à cause de la balise <p> qui est mal personnalisée dans mon fichier .css??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
p {
	margin: 0 0 6px 0;
}

[Michel Rotta]

Si tu as une version 5 de FF, je prends !!!

Bon, plus sérieux, j'ai juste affiché ta pages dans tous mes explorateurs sous windows et linux.

Mais sans entrer dans le code, là, j'ai eu le malheur d'ouvrir mon cafard préféré (firebug) et j'en ai pris plein les yeux.

Il faut absolument sortir le code CSS du html pour le mettre dans une feuille externe.

Donc les critiques vont être plus incisive (comme quoi, joli pour les yeux n'est pas nécessairement bien programmé).

Donc ce que j'aurais fait (ou pas suivant le cas):

• Pas de code CSS dans la feuille partie html sauf exception exceptionnel (ici, rien ne le justifie). De plus le code est correctement balisé en id et class pour que l'on puisse tout adresser correctement depuis la feuille CSS.
• Le titre n'existe qu'en tant que logo. Il serait intéraissant de l'avoir, même caché (blanc sur blanc) dans un titre de lvl1 pour le référencement (ou de ne garder que le logo en image (mieux).
• J'aurais mis le texte d'intro du formulaire hors "Welcome to ... Thanks you" hors de la balise form. Et dans trois paragraphe <p> sans <br /> (tu es en transitional xhtml, <br> s'écrit alors <br />
• Idem pour l'image du titre, finir par ... />
• Les deux div pour faire de l'espace c'est limite divite. on peut parfaitement gérer cela dans la css sans pseudo contenu parasite.
• Les classes span watermarker imbriquée gagnerait à perdre leur horrible paramètre style au profit d'un transfert dans la feuille de style.
• Ensuite, le texte de fin, sort le du form. Et pourquoi diantre hérite-t-il d'un h5 ??? qui n'a aucune valeur hiérarchique ? Un bon <p> avec, éventuellement une classe.

Donc, pour résumer, plus de balise style dans le document (rien ne le nécessite) et revoir la structure pour qu'elle soit le reflet du contenu (pas de div pour faire beau).

Et, vu que tu as FF sur ton poste, utiliser firebug pour aller vois élément par élément les styles pris en compte et d'où il les choppes.

[redah75]

Pourtant, je suis hyper maniaque dans mes codes...

as de code CSS dans la feuille partie html sauf exception exceptionnel (ici, rien ne le justifie). De plus le code est correctement balisé en id et class pour que l'on puisse tout adresser correctement depuis la feuille CSS.

C’est, mais la page index.php est temporaire et voulais pas passer trop de temps la dessus

Le titre n'existe qu'en tant que logo. Il serait intéressant de l'avoir, même caché (blanc sur blanc) dans un titre de lvl1 pour le référencement (ou de ne garder que le logo en image (mieux).

Je ne comprends pas trop bien ce que tu veux dire!

J'aurais mis le texte d'intro du formulaire hors "Welcome to ... Thanks you" hors de la balise form. Et dans trois paragraphe <p> sans <br /> (tu es en transitional xhtml, <br> s'écrit alors <br />

J’arrangerai ca

Idem pour l'image du titre, finir par ... />

Pourtant, le validateur ne me signale pas cette erreur: http://validator.w3.org/check?uri=ww...Inline&group=0

Les deux div pour faire de l'espace c'est limite divite. on peut parfaitement gérer cela dans la css sans pseudo contenu parasite.

Comment le ferais tu?

Les classes span watermarker imbriquée gagnerait à perdre leur horrible paramètre style au profit d'un transfert dans la feuille de style.

Là encore, je ne vois pas trop ce que tu veux dire!

Ensuite, le texte de fin, sort le du form. Et pourquoi diantre hérite-t-il d'un h5 ??? qui n'a aucune valeur hiérarchique ? Un bon <p> avec, éventuellement une classe.

OK, j'arrangerai ca aussi
Mais a quoi peuvent vraiment servir les h3 h4 et h5?? Je sais qu'il faut utiliser H1 et h2 qui sont bénéfiques pour le référencement mais qu'en est il des autres??

Y a-t-il un autre type meilleur que transitional xhtml?? Aussi pour éviter me mettre toujours / a la fin de chaque balise!!

Merci infiniment

[Michel Rotta]

pourtant, je suis hyper maniaque dans mes codes...

Pas grave, tu as trouvé pire que toi. Et pourtant, en comparaison d'autres qui passent ici, je serais plutôt un laxiste !

c'est, mais la page index.php est temporaire et voulais pas passer trop de temps la dessus

Certes, mais avoir une feuille de style et la structure qui va bien t'éviteras d'avoir à les repenser une fois que le temporaire deviendra définitif.

"Le titre n'existe qu'en tant que logo. Il serait..."

je ne comprends pas trop bien ce que tu veux dire! :oops

En une phrase : les moteurs de recherches ne savent pas lire les jpg. Comment qu'il font pour savoir le titre de ton site ?

pourtant, le validateur ne me signale pas cette erreur: [url]http://validator.w3.org/check?uri=www.moroccan-arts.co.uk&charset=%28detect+automatically%29&doctype=Inline&group=0[/url

Effectivement il ne la signale pas, mais en laisse d'autre. Suite de la réponse ci-dessous.

"Les deux div pour faire de l'espace..."

comment le ferais tu?

Là, c'est mon côté maniaque. Dans le (x)html, il ne doit (normalement) y avoir que des éléments structurel. Donc des éléments nécessaires à la structure des données de ton élément. Des div n'ont aucun intérêt structurel et peuvent être traité avec des artifices de CSS. Le plus évident étant les marge, soit des éléments au dessus et au dessous (bof), soit de l'élément lui même. Une structure propre et lisible et une css qui colle bien.

"Les classes span watermarker imbriquée gagnerait à perdre leur horrible paramètre style..."

là encore, je ne vois pas trop ce que tu veux dire!

Le maniaque revient ! Pas de balise "style" (sauf exception exceptionnellement exceptionnel) dans un document (x)html. En plus, tu as plusieurs spam, qui ont des classes bien définies et qui ont exactement les même balise style, il n'y a aucun intérêt à les conserver dans (x)html et tout intérêt à les transférer dans la feuille de style (css).

mais a quoi peuvent vraiment servir les h3 h4 et h5?? je sais qu'il faut utiliser H1 et h2 qui sont benefiquent pour le referencement mais qu'en est il des autres??t

Ils servent à structurer le document (x)html. Il est rare d'avoir plus d'un "h1" par page, de la même manière, et sauf dans des pages trop longue pour un site, il est rare de trouver des "h5" et encore plus des "h6". Mais ils sont là, au cas où pour structurer les titres dans une page et pas pour faire joli dans les styles... Donc sert toi des éléments de structure du (x)html pour ce à quoi ils sont destiné, et si tu n'en as pas l'usage, pas de problème, tu n'est en rien obligé d'utiliser toutes les balises dans chaque page

y a t il un autre type meilleur que transitional xhtml?? aussi pour eviter me mettre toujours / a la fin de chaque balise!!

lol, je transitional n'a pas pour objectif d'éviter d'écrire correctement son code en se passant de / à la fin des balises qui n'ont pas de balises fermante (et pat chaque balise).

Un peu d'histoire. A l'origine était le html 4 ou 4.1 (on ne va pas remonter trop loin non plus !). Les règles du html étant ce qu'elle sont, une balise non fermante comme le "br" s'écrivait donc "<br>". Ensuite est arrivé le x (le x vient de eXtensible HTML) et donnait au html la structure du XML, plus stricte mais aussi plus extensible. La principale différence vient donc de rendre le langage plus lisible (pour un ordinateur) et que toutes les balises doivent avoir une balise fermante. Quoique, il peut arriver que cette balise fermante n'aie pas d'intérêt structurel (rien dans la balise), il est alors prévu d'en indiquer l'absent par un "/" à la fin de la balise ouvrante-fermante et notre "br" devient "<br />". Et nous nous retrouvons donc dans la syntaxe "strict" qui est celle que je recommande pour tous les nouveaux sites XHTML que l'on va mettre en ligne aujourd'hui, c'est celle qui se rapproche le plus du HTML 5 et permettra une migration simplifiée.

Mais que vient donc faire le transactionnel dans cette histoire ? Et bien, on c'est retrouvé avec des sites écrit en html 4.x dans lesquels on voulait pouvoir intégrer des parties en xhtml. Le doctype html ne pouvait convenir, pas plus que le xhtml strict. On a donc ouvert le transisional xhtml qui permettait d'avoir, dans une même page, et du html 4.x et du xhtml. Ce doctype ne devrait être utilisé que par des sites en cours de migration, aucunement par un nouveau site, et encore moins pour ne pas avoir la peine d'écrire un "/" à la fin d'une balise non fermante.

Bon, je chasse le maniaque qui est en moi et redevient un être humain normal

Merci infiniment

Mais de rien, participer à la formation d'un nouvel informaticien est toujours un plaisir.

[redah75]

Merci encore une fois pour cette explication bien détaillée et complète

Certes, mais avoir une feuille de style et la structure qui va bien t'éviteras d'avoir à les repenser une fois que le temporaire deviendra définitif.

Je suis actuellement entrain de revoir mon code tant que c'est le début mais je rencontre quelques problèmes. Je t'en ferai part lors de mon prochain post!!

En une phrase : les moteurs de recherches ne savent pas lire les jpg. Comment est-ce qu'ils font pour savoir le titre de ton site ?

Mais comment le feras-tu? Je pensais que l'attribut alt était suffisant pour les moteurs de recherche!!

Ils servent à structurer le document (x)html. Il est rare d'avoir plus d'un "h1" par page, de la même manière, et sauf dans des pages trop longues pour un site, il est rare de trouver des "h5" et encore plus des "h6". Mais ils sont là, au cas où pour structurer les titres dans une page et pas pour faire joli dans les styles... Donc sert toi des éléments de structure du (x)html pour ce à quoi ils sont destiné, et si tu n'en as pas l'usage, pas de problème, tu n'es en rien obligé d'utiliser toutes les balises dans chaque page

OK, j'ai créé des classes .taille-10 et .taille-9 pour 10px et 9px. J’espère que c'est une bonne solution!

lol, le transitional n'a pas pour objectif d'éviter d'écrire correctement son code en se passant de / à la fin des balises qui n'ont pas de balises fermante (et pat chaque balise).

[Michel Rotta]

Pour ce qui est du titre, je m'arrange pour que, sur la page d'accueil du site, le titre soit repris dans un "h1". Pour les autres pages, tous dépend tu type de site et de l'importance du titre. En général, je n'utilise pas de bitmap pour le texte du titre, toujours du texte.


Le HTML5 est pour l'instant resté au niveau du test. Je n'ai aucun site en HTML5 et aucun en projet, malgré que l'envie d'utiliser certaines fonctionnalités du CSS3 me grattouilles. Par contre, je suis d'accord sur le fait qu'il faut éradiquer IE6 et que les sites actuellement en préparation ne seront plus compatibles (ni testés) avec IE6.

Quant au html5, j'attends la sortie de IE9 pour me décider si je m'y lance, ou pas. Mais tous dépend de ton site et de son public, un site qui doit être facilement accessible par une majorité de personnes ce doit de prendre en compte tous les explorateurs et les dernière nouveautés ne sont peut-être pas adaptée, faut réfléchir et décider, mais tu es le seul à pouvoir le faire.

[redah75]

Je viens de prendre une décision que j'espère ne pas regretter par la suite. Je passe en doctype html5:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Les questions que je me pose:
1- devrais je garder les attributs xmlns et xml dans la balise html??? Et a quoi servent-ils??

Me reste maintenant à tester sur plusieurs navigateurs le rendu: j'ai jusqu'a présent 2 pages: la page de formulaire et aussi http://moroccan-arts.co.uk/test-index-watermark.php

J’ai modifié un peu la page du formulaire et suivi tes conseils: http://moroccan-arts.co.uk/index-css.php

2- A quoi sert <fieldset> et est-il important de l'avoir?

3- j'ai supprimé le <div> qui me sert de séparateur et ai place la séparation dans le formulaire sous forme de class, est-ce bon?

4- ce paragraphe me pose problème, je n'ai apparemment pas le droit de mélanger des <p> avec des <h>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p><h3>Welcome to Moroccan Arts. the Web site is coming up soon.<br />
        Please enter your contact details in order to be updated. As soon as it's ready you'll receive an exclusive discount on your first purchase.</h3></p>
        <p><h3>Thank you.</h3></p>

Comment devrais-je faire pour palier à ce problème?

5- et enfin, je crois avoir un sérieux problème avec la personnalisation des boutons. Si j'enlève la classe "btn" le texte s'affiche bien au dessous du bouton. Saurais-tu ce qui ne va pas?

Merci encore une fois

[Michel Rotta]

1) oui, il va falloir les garder, mais adapter le premier, je n'ai pas la syntaxe.

2) Le fieldset permet de regrouper des champs dans un formulaire. Il n'est en rien obligatoire. En général, le premier élément d'un fieldset est un élément label qui permet de lui donner un nom. Dans le cas où il n'y a pas de nécessité de regroupement, comme dans ton formulaire, il n'est absolument pas utile de l'utiliser.

3) oui. Quoique... (le retour du maniaque), il convient de ne pas donner de nom de class qui donne une idée précise de ce qu'elle fait. Imagine que dans trois mois, tu souhaites un écart de 40, tu peux facilement modifier la feuille de style, mais, tel que je commence à te connaître, tu vas renommer la classe en clear-40 et modifier tous les fichiers. En perdant l'intérêt des class... Appel les plutôt du genre clearType1, clearType2,... Si tu modifies l'écartement, ce sera pour tous les type2, et il ne sera pas nécessaire intellectuellement de modifier les noms. (le maniaque repart)

4) non, les "p" et les "hx" sont des containers qui ne peuvent contenir d'autre container. La solution ? Utilise l'un où l'autre. Mon avis ? Vire les hx qui n'ont rien de structurel ici.

5)Deux choses :
5.1) vire le texte hors du container form.
5.2) dans ta classe btn tu as "float:left;" ce qui rend ton container flottant à gauche et permet, incidemment, à d'autre container de venir ce placer à sa gauche.

[redah75]

mais adapter le premier, je n'ai pas la syntaxe

De quel premier parles tu??

2) Le fieldset permet de regrouper...

Parfait, je l'ai viré, je vois mieux maintenant son utilité...

3) oui. Quoique... (le retour du maniaque), il convient de ne pas donner de nom de class...

hehe, je t'aime bien je vois très bien ce que tu veux dire, je suis très maniaque aussi coté code et c'est pour cela que je pose trop de question, j'essaye d'avoir un code "parfait" et très propre. Crois-le ou pas, je n’aime pas non plus ce genre de classe mais je le fais pour des raisons de simplicité. Je le fais aussi pour les couleurs et tailles de textes: .taille20: 20px, .bleu, .rouge, ...
Faut que je réfléchisse à une meilleure manière de géré cela!!

4) non, les "p" et les "hx" sont des containers qui ne peuvent contenir d'autre container. La solution ? Utilise l'un où l'autre. Mon avis ? Vire les hx qui n'ont rien de structurel ici.

Cool!, je comprends mieux maintenant et j'apprends des choses avec toi
J’ai viré <p> et laisse <h3> car j'affiche le texte dans une taille légèrement plus grande que la normale.

5.2) dans ta classe btn tu as "float:left;"...

J’ai viré le float:left et ca marche bien maintenant. Je pense que ca ne devrait pas avoir d'impact sur le reste des pages...

J’aurais 2 autres petites questions:
6- j'utilise <p> pour délimiter les champs de texte <p><input...></p>, fais tu pareil? j'ai fixé l'espace entre les input à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 26px: form p { margin-top: 26px; }

comment devrais-je faire si jamais je voudrais mettre que 10px par exemple entre 2 input? Ou entre un input et un texte qui sera placé juste au dessous comme ce qui est le cas pour le bouton et le texte qui est au dessous.

7- je ne suis pas tres satisfait des css que j'utilise pour les boutons, as tu un code meilleur? je me suis inspiré de http://particletree.com/features/red...utton-element/ et le gros avantage que je trouve c'est que ca concerne des boutons de type <a> et <button>

Merci encore une fois

[Michel Rotta]

de quel premier parles tu??

Dans la ligne html, les paramètres, le premier qui donne une référence à w3.org

j'ai viré <p> et laisse <h3> car j'affiche le texte dans une taille legerement plus grande que la normale.

Mauvaise réponse !

Les tags dans le fichier html doivent être choisis en fonction de la structure du document, et ici, le "P" est le tag adapté. Après, avec les css, tu peux lui mettre la couleur, la police, la taille, la grasse,... que tu souhaites. Ceci est la bonne solution.

6- j'utilise <p> pour delemiter les champs de text <p><input...></p>, fais tu pareil? j'ai fixe l'espace entre les input a 26px: form p { margin-top: 26px; } comment devrais je faire si jamais je voudrais mettre que 10px par exemple entre 2 input? ou entre un input et un texte qui sera placé juste au dessous comme ce qui est le cas pour le bouton et le text qui est au dessous

J'utilise symfony pour gérer code (et notament le xHTML). L'habitude, que j'ai adoptée, avec ce framework consiste à gérer les formulaires dans un tableau à deux colonnes, la colonne de gauche donne le libellé, celle de droite le "input" ou autre, l'aide à la saisie et l'éventuel erreur de saisie.

Mais ceci n'implique en rien que ta solution soit mauvaise, si je pouvais me permettre une double critique c'est l'absence de "label" avec le paramètre "accessKey" lié qui fait d'une part qu'une fois la donnée saisie, on ne sais plus ce qui doit être saisi (ce qui rend la vérification difficile) et d'autre part rend la saisie plus difficile pour les personnes handicapée.

7- je ne suis pas tres satisfait des css que j'utilise pour les boutons, as tu un code meilleur? je me suis inspiré de http://particletree.com/features/red...utton-element/ et le gros avantage que je trouve c'est que ca concerne des boutons de type <a> et <button>

Moi je le trouve bien ton bouton. Je suis certainement beaucoup moins porté sur le "fun" de l'affichage et plus sur le code, c'est pourquoi, quant un site exige un affichage parfait, je fais appel à un designer qui s'en occupe, c'est rare, mais c'est déjà arrivé.

[redah75]

Dans la ligne html, les paramètres, le premier qui donne une référence à w3.org

Ah d'accord, je pense que c'est bon, je l'ai pris du site apple.com
Mais a quoi sert le xmlns et quelle est la différence entre xml:lang="en" et lang="en"?

Les tags dans le fichier html doivent être choisis en fonction de la structure du document, et ici, le "P" est le tag adapté. Après, avec les CSS, tu peux lui mettre la couleur, la police, la taille, la grasse,... que tu souhaites. Ceci est la bonne solution.

OK chef! Je ferais le nécessaire. Donc en gros, je ne vais pas trop me servir de h3, 4 et 5??

ais ceci n'implique en rien que ta solution soit mauvaise, si je pouvais me permettre...

Comme tu as pu remarquer, j'essaie de révolutionner un peu les formulaires en mettant le titre du champ input à l'intérieur du champ...
Mais comment ferais-tu pour réduire l'espace entre uniquement 2 champs??
C’est à dire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p><input 1></p>
<p><input 2></p>
<p>Text mais presque collé au champ text</p>

1- devrais-je mettre une classe?
2- ou replacer <p> par <span> ?

Moi je le trouve bien ton bouton. Je suis certainement beaucoup moins porté sur le "fun" de l'affichage et plus sur le code, c'est pourquoi, quant un site exige un affichage parfait, je fais appel à un designer qui s'en occupe, c'est rare, mais c'est déjà arrivé.

OK je le garde mon code pour les boutons. Mais ça a un peu deconné quand j’ai viré le float:left, la largeur des boutons a été changée. Sais-tu pourquoi?

[Michel Rotta]

ah d'accord, je pense que c'est bon, je l'ai pris du site apple.com
mais a quoi sert le xmlns et quelle est la dif entre xml:lang="en" et lang="en"?

lang="xx" permet d'informer l'explorateur que la langue du document est xx. En XHTML il faut mettre les deux. Pourquoi ? Bonne question. Mais je n'ai pas la réponse.

OK chef! je ferais le necessaire. dc en gros, je je ne vais pas trop me servir de h3, 4 et 5??

Je ne pense pas m'être jamais réellement servi des 5 et 6, rarement des 4.

comme tu as pu remarquer, j'essaie de revolutioner un peu les formulaire en mettant le titre du champ input a l'interieur du champ...
mais comment ferais tu pour reduire l'espace entre uniquement 2 champs??
cad
<p><input 1></p>
<p><input 2></p>
<p>Text mais presque collé au champ text</p>
1- devrais je mettre une classe?
2- ou replacer <p> par <span> ?

La révolution c'est bien, mais les utilisateurs vont-ils suivre . L'important c'est l'ergonomie et le verdicts vient de l'utilisateur. Tu peux faire la plus belle interface qui soit, si les utilisateurs n'aiment pas, cela ne marchera pas

Par contre, je ne comprend pas ce que tu veux réduire.

Et remplacer un "p" par un "spam", c'est ... surprenant, le "p" est un container de texte alors que les "spam" est une balise en ligne et, de base, neutre dans la mise en forme (sauf css). Je ne vois pas l'objectif.

OK je le garde mon code pour les boutons. mais c'a un peu deconé quand g viré le float:left, la largeur des boutons a été changée. sais tu pourquoi?

La classe btn donne la largeur (width) à auto. Vu qu'il n'y a plus de code à droite, il est possible que cela ait influencé la largeur du bouton.

[redah75]

La révolution c'est bien, mais les utilisateurs vont-ils suivre. L'important c'est l'ergonomie et le verdict vient de l'utilisateur. Tu peux faire la plus belle interface qui soit, si les utilisateurs n'aiment pas, cela ne marchera pas

J’ai bien testé avec plusieurs personnes et ils ne semblent pas avoir du mal. Et je trouve personnellement que c'est assez clair et net, pas toi??

Par contre, je ne comprends pas ce que tu veux réduire.

Et remplacer un "p" par un "spam", c'est ... surprenant, le "p" est un container de texte alors que les "spam" est une balise en ligne et, de base, neutre dans la mise en forme (sauf css). Je ne vois pas l'objectif.

Par exemple sur cette page: http://moroccan-arts.co.uk/test-index.php
Si tu vas dans "Account" je propose 2 champs: email et mot de passe. Juste au dessous de mot de passe, j'ai un lien "Forgot password", eh ben c'est ce de texte dont je parle, je ne pouvais pas le mettre dans un <p> car l'interlignage aurait été trop important. Je l'ai mis dans un <h6>, je sais c pas bon, je réglerai ce problème mais c'est juste que j'essaie d'éviter d'avoir trop de classes CSS ou une classe pour chaque élément...
Comment ferais-tu toi??

La classe btn donne la largeur (width) à auto. Vu qu'il n'y a plus de code à droite, il est possible que cela ait influencé la largeur du bouton.

Tu as parfaitement raison car le button prend parfois toute la largeur notamment dans "Cart" j'ai 2 boutons: "View" et "Check out", le bouton "View" prenait toute la largeur et le "check out" passait a la ligne avec une largeur normal. J’ai remédié à ça en mettant float:left au premier bouton et float:right au deuxième. Est-ce la bonne solution? Comment aurais tu fait??

[Michel Rotta]

j'ai bien testé avec plusieurs personnes et ils ne semblent pas avoir du mal. et je trouve personellement que c'est assez clair et net, pas toi??

Oui et non.

C'est simple, tant que le formulaire n'est pas remplis. Une fois les données entrée, qui dit que le nom est bien dans le champ nom, et, sauf à supprimer les données, il n'est pas possible de la savoir. De plus, je pense que, question accessibilité on doit y perdre pas mal, comment une machine de lecture réagit-elle sur ce type d'affichage ?

A mon avis, il faut les deux, le libellé fixe et, éventuellement, pour faire joli, le texte.

http://moroccan-arts.co.uk/test-index.php[/url]
si tu vas dans "Account" je propose 2 champs: email et mot de passe. juste au dessous de mot de passe, j'ai un lien "Forgot password", eh ben c'est ce de texte dont je parle, je ne pouvais pas le mettre dans un <p> car l'interlignage aurait été trop important. je l'ai mis dans un <h6>, je sais c pas bon, je reglerai ce probleme mais c'est juste que j'essaie d'eviter d'avoir trop de classes css ou une classe pour chaque element...
comment ferai tu toi??

Rien ne garanti la hauteur par défaut d'un h6 (ou de n'importe quel balise) d'un explorateur à l'autre. J'aurais mis un "p" et les règles CSS qui vont bien.

Tu peux avoir plusieurs classe CSS sur une même page, une générale pour le site, une pour le menu, une pour les règles très particulière de la page. Ceci peux éviter d'avoir à trop charger la feuille du site en la coupant en plusieurs plus petites partie.

tu as parfaitement raison car le button prend parfois toute la largeure nortament dans "Cart" j'ai 2 boutons: "View" et "Check out", le bouton "View" prenait toute la largeure et le "check out" passait a la ligne avec une largeur normal. j'ai remedié a ca e mettant float:left au premier bouton et float:right au 2e. est ce la bonne solution? comment aurais tu fait??

Une classe spécifique pour le(s) bouton(s) qui me gènes.


J'ai vu un peu plus ton site, cela me donne juste l'envie de revenir au Maroc.

[redah75]

C'est simple, tant que le formulaire n'est pas rempli. Une fois les données entrées, qui dit que le nom est bien dans le champ nom, et, sauf à supprimer les données, il n'est pas possible de la savoir. De plus, je pense que, question accessibilité on doit y perdre pas mal, comment une machine de lecture réagit-elle sur ce type d'affichage ?

A mon avis, il faut les deux, le libellé fixe et, éventuellement, pour faire joli, le texte.

Oui c'est vrai, mais bon un site parfait n'existe pas! J’aime les choses simples et je n’aime pas quand c'est encombré, tu vas me dire que les libellés ne vont pas encombrer mais c'est du texte en moins niveau code et affichage...! Et en plus, une première version n'est JAMAIS bonne, j'améliorerai le site au fur et à mesure et selon les "feedbacks"

Rien ne garanti la hauteur par défaut d'un h6 (ou de n'importe quel balise) d'un explorateur à l'autre. J'aurais mis un "p" et les règles CSS qui vont bien.

Oui, je vais créer une classe p.clearer: margin:0; qui sera appliquer dans le <p> du texte, c'est plus propre et clair. Merci

Tu peux avoir plusieurs classe CSS sur une même page, une générale pour le site, une pour le menu, une pour les règles très particulière de la page. Ceci peux éviter d'avoir à trop charger la feuille du site en la coupant en plusieurs plus petites partie.

J’ai bien ca en tête mais j’attends juste d'avoir plus ou moins fini avec les class CSS pour tout scinder. C’est clair que déjà j'aurai une .css pour la page d'accueil: home.css, puis en verra pour le reste.
Concernant le menu, je n’ai pas grand chose, une demi dizaine de classes

Une classe spécifique pour le(s) bouton(s) qui me gènes.

Cela me gène énormément aussi mais je ne vois pas trop ce que je peux mettre mis à part une largeur minimum et un nowrap a l'intérieur!! Je vais tester.
As-tu une meilleure idée?

J'ai vu un peu plus ton site, cela me donne juste l'envie de revenir au Maroc.

Ça fait plaisir, merci
tu es allé où? restons en contact et t'auras bien droit a des reductions importantes en vue de ta contribution a la conception du site

et merci encore une fois

[Michel Rotta]

oui c'est vrai, mais bon un site parfait n'existe pas! j'aime les choses simples et j'aime pas quand c'est encombré, tu vas me dire que les libellés ne vont pas encombrer mais c'est du texte en moins niveau code et affichage...! et en plus, une premiere version n'est JAMAIS bonne, j'améliorerai le site au fur et a mesure et selon les "feedbacks"

On dit pour une maison que la première que l'on construit est pour son ennemis, la deuxième pour son amis et la troisième pour soi. Je pense que pour les site internet, c'est la même chose.

Pense cependant à l'accessibilité de ton site pour les handicapés visuel, sans label et l'accesskey qui va avec, le site est presque inutilisable. Pense aussi que tous tes clients ne seront pas nécessairement de jeunes gens à l'aise avec l'informatique. J'imagine mon père (80 ans) en train de remplir ton formulaire, tu vas te faire jeter dés qu'il va vouloir l'imprimer en PDF pour en garder une trace, sans les libellés, il ne vas jamais pouvoir être sur de ce qui est saisi (ben oui, 80 ans et passionné d'informatique, son premier ordi avait la taille d'un demis terrain de foot et 4k de ram...). Tu vas avoir beaucoup de clients possible, il faut penser à tous. Utilise la méthode des personas, les personas sont des types d'utilisateurs et les besoins qui vont avec, le quadra qui veut un cendrier oublié lors de son voyage, le jeunes qui cherche un cadeau exotique pour mamy, le marocain cadre qui veut ce faire un petit plaisir mais n'a pas le temps de passer aux souks, celui qui flâne et tombe un peu par hasard et s'y promène sans but réel, il faut établir une descriptions précise de chaque personas et comment il va réagir au site, ensuite tu peux tester ton site en te mettant dans la peau du personnas et t'assurer qu'il est conforme à l'attente de ce personnas là, pas à la tienne. Ce n'est pas un système parfait, mais c'est un bon début pour s'assurer que le site est viable.

cela me gene enormement aussi mais je ne vois pas trop ce que je peux mettre mis a part une largeur minimum et un nowrap a l'interieur!! je vais tester..
as tu une meilleure idee?

J'aurais mis une largeur fixe, mais je ne suis pas sur que l'idée soit meilleur.

ca fait plaisir, merci
tu es allé où? restons en contact et t'auras bien droit a des reductions importantes en vue de ta contribution a la conception du site

Cela fait de très nombreuses années, j'étais encore au collège et habitais un pays voisin, le suivant, directement au sud... On rentrait l'été en bateau et il y avait généralement une escale à Casa, on en a profité pour faire des excursion sur Raba. Et j'ai quelques amis Marocain ici. Et je suis sur un poste dans une boite qui envisage de créer une filliale en informatique au Maroc, avec un peu de chance je serais résident à Casa d'ici l'année prochaine.

[redah75]

Bonjour,
J’ai passé la journée entière à essayer de refaire mes boutons en me basant sur ce site: http://www.webdesignerwall.com/tutor...dient-buttons/ mais il y a un problème de hauteur sur FF et je n'ai pu le régler... c'est chiant!
J’ai donc laissé tombé et régler le problème de largeur de bouton que j'avais en remplaçant tout simplement display: block par display: inline-block et j’ai carrément supprimer width:auto...

On dit pour une maison que la première que l'on construit est pour son ennemi, la deuxième pour son ami et la troisième pour soi. Je pense que pour le site internet, c'est la même chose.

Tu as parfaitement raison
J'ai regardé un peu concernant les accesskey, mais ça ne se fait presque plus, on nous l'a même pas enseigné a l'université mais je vais voir ce que je peux faire à ce niveau la...

...
Et je suis sur un poste dans une boite qui envisage de créer une filiale en informatique au Maroc, avec un peu de chance je serais résident à Casa d'ici l'année prochaine.

Tiens-moi au courant, je compte m'y installer aussi prochainement

Tu m'as précédemment dit: "Le titre n'existe qu'en tant que logo. Il serait intéressant de l'avoir, même caché (blanc sur blanc) dans un titre de lvl1 pour le référencement (ou de ne garder que le logo en image (mieux)."
Est ce que le alt ne suffit pas? Dois-je mettre title? Et est ce bien de cela que tu parles?

Une petite question:
J’ai un div sans height qui contient une liste ul float left. Mon problème c'est que la hauteur du div ne s'adapte pas par rapport au contenu du ul. Je sais que c'est a cause du float left, saurais- tu comment régler ce problème?

[Michel Rotta]

Salut,

tiens moi au courant, je compte m'y installer aussi prochainement

Rien n'est sur ni fait, cela fait partie des 15 possibilités actuelles et aucune n'est plus probable que l'autre.

tu m'as precedement dit: "Le titre n'existe qu'en tant que logo. Il serait intéraissant de l'avoir, même caché (blanc sur blanc) dans un titre de lvl1 pour le référencement (ou de ne garder que le logo en image (mieux)." est ce que le alt ne suffit pas? dois je mettre title? et est ce bien de cela que tu parles?

La on est plus dans les problèmes de référencement des sites par google essentiellement que dans l'accessibilité. Quoique.

Pour les images en générale, elle sont de deux ordres :

• Purement esthétique: elle n'apportent aucun contenu sémantique au site, on va y trouver les images de fond, les bordures de cadres,... Ces images, on va généralement les faire apparaître depuis la couche css.
• les images contextuels qui ont une valeurs d'information, les photos d'articles, un schéma dans un document,... Ces images arriveront normalement par une balise "<img ... />" et il convient de leur donner et un "alt" et un "title", souvent le même. C"est pour des raisons d'accessibilité des personnes handicapées essentiellement et les lecteurs utilisent soit l'une, soit l'autre, autan mettre les deux.

Reste le troisième cas, celui du logo et du site, il tient plus de la première catégorie, mais, généralement, on va vouloir le rendre actif (pour qu'un click ramène à l'accueil, donc on utilisera la deuxième technique. Dans tous les cas, le moteur de recherche ne pourra en analyser le contenu. Éventuellement l'indexer dans la partie image du moteur mais guêre plus. Et les données "alt" ou "title" vont apporter un début d'information, mais elle aurons, pour le moteur, bien moins de poids qu'un "h1", qui, sémantiquement, est un titre important.

Est-ce plus explicite ?

j'ai un div sans height qui contient une liste ul float left. mon probleme c'est que la hauteur du div ne s'adapte pas par rapport au contenu du ul. je sais que c'est a cause du float left, saurai tu comment regler ce probleme?

Pourquoi un "float: left" dans une "ul" ? Est-il nécessaire à la représentation des données ?

++