cadres, W3C et Firefox

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

nadar a écrit :Salut calimo, et de nouveau merci pour tes précisions.
calimo a écrit :Pour revenir au sujet, pourquoi ne pas tout simplement définir les images comme fond de cellule des tableaux ?

Code : Tout sélectionner

td {
	background-image : url("../Images/menu/espace1.jpg");
}
Ce serait beaucoup plus élégant, ça ferait une meilleure séparation contenu/style, ça éviterait le alt="" (une image vide, sa place c'est dans la CSS), et ça s'adapterait automatiquement au contenu :wink:
Je crois que c'est la prochaine étape dans tes modifications :P
Je n'ai pas très bien compris (mais je vais faire des essais, après, dans la "prochaine étape" :wink: ).
C'est du CSS. Je n'avais pas fait attention que tu ne t'y étais pas encore mis. En fait, cette image semble être un arrière-plan, ou du moins purement décorative, elle n'apporte vraissemblablement rien en tant que "contenu" (je peux me tromper).

Une image qui n'apporte rien de nouveau, typiquement avec un alt="" pour signifier qu'elle ne contient rien et est là à titre purement décoratif, a plus sa place dans la feuille de style (CSS), et pas dans le code HTML. En l'occurence si tu la mettais en arrière-plan tu aurais en plus l'avantage que l'image se répète autant qu'il faut pour remplir la case de tableau :wink:
nadar a écrit :
calimo a écrit :il faut spécifier l'attribut lang pour définir la langue (tu n'utilise que xml:lang, alors qu'il faut utiliser soit lang, soit les deux).
Là encore, j'ai du mal à te comprendre, tout ça est assez nouveau pour moi.

Si j'ai bien compris les infos Openweb, j'ai indiqué (en VF dans cet exemple, pour le EN, les 2 s'inversent évidemment ...) :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
et si par hasard un passage est en EN, je le signale par
<p xml:lang="en">
Argh, OpenWeb dit ça ? :shock: Comme quoi il faut toujours tout prendre avec précaution :roll:

http://openweb.eu.org/articles/specifier_langue/
nadar a écrit :

Code : Tout sélectionner

<meta http-equiv="Content-language" content="fr" />
Ah bon Ok alors dans ce cas ça va ;-)

Cela dit en HTML mieux vaut utiliser lang="...", donc dans ton cas la redondance de lang et xml:lang ne serait surement pas superflue ;-)
nadar a écrit :Et pour le moment, je me la prends, cette petite tête pour que Firefox ARRÊTE de me séparer les cellules de ce tableau de 10 kms entre-elles !!!!!!!!!!!!
Tu vas hurler, ici aussi, devant ce code, mais j'en veux j'en veux j'en veux :

<table cellpadding="0" cellspacing="0" width="100%"><tr>
<td width="48%"><p class="ri">Femme &agrave; l'extr&ecirc;me fra&icirc;cheur de la jeunesse</p></td>
<td width="4%" height="20"><p class="jo">OU</p></td>
<td width="48%"><p class="le">femme plus m&ucirc;re en pl&eacute;nitude,</p></td>
</tr><tr>
<td><p class="ri">fine</p></td>
<td height="20"><p class="jo">OU</p></td>
<td><p class="le">arrondie,</p></td>
</tr><tr>
<td><p class="ri">tranquillement assur&eacute;e</p></td>
<td height="20"><p class="jo">OU</p></td>
<td><p class="le">si joliment timide ...</p></td>
</tr></table>
Ben, euh, franchement... je dois te dire que je ne maîtrise absolument pas le formattage des tableaux ! Il y a surement une question de marges ou d'espacement par défaut sur les paragraphes...

Pour ton menu, franchement, oublie les tableaux, fais une bête liste

Code : Tout sélectionner

<ul>
<li>item1</li>
<li>item2</li>
</ul>
que tu pourra ensuite styler à volonté grâce aux CSS. C'est nettement plus propre et, franchement, moins prise de tête :roll:
nadar

Message par nadar »

calimo a écrit :Pour revenir au sujet, pourquoi ne pas tout simplement définir les images comme fond de cellule des tableaux ?
En règle générale, mes tableaux m'aident à la composition de mes pages (je sais, y'faut plus :twisted: , mais je peux pas tout faire en même temps ...).
Donc, ces tableaux comprennent souvent une ou PLUSIEURS image(s) - jamais les mêmes ! - encadrée(s) par du texte.
calimo a écrit :(une image vide, sa place c'est dans la CSS), et ça s'adapterait automatiquement au contenu :wink:
Oui, mais MILLE images vides ???
calimo a écrit :C'est du CSS. Je n'avais pas fait attention que tu ne t'y étais pas encore mis.
Bien sûr que si ! C'est même par là que j'avais commencé ma "modernisation" !!! D'ailleurs mes pages re-faites sont vérifiées comme W3C XHTLM et CSS !
calimo a écrit :Cela dit en HTML mieux vaut utiliser lang="...", donc dans ton cas la redondance de lang et xml:lang ne serait surement pas superflue ;-)
Ce n'est pas clair dans ma tête :oops:
ce lang="..." dont tu me parles, je le mets où ????

Tu as vu mon début de page, que je répète ici :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head><title>calimo est beau</title>
<meta http-equiv="Content-language" content="fr" />
</head><body>
<p>calimo est-il sur le forum ?</p>
<p xml:lang="en">calimo is a french Firefoxman</p>


C'est pas bon comme ça ?
calimo a écrit :Pour ton menu, franchement, oublie les tableaux, fais une bête liste

Code : Tout sélectionner

<ul>
<li>item1</li>
<li>item2</li>
</ul>
que tu pourra ensuite styler à volonté grâce aux CSS. C'est nettement plus propre et, franchement, moins prise de tête :roll:
Tu crois VRAIMENT que je peux faire un menu en liste avec un multi-menu comme ça :
http://www.amour-tendresse.com/pages/top.php ????????????


Je pense que tu l'as compris, j'évolue petit à petit :
1) j'ai cherché à compresser au max et viré un tas de "trucs "pompier" en JS (début 2004)
2) j'ai créé mon "style.css" externe (mi-2004)
3) j'essaye maintenant de respecter les critères XHTML et CSS de base
4) ensuite ... meilleur CSS, positionnement dans la page SANS tableau, etc ..... :shock:

Pour mon 3) actuel, j'éprouve un problème avec mes tableaux vu AVEC FIREFOX (MSIE aucun problème).

Tu me dis : "Il y a surement une question de marges ou d'espacement par défaut sur les paragraphes...".
Ben ... je ne vois vraiment pas où, et je ne comprends pas la réaction de FF ! J'aimerais que quelqu'un (mais il me faudrait aller sur un forum opera et safari, par exemple) me dise COMMENT sont vus ces tableaux, bref, savoir si un autre navigateur voit aussi mal mes tableaux que FF !

FF_Olivier m'a donné le truc pour les images, mais POURQUOI j'ai PARFOIS pareil avec le texte ???? Mystère :?: :?:
nadar

Message par nadar »

Ben voilà autre chose : quand je teste mes pages avec http://validator.w3.org/, tout va bien, mais quand je ckique sur
"check it for validity using the W3C CSS Validation Service", il me répond depuis ce jour (même pour les pages acceptées hier) :
I/O Error: Unable to contact target server www.amour-tendresse.com:80 after 3 tries.
C'est quoi, ce nouveau gag ?
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

nadar a écrit :
calimo a écrit :Pour revenir au sujet, pourquoi ne pas tout simplement définir les images comme fond de cellule des tableaux ?
En règle générale, mes tableaux m'aident à la composition de mes pages (je sais, y'faut plus :twisted: , mais je peux pas tout faire en même temps ...).
Donc, ces tableaux comprennent souvent une ou PLUSIEURS image(s) - jamais les mêmes ! - encadrée(s) par du texte.
calimo a écrit :(une image vide, sa place c'est dans la CSS), et ça s'adapterait automatiquement au contenu :wink:
Oui, mais MILLE images vides ???
Ok je vois. Dans l'exemple que tu donnais il y avait justement un arrière-plan, d'où ma confusion. ;-)
nadar a écrit :
calimo a écrit :Cela dit en HTML mieux vaut utiliser lang="...", donc dans ton cas la redondance de lang et xml:lang ne serait surement pas superflue ;-)
Ce n'est pas clair dans ma tête :oops:
ce lang="..." dont tu me parles, je le mets où ????

Code : Tout sélectionner

<html lang="fr" xml:lang="fr">
C'est simplement une redondance, tu le dit 2 fois vu que ça s'adresse à d'autres languages. Quand tu as un xml:lang il faut prendre l'habitude de mettre aussi un lang avec ;-)
nadar a écrit :
calimo a écrit :Pour ton menu, franchement, oublie les tableaux, fais une bête liste

Code : Tout sélectionner

<ul>
<li>item1</li>
<li>item2</li>
</ul>
que tu pourra ensuite styler à volonté grâce aux CSS. C'est nettement plus propre et, franchement, moins prise de tête :roll:
Tu crois VRAIMENT que je peux faire un menu en liste avec un multi-menu comme ça :
http://www.amour-tendresse.com/pages/top.php ????????????
Oui, bien sur !
Tu as vu les démos ? http://css.alsacreations.com/Galeries-de-menus-en-CSS
Vers le bas ?

Tout est possible en CSS. Tu as le droit de faire plusieurs listes. Tu peux également passer par une liste de définition si l'organisation par ligne a un sens ce serait même mieux.

Code : Tout sélectionner

<dl>
	<dt>Informations générales</dt>
	<dd>charte de confidentialité</dd>
	<dd>recommander</dd>
	<dd>être informé</dd>

	<dt>rubriques</dt>
	<dd>accueil</dd>
	<dd>plan du site</dd>
	<dd>beauté</dd>
	<dd>auteur</dd>
	<dd>galeries photos</dd>
	<dd>modèle d'envie</dd>
	<dd>contact</dd>
	<dd>livre d'Or</dd>

	<dt>webmaster</dt>
	<dd>partenaires</dd>
...
</dl>
Tu peux cacher les dt et forcer les dd à être en ligne.

Double avantage : ça te pousse à te demander si l'organisation de tes lignes est bonne et a une logique (il me semble vu que j'ai réussi à trouver rapidement des titres), et tu te passe des tableaux.
nadar a écrit :Pour mon 3) actuel, j'éprouve un problème avec mes tableaux vu AVEC FIREFOX (MSIE aucun problème).
C'est pour ça que je te propose de zapper les tableaux vu qu'ils posent problème :P
nadar a écrit :Tu me dis : "Il y a surement une question de marges ou d'espacement par défaut sur les paragraphes...".
Ben ... je ne vois vraiment pas où, et je ne comprends pas la réaction de FF ! J'aimerais que quelqu'un (mais il me faudrait aller sur un forum opera et safari, par exemple) me dise COMMENT sont vus ces tableaux, bref, savoir si un autre navigateur voit aussi mal mes tableaux que FF !
Un paragraphe ça a des marges. Si tu supprimes ses marges (soit par td p {margin:0;} soit par un style="margin:0" ça ira tout de suite mieux. Moi je trouve ça assez logique. :wink:
nadar

Message par nadar »

Cher calimo, tu me fais bosser comme un âne :wink: :wink: :wink:
Mais j'évolue, si, si :lol:

Bon, je viens de me faire mon premier tableau en CSS, et ÇA MARCHE !
Bof, il est tout petit :? mais ça vient tout doucement et ça me permet de faire mes pages de liens (qui utilisent ce tableau) toutes belles.

Donc, pour le moment, je laisse tomber le tableau du menu (puisque grâce à FF_Olivier j'ai trouvé du temporaire qui va bien), mais je crois que ma première expérience de tableau CSS me tire une épine du pieds pour un truc qui m'embêtait.

Je vais voir quand même pour le tableau où je voudrais des td alignés à gauche pour certains, et alignés à droite à l'opposé si ta suggestion du td p {margin:0;} "marche" bien. Je m'y lance tout de suite !

Ensuite, comme j'ai recopié/sauvegardé tes infos (il y en a beaucoup, merci), quand ma "période début XHTML" sera finie, je repars comme en 14 pour affiner le passable.

Mais je voudrais savoir pourquoi le CSS validation me jette depuis ce matin, je ne peux vérifier mon travail d'évolution !!!

Merci pour ta patience et ton expérience.

Bon, allez, je me fais un p'tit café pour aroser ça ! A la tienne !
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

nadar a écrit :Bon, je viens de me faire mon premier tableau en CSS, et ÇA MARCHE !
Qu'appelles-tu "tableau CSS" ?

Pour la validation CSS chez moi la connexion se fait bien mais il y a une erreur HTML qui l'empêche... (la validation ne se fait que si la page est valide, ce qui est normal).

En tous cas félicitation pour ta persévérence, tout le monde n'a pas une aussi grande volonté que toi :wink:
nadar

Message par nadar »

calimo a écrit :Qu'appelles-tu "tableau CSS" ?
Abus de langage (trop résumé !) : je voulais dire "mise en forme de mon tableau et de ses cellules déclarées par le biais d'un *.css.

Pour la validation CSS chez moi la connexion se fait bien mais il y a une erreur HTML qui l'empêche... (la validation ne se fait que si la page est valide, ce qui est normal).
Le problème est qu'il me l'a fait aussi sur des pages qu'il avait accepté ... hier !
Il faut que je réessaye plus tard, sans doute ...
En tous cas félicitation pour ta persévérence, tout le monde n'a pas une aussi grande volonté que toi :wink:
Comme beaucoup de Parisien, je ne le suis pas de naissance. J'ai vu le jour au pied d'un sapin :wink: d'une forêt Vosgienne, et on dit qu'un Vosgien est encore bien plus têtu qu'un ......... Breton.

Or, tu sais, un Breton c'est VRAIMENT têtu :lol: :lol: :lol: :lol:
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité