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.