Comment écrire CSS pour IE, FF, Nestscape et Opera

[jlb59]

Bonjour à tous,

Comme j'apprends le Css, il y a des choses dont je n'ai pas trouvé d'explications.

Peut-être auprès de ce forum !

J'ai fait une petite img en jpg, et dans du html j'ai fait un tableau qui contient cette img.

Donc, j'ai fait un css avec ce qui faut pour intégrer celle-ci.

Avec IE, ça marche impec, par contre avec FF, Netscape et Opera, walou ! y a rien qui s'affiche.

J'ai trouvé sur un site une ligne est intéressante à savoir, pour moi en tout cas, bien que je ne sais pas à quoi ça sert, mais je trouve le nom sympa (non, je rigole là...) !

Ca, c'est le Html :

<span class="Accueil_Carre" style="background: #0099CC none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></span>

Et dans le css, il y a seulement ça :

.Accueil_Carre
{
	background:#84BE21; 
	width:15; 
	border-right-style:solid;
	border-right-width:1px;
	border-right-color:black;
}

Je suppose que "moz" veut dire "Mozilla", et c'est le reste qui me pose prb.

Alors si qq pouvait m'expliquer plus en détails cette syntaxe, ce serait sympa.

Merci d'avance.

Cordialement, JLB59

[Arkh]

Remplaces width:15; par width:15px;

Il faut spécifier l'unité des dimensions pour que les bons browser comprennent ce qui leur arrive.

[jlb59]

Remplaces width:15; par width:15px;

Il faut spécifier l'unité des dimensions pour que les bons browser comprennent ce qui leur arrive.

Merci Arkh, ça marche sous FF?

Je suppose que si c'est bien là, il n'y a aucune raison pour que ça marche pas ailleurs.

Si le prb est "résolu", comment je peux le signalé ?

Modifié 5 Septembre 2006 par jlb59

[aymericj]

Bonjour jlb59,

Juste une première chose, le code que tu as trouvé c'est franchement pas le top.

Par contre si tu as un exemple en ligne de ton problème je me ferais un plaisir d'essayer d'y répondre.

Ou au pire, clarifier ta demande : tu veux mettre une image en fond de cellule via css?

++

Aymeric

[captain_torche]

Si le prb est "résolu", comment je peux le signalé ?

Il suffit que tu l'indiques dans ton dernier message.

Ca ne pénalisera pas un autre internaute qui ferait éventuellement remonter le topic pour le même souci.

[jlb59]

Juste une première chose, le code que tu as trouvé c'est franchement pas le top.

Oui, je le conçois, mais pour l'instant... j'apprends !

Par contre si tu as un exemple en ligne de ton problème je me ferais un plaisir d'essayer d'y répondre.

Et non, désolé, y a rien en ligne pour l'instant, je me contente de tester avec EasyPHP.

Ou au pire, clarifier ta demande : tu veux mettre une image en fond de cellule via css?

Non, ça je sais, mon tableau affiche un titre dans l'en-tete et juste avant l'img qui concerne ce titre.

<table class="texte" style="text-align: center;" align="right" cellpadding="0" cellspacing="0" width="90%">
	<tbody><tr style="height: 1px;" align="left">
		<td colspan="2"><img src="images/Degrade_Ligne_Noir_D.jpg" alt=""></img></td>
	</tr>
	<tr>
		<td colspan="2" align="left" style="border-left: 1px solid black;background: #330000">
__________________________________________________________________________
<span class="Accueil_Carre" style="background: #0099CC none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></span>
__________________________________________________________________________
<a class="PgAccueil_Titre" style="color: #0099CC;" href="#">  » P2</a>
		</td>
	</tr>
	<tr style="height: 90px;" valign="top">
		<td colspan="2" style="border: 1px solid black;" bgcolor="#eeeeee">
			Ce qu'il faut connaître...
		</td>
	</tr>
	</tbody>
</table>

Arkh m'a dit ce qu'il fallait faire mais n'a pas apporté d'explication sur ce que j'ai mis entre 2 lignes.

Peut-être qu'il ne sait pas, et toi ?

Il suffit que tu l'indiques dans ton dernier message.

Ca ne pénalisera pas un autre internaute qui ferait éventuellement remonter le topic pour le même souci.

OK, c'est noté.

Merci

[Arkh]

Les propriétés -moz-quelque chose sont spécifiques aux browsers utilisant Gecko (je crois). Bref, ce n'est pas standard et pas reconnu par les autres navigateurs, donc à éviter pour une page web censée s'afficher chez tout le monde.

Et vu les valeurs données dans ton exemple (-moz-initial) apparement ces propriétés sont mises à leur valeurs par défaut donc totalement inutiles ici.

[jlb59]

Les propriétés -moz-quelque chose sont spécifiques aux browsers utilisant Gecko (je crois). Bref, ce n'est pas standard et pas reconnu par les autres navigateurs, donc à éviter pour une page web censée s'afficher chez tout le monde.

Et vu les valeurs données dans ton exemple (-moz-initial) apparement ces propriétés sont mises à leur valeurs par défaut donc totalement inutiles ici.

OK et merci.

Pour infos, cette ligne ne vient pas de chez moi.

[aymericj]

re jlb59,

Alors plus proprement.

Remplaces ton :

<a class="PgAccueil_Titre" style="color: #0099CC;" href="#">  » P2</a>

par :

<h1 class="PgAccueil_Titre"><a href="#">  » P2</a><h1>

La balise <h1> définit un titre de premier niveau, ce qui semble être le cas vu le nom de la class

Ensuite au niveau de ton css, ajouter les paramètres suivants :

.PgAccueil_Titre {
font-size: la taille de ton texte;
padding-left: un peu plus que la taille de ton image;
line-height : grosso modo la hauteur de ton image;
background: transparent url(l'adresse de ton image) no-repeat top left;
}

.PgAccueil_Titre a {
color : #0099CC;
}

Si tu n'as pas d'autres titres de premier niveau (<h1>) dans ta page et que tu veux qu'ils aient tous la même présentation sur toutes tes pages, tu peux même t'affranchir de ta class PgAccueil_Titre d'autant plus que j'ai un doute sur le signe _.

ce qui donnerait :

L'html : 

<h1><a href="#">  » P2</a><h1>

Le css : 
h1 {
font-size: la taille de ton texte;
padding-left: un peu plus que la taille de ton image;
line-height : grosso modo la hauteur de ton image;
background: transparent url(l'adresse de ton image) no-repeat top left;
}

h1 a {
color : #0099CC;
}

Voila tu n'as plus besoin du span.

Si tu as besoin d'un complément d'information, n'hésites pas.

++

Aymeric

Modifié 5 Septembre 2006 par aymericj

[jlb59]

Voila tu n'as plus besoin du span.

Si tu as besoin d'un complément d'information, n'hésites pas.

Merci de ton aide aymericj.

Il est vrai que c'est moins "chargé" que ce que j'avais fait.

Maintenant, je vais tenter de refaire tout le css, ou une partie du moins, et voir si je peux l'adapter à toutes mes pages.

Y a du boulot, hein !!!!

Mais comme je ne suis pas trop pressé !

A bientôt et merci encore.

[aymericj]

De rien jlb59,

Si tu as le temps, tu devrais peut être voir a commencer à t'interesser à la construction sans tableaux, il y'a des sources dans les messages en post it au debut de cette rubrique.

Les tableaux, c'est rapide a metre en oeuvre, par contre dés qu'on commence à vouloir modifier, c'est la cata.

Surtout quand on essaie de se repérer au mileu des table td et autres tr qui finissent par brouiller le code.

De plus ce type de construction est bonne pour le référencement, penses-y.

Bon courage en tous cas,

Aymeric

Modifié 5 Septembre 2006 par aymericj

[jlb59]

De rien jlb59,

Si tu as le temps, tu devrais peut être voir a commencer à t'interesser à la construction sans tableaux, il y'a des sources dans les messages en post it au debut de cette rubrique.

Les tableaux, c'est rapide a metre en oeuvre, par contre dés qu'on commence à vouloir modifier, c'est la cata.

Surtout quand on essaie de se repérer au mileu des table td et autres tr qui finissent par brouiller le code.

De plus ce type de construction est bonne pour le référencement, penses-y.

Bon courage en tous cas,

Aymeric

Je suis tout à fait partant et me renseigne un peu partout.

j'ai d'ailleurs déjà essayé de faire 2 pages, mais, bien que c'est impec avec IE, FF et Opera ont des mises en pages bizarres, tant et si bien que c'est vraiment moche.

Et pour les tableaux, c'est vrai que c'est bien plus rapide à faire, quant à modifier les contenu, là c'est autre chose, mais comme j'avais déjà commencer, il y a qq temps, avec des tableaux...

Je ne me suis mis au Css qu'en mars 2006 je crois, c'est pour ça que je patauge un peu (quand y a pas trop de codes).

Je ne vois pas trop le référencement entre Css et tableaux ????

En tout cas, merci pour tes encouragements et ta sympathie.

Jean-Luc

[aymericj]

Bonjour jlb59,

Pour faire rapide, il n'ya pas de relation particulière entre CSS et référencement, c'est au niveau du code html qu la "différence" peut se faire.

Comme tu as pu voir, le code html est globalement assez simple, mais il faut savoir que chaque "élément" html a une valeur qui lui est propre qui signifie réellement quelque chose.

Quelques exemples :

Les balises hx signifient la presence d'un titre, le chiffre que l'on trouve près le h donne le niveau du titre :

- <h1></h1> précise que nous avons affaire à un titre de premier niveau, utilisé principalement pour le titre du site ou le titre de la page en cours

- <h2></h2> titre de deuxième niveau, on va dire que cela correspond en gros à un titre de rubrique

- <h3></h3> titre de troisieme niveau, etc etc et ça continue jusqu'a <h6></h6> il y'a 6 niveaux de titres

Ces balises ont une valeur sémantique pour les logiciels interprétant ces données, c'est à dire qu'elles définissent un ordre de priorité de l'information et structurent le document.

si tu fais un test sur une page html vierge d'ecrire 6 titres des 6 niveaux en n'ajoutant aucun élément de mise en page ajouté (mise en forme sous un logiciel type dreamwever) et que tu l'affiche dans ton navigateur, tu verras que par défaut ces éléments sont affichés différemment (le titre <h1></h1> sera affiché par défaut beaucoup plus gros que le <h6></h6>.

Tous les éléments html ont une valeur sémantique qui indiquent au navigateur à quel type de contenu il a affaire :

<p></p> indique clairement que nous avons affaire à un paragraphe

<ul></ul> indique que nous avons affaire à une liste non ordonnée

<ol></ol> indique une liste ordonnée

Etc etc... petite précision, les éléments de liste sont ensuite compris entre cette balise : <li></li>

En écrivant ce code :

<ol>
<li>n'importe quel texte</li>
</ol>

Nous indiquons au navigateur que nous avons un élement de liste (<li>) d'une liste ordonnée (<ol>) il va donc afficher par défaut un chiffre devant l'élément de liste lors de l'affichage (dans notre cas 1, car il n'y a qu'un seul élément).

Pour revenir aux tableaux, ils ont une valeur sémantique, celle d'indiquer que nous avons affaire à des données tabulaires.

Les tableaux (<table></table>) n'ont jamais été pensés pour faire des mises en mage complexes, mais pour permettre d'afficher des... tableaux de données.

Leur usage initial a été détourné à cause principalement de l'émergence des logiciels wysiwyg, parce que l'on pouvait rapidement faire des mises en page complexes et que globalement c'était affiché pareil dans les 2 principaux navigateurs de l'époque : IE et netscape.

Mais une mise en page en tableaux n'indique pas grand chose sur la structure du document aux robots des moteurs de recherche, et surtout rien sur la hierarchie réelle de l'information.

Si je reprend ton code :

 <tr>
		<td colspan="2" align="left" style="border-left: 1px solid black;background: #330000">
<a class="PgAccueil_Titre" style="color: #0099CC;" href="#">  » P2</a>
		</td>
	</tr>

Hormis le fait que tu as un bout de texte dans une cellule d'un tableau, le robot n'en tire rien d'autre il n'y a que toi qui sait que c'est ton titre de page, à la rigueur le visiteur humain pensera que c'est ton titre de page parce que l'auras mise en gras et d'une couleur plus voyante, mais c'est tout.

par contre si à la place tu utilise un :

<h1>  » P2</h1>

Le robot distinguera immédiatement que c'est le titre de la page, donc que c'est important.

Pour finir, il est vrai par contre que es éléments de base html ne permettent pas de faire des mises en page complexes, on peut y ajouter des éléments structurants du type <div>blabla contenu</div> qui permettent de découper ta page en blocs d'informations. Ensuite.... les CSS sont là pour positionner tout cela dans l'espace et pour décorer.

Voile, j'espère que cette explication aura été claire pour toi, tu trouveras des sources et explications plus complètes dans les messages en post-it de ce forum si tu décides de pousser plus loin.

Une bonne source, le site alsacreations.com qui est je le pense un bon endroit pour débuter avec les mises en page html/css.

Bon courage,

Aymeric

[jlb59]

Bonjour Aymeric,

Pour faire rapide, il n'ya pas de relation particulière entre CSS et référencement, c'est au niveau du code html qu la "différence" peut se faire.

Comme tu as pu voir, le code html est globalement assez simple, mais il faut savoir que chaque "élément" html a une valeur qui lui est propre qui signifie réellement quelque chose.

Leur usage initial a été détourné à cause principalement de l'émergence des logiciels wysiwyg, parce que l'on pouvait rapidement faire des mises en page complexes et que globalement c'était affiché pareil dans les 2 principaux navigateurs de l'époque : IE et netscape.

Mais une mise en page en tableaux n'indique pas grand chose sur la structure du document aux robots des moteurs de recherche, et surtout rien sur la hierarchie réelle de l'information.

Le robot distinguera immédiatement que c'est le titre de la page, donc que c'est important.

Je te remercie vivement pour m'avoir si bien détaillé tes explications, c'est assez rare et je t'en suis très reconnaissant.

En effet, tes explications sur les particularités d'un robot à lire les codes Html élaborés par mes soins sont très précises.

_________________________________________________________________

Je ne pensais pas que certains éléments étaient mieux lus que d'autres (par exemple le code sur le titre que j'aie mis dans un tableau et celui que tu m'as préconisé dans un Css). Tes explications sur ce processus laissent à penser que j'ai dû mettre bien trop de codes pour une lecture plus efficace par les robots.

Il est vrai que ma méthode d'écriture est assez rébarbative, mais si j'ai fait comme ça, c'est pour que je puisse les repérer plus facilement sur la page. Et comme j'ai appris comme ça, chasse le naturel, il revient au galop !...

J'espère que cette explication aura été claire pour toi, tu trouveras des sources et explications plus complètes dans les messages en post-it de ce forum si tu décides de pousser plus loin.

Une bonne source, le site alsacreations.com qui est je le pense un bon endroit pour débuter avec les mises en page html/css.

Je vais suivre ton précieux conseils et t'en remercie beaucoup.

En fait, je vois le référencement que de mon PC et me dit que cela doit être pareil pour les serveurs. Ben ! je me suis très bien "planté", si j'en juge par tes explications.

Alors, le seul moyen de suivre tes conseils est de reprendre ligne par ligne les codes Html que j'ai mis et de les adaptés dans un Css. C'est ça, non ????

Si c'est exact, y a du boulot hein ! Parce qu'il y a pas mal de pages à revoir.

Mais comme tu me l'avais précisé auparavant, le fait de faire cela sera moins contraignant pour modifier quoique ce soit sur les pages. Je n'aurais que le Css à modifier. C'est génial, mais avant tes précisions, je me disais que cela n'était pas nécessaire puisque ça marchait comme ça !!!

A bientôt et merci pour tout.

Cordialement, Jean-Luc

[aymericj]

Houlaaa je me quote moi même parce que j'ai ecris quelque chose qui peut être très mal interpreté :

Mais une mise en page en tableaux n'indique pas grand chose sur la structure du document aux robots des moteurs de recherche, et surtout rien sur la hierarchie réelle de l'information.

Ca, ça ne veut rien dire, c'est de la désinformation.

Je me précise, si tu fais une mise en page globale en tableaux, SANS préciser le type de contenus dans tes cellules (<h1>, <ol>, etcc) tu ne donne aucune information sur lidentité réelle de tes contenus.

Par contre, si dans ta construction en tableaux, tu inclus ces tags de façon à identifier les contenus, ça tient tout à fait la route.

Ce n'est pas totalement propre parce que l'on continue à détourner l'usage des tableaux, mais au moins les éléments de ta page sont bien "taggés" et les navigateurs et robots les "comprendront" mieux.

Si tu veux faire un passage en douceur de la mise en page dite "en tableaux" à la mise en page dite "full html/css" je te conseille dans un premier temps de commencer par correctement "tagger" tes éléments et de travailler a fond les css, puis quand tu te sentiras plus à l'aise, tu pourras assez facilement passer à la mise en page sans tableaux, car tu aura acquis une meilleur compréhension des comportements CSS et du code html au fur et a mesure de tes lectures.

Passer directement à la mise en page sans tableaux risque de te décourager car tu auras du mal à obtenir les rendus espérés du fait des différences propres aux navigateurs.

Pour revenir à ce que tu dis :

Mais comme tu me l'avais précisé auparavant, le fait de faire cela sera moins contraignant pour modifier quoique ce soit sur les pages. Je n'aurais que le Css à modifier. C'est génial, mais avant tes précisions, je me disais que cela n'était pas nécessaire puisque ça marchait comme ça !!!

C'est bien le problème, c'est que bien que ce ne soit pas fait pour, ça "marche", ce qui fait que encore beaucoup de "professionnels" du web ne voient pas l'intérêt de faire autrement.

Wala, j'ai fini pour le moment.

Si ça peut te rassurer je ne me suis mis au (x)html/css que depuis Février dernier.

Encore une fois bon courage.

++

Aymeric

Modifié 6 Septembre 2006 par aymericj