... WebDesign, graphisme et CSS !!!

... Bonjour à vous.

... Je viens de passer la journée à compulser tout ce que j'ai pu trouver sur les CSS car les <tables> sont démodées à ce qu'on m'a dit. Et le spacer.gif, je ne vais même pas l'aborder de peur de me faire lapider.

... Par contre, je serais assez curieux de voir jusqu'où on peut aller graphiquement avec les CSS à 100%, si vous avez une url à me communiquer, dans le style site de grande marque. La reconversion me paraît quand même pas si évidente que ça et j'avoue ne pas être complêtement convaincu en matière de compatibilité.

... Je constate également que de très nombreux sites dans le domaine du B2B ou du B2C se font encore avec les <tables>, serait-ce un hasard ???

... Merci à vous pour vos éclairages.

Cordialement

GraphiqueDesign

Bonjour & bienvenue

Pour ce qui est des galeries CSS, c'est pas ce qui manque. La plus connue (à ma connaissance ) est CSSmania ...

Concernant la compatibilité, le principal problème vient de l'implémentation dans les différents navigateurs, et en particulier dans IE 6. Mais (presque) rien n'est insurmontable, avec un peu d'expérience et beaucoup de patience

Les <table> sont démodées dans l'usage qu'on en a fait pendant longtemps, à savoir une mise en page uniquement à base de tables imbriquées, le plus souvent d'une complexité repoussante pour tous ceux qui avaient le malheur de mettre le nez dans le code ... Les tables sont par contre recommandées quand elles sont employées à bon escient : pour présenter des données tabulaires, évidemment, mais aussi pour certains cas de layouts (relativement rares) qui ne sont pas réalisables en CSS actuellement de façon robuste pour tous les navigateurs (je pense à une mise en page fluide avec plusieurs colonnes de même hauteur & de largeur variables, notamment).

Magnifique réponse de Thomas. Quelques petites choses à ajouter pour ma part:

Les sites professionnels utilisent-ils CSS?

Pour la question des sites professionnels réalisés plutôt en mise en page CSS ou plutôt avec des tableaux... eh bien, la question est un peu biaisée, car la pratique a du retard sur la technologie et la réalité des implémentations. Par exemple, des sites comme Amazon (.fr et .com) utilisent une mise en page en tableaux. Des sites comme materiel.net utilisent parfois les tableaux, mais avec beaucoup plus de parcimonie (avec la Web Developer Toolbar de Chris Pederick sous Firefox: Entourer > Tableaux > Cellules de tableau). Enfin, d'autres sites ne les utilisent pas du tout, et il ne s'agit pas que de petits sites: voir yahoo.fr et yahoo.com, par exemple.

Il reste énormément de sites réalisés avec des tableaux imbriqués dans tous les sens, et la raison principale est la mise à niveau des professionnels. Beaucoup n'ont pas (encore) mis à jour leurs compétences dans ce domaine, et tu en es un exemple.

D'autres professionnels du Web par contre travaillent en faisant une utilisation minimale des tableaux de mise en page (c'est-à-dire l'utilisation que décrit Thomas). J'en fait partie. J'ai une très bonne expertise des CSS, et réaliser des intégrations sans tableau (en dehors des quelques cas où c'est utile et efficace) ne me pose aucun problème. Bien sûr, si on maitrise l'intégration avec les tableaux mais que l'on est bancal en positionnement CSS, on aura tendance à considérer que l'intégration CSS n'est pas au point. C'est une critique qui revient souvent: des personnes non formées qui affirment «mouais, c'est pas au point». Je te fais confiance pour ne pas tomber dans ce travers.

Différences dans les approches

Pour apprendre le positionnement CSS correctement, il faudra par contre mettre un peu en veilleuse les connaissances déjà acquises. C'est aussi l'occasion de revoir les connaissances que tu peux avoir en HTML. Que connais-tu du HTML sémantique? (Je te rassure, ça s'apprend très vite.) As-tu des notions d'accessibilité?
La chose la plus efficace que tu puisse faire est, je pense, de prendre un peu de temps en parallèle de ton travail pour reprendre les pages de (X)HTML et CSS. Attention: l'intégration HTML/CSS est très différente de l'intégration HTML+tableaux. L'approche n'est pas la même. J'en parle ici:
http://blog.alsacreations.com/2007/04/07/344-demarche-integration-html-css
Je pense que ce billet est un bon support pour reprendre les bases (en suivant les liens qu'il donne). Tu peux aussi consulter:
http://css.alsacreations.com/Comment-debuter-et-trouver-l-information

La plus grosse erreur que tu puisse faire, c'est tenter de transposer directement tes connaissances actuelles, ou de t'attaquer directement à une intégration complète et complexe en te disant «ok, je tente sans tableaux». C'est beaucoup plus enrichissant (et efficace) de reprendre les bases et de redécouvrir des choses que l'on avait oubliées où qu'on n'avait jamais vues (la spécification HTML 4.01, qui est encore la référence, a dix ans... l'as-tu déjà consultée? la consultes-tu régulièrement?).

Pourquoi apprendre CSS si ça marche déjà bien?

Mettons qu'aujourd'hui les deux méthodes d'intégration (avec tableaux en masse ou avec essentiellement du positionnement CSS) se valent. Ce n'est pas tout à fait mon avis, mais il est difficile de prouver scientifiquement une éventuelle supériorité de l'une ou de l'autre, donc on va partir de ce postulat: les deux se valent.

La principale chose qui limite l'intérêt des CSS aujourd'hui est le support par les navigateurs. Internet Explorer 5 (Mac ou PC) est pour ainsi dire mort, et la lanterne rouge est donc Internet Explorer 6, dont la présence sur le marché limite l'utilisation de certains aspects de CSS (les sélecteurs avancés, par exemple). Mais même IE6 n'est pas éternel, depuis deux mois il marque le pas face à IE7, et bien sûr on a dans les 20-30% d'utilisateurs de navigateurs alternatifs et modernes en Europe.

On peut se projeter dans cinq ans: la référence sera alors Internet Explorer 8 (avec IE9 bien installé également), Firefox 4 ou 5, Safari 4 ou 5, Opera 10 ou 11. On aura de manière compatible un très bon support de CSS 2.1, un support de certaines propriétés CSS3, peut-être un peu de HTML 5. L'intérêt des CSS sera alors plus qu'évident, tant il est vrai que seulement la spécification CSS 2.1 permet:
- de faire la même chose qu'avec des tableaux de mise en page (en utilisant display: table-cell et display: inline-block, par exemple);
- de faire d'autres choses que les tableaux de mise en page ne permettent pas (positionnement absolu, fixe, flottant, etc.).

La question est donc: faut-il attendre deux ans, trois ans, cinq ans pour se former?
Ou faut-il commencer maintenant, afin d'avoir une base de connaissances solides en CSS qui permettra de suivre les évolutions?

Je pense que la deuxième option est la meilleure.
Si tu la choisis, bienvenue sur Alsacréations, qui deviendra peut-être ton adresse de référence pour accompagner ton apprentissage.

@Florent: C'est ça que tu appelles "quelques petites choses à ajouter" ?

@GraphiqueDesign: et encore, on te fait grâce de l'aspect accessibilité ...

Thomas D. a écrit :
Bonjour & bienvenue

... Hello Thomas, merci à toi ;o)

Thomas D. a écrit :
Pour ce qui est des galeries CSS, c'est pas ce qui manque. La plus connue (à ma connaissance ) est CSSmania ...

... Oui, je suis allé voir, c'est assez impressionnant !!!
... Mais bon, venant du graphisme, je ne te dis pas à quel point je me sens démuni quand je regarde le code source de la page !!!

Thomas D. a écrit :
Concernant la compatibilité, le principal problème vient de l'implémentation dans les différents navigateurs, et en particulier dans IE 6. Mais (presque) rien n'est insurmontable, avec un peu d'expérience et beaucoup de patience

... et d'après mes sources <http://www.w3schools.com/browsers/browsers_stats.asp> IE 6 est bien l'un des navigateurs les plus utilisés (seconde position devant IE 7) ... je rencontre là, pour ma part, une certaine incohérence. Ensuite, le second problème, c'est le temps qu'il va nous falloir pour l'UpGrade des connaissances. Les bases sont assez accessibles grâce à certains sites que je bénis au passage. Mais ensuite, pour être vraiment bon là dedans, il ne faudrait faire que cela et nous ici sommes très polyvalents avec le print, le multimédia, l'audio-visuel, etc... Difficile de se dire que notre prochaine réalisation se fera sans <table> !!!!

Thomas D. a écrit :
Les <table> sont démodées dans l'usage qu'on en a fait pendant longtemps, à savoir une mise en page uniquement à base de tables imbriquées, le plus souvent d'une complexité repoussante pour tous ceux qui avaient le malheur de mettre le nez dans le code ... Les tables sont par contre recommandées quand elles sont employées à bon escient : pour présenter des données tabulaires, évidemment, mais aussi pour certains cas de layouts (relativement rares) qui ne sont pas réalisables en CSS actuellement de façon robuste pour tous les navigateurs (je pense à une mise en page fluide avec plusieurs colonnes de même hauteur & de largeur variables, notamment).

Je suis en théorie tellement d'accord avec toi Thomas, mais dans la réalité, il va nous falloir du temps, beaucoup de temps avant de pouvoir sortir du 100% CSS en standard. Mais si ce n'est pas le temps, ce n'est pas l'envie qui manque !!!!!

Merci pour tout ;o)

Thomas D. a écrit :
@Florent: C'est ça que tu appelles "quelques petites choses à ajouter" ?

... attend, j'ai même pas encore réussi à en assimiler la moitié !!!!!!!
... Florent, je dois d'abord visiter toutes tes url et essayer les différentes solutions avant de te répondre, mais d'emblée, vraiment gros merci bien chaleureux !!!!!!

Thomas D. a écrit :
@GraphiqueDesign: et encore, on te fait grâce de l'aspect accessibilité ...

... oui je sais Thomas, ActionScript nous était relativement accessible en version 1 et 2, je pense qu'avec la dernière mouture (la 3) ça devient une affaire de spécialiste. Si on veut vraiment voir les choses correctement avec les CSS, j'en arrive presque à la même conclusion (en tout cas trop pour un seul homme) !!!!!

... Mais je ne baisse pas les bras ;o)))

Il est vrai que les technologies web deviennent plus poussées, et donc plus spécialisées. Par exemple, «Intégrateur HTML/CSS» ou «Développeur Front-End» est un poste à part entière dans certaines boites, alors que traditionnellement la petite web-agency a un graphiste-print-et-web-qui-fait-les-pages-html-aussi.

Si vous êtes plusieurs dans votre boite, peut-être faudrait-il une spécialisation des différents employés? Ou embaucher un technicien déjà spécialisé là où vous avez des besoins. Ou encore: sous-traiter l'intégration HTML/CSS.
Il y a pas mal de solutions organisationnelles, mais il faut au moins dans l'équipe des personnes ayant une connaissance de base des différents aspects pour faire le lien, évaluer la qualité du travail de prestataires éventuels, vérifier que le travail de ces prestataires ou de tel ou tel membre de l'équipe sera repris correctement lors de la prochaine étape technique du projet, etc.

GraphiqueDesign a écrit :
... oui je sais Thomas, ActionScript nous était relativement accessible en version 1 et 2, je pense qu'avec la dernière mouture (la 3) ça devient une affaire de spécialiste. Si on veut vraiment voir les choses correctement avec les CSS, j'en arrive presque à la même conclusion (en tout cas trop pour un seul homme) !!!!!

Je parlais de l'accessiblité de la page Web, i.e. la possibilité et/ou le comfort avec lequel une personne souffrant d'un handicap pourra consulter la page. Par exemple, une mise en page complexe avec de nombreux tableaux imbriqués est imbuvable lorsqu'elle est lue par une synthèse vocale.

Mais c'est une problématique qui dépasse la seule mise en forme de la page

... Hello Thomas et Florent

... Suite à nos échanges, je tente de comprendre un peu les CSS (passion naissante).
... J'ai essayé de monter une interface avec 3 entêtes, 3 colonnes et un pied de page. Bon, l'approche se fait doucement et j'utilise encore un peu des tableaux dans les DIV. Le but est de ne plus en avoir un seul.

... J'ai mis ça en ligne ici: http://graphiquedesign.pagesperso-orange.fr/9.htm

... Mais le problème, là dans l'immédiat, c'est le comportement bizarre de la colonne centrale qui réagit bien avec tous les navigateurs, sauf IE6. Dans ce cas, il me projette le tableau en bas de page.

... Une fois que j'aurai monté ma page avec encore quelques <table>, le but sera finalement de ne plus en avoir un seul. Mais avec IE6 je n'arrive à rien et c'est le navigateur le + répondu ... et pourtant je n'utilise pas de padding là ;o)))

... Un rayon de lumière serait trop apprécié par ici !!!

Merci pour votre compréhension

GraphiqueDesign a écrit :
Mais avec IE6 je n'arrive à rien et c'est le navigateur le + répandu

À voir, IE7 est pas loin de passer devant (et ne posera pas ce problème précis).

GraphiqueDesign a écrit :
... et pourtant je n'utilise pas de padding là ;o)))

Le padding ou les bordures ne posent problème dans IE6 que si on travaille en mode Quirks (par exemple sans Doctype ou avec un Doctype tronqué) ce qui n'est pas le cas ici. Tu peux travailler systématiquement en mode standard (c'est très largement conseillé), et oublier cette idée fausse comme quoi IE6 n'arriverait pas à gérer le modèle de boite CSS.

GraphiqueDesign a écrit :
Un rayon de lumière serait trop apprécié par ici

Alors à vue de nez c'est le vieux problème du Three Pixel Jog, vieux bug d'IE6 documenté ici:
http://www.positioniseverything.net/explorer/threepxtest.html

Ce bug repousse le contenu de div#mainContent de 3px. Or, tu y as placé un tableau en width: 100%. Le tableau ne peut donc pas tenir dans la largeur restante (100% moins 3px).

Solutions:
1. ne pas avoir d'élément en width: 100% dans ce bloc (on peut par contre avoir des éléments de type bloc qui prendront naturellement toute la largeur disponible... seuls les tableaux en width: 100% ou éventuellement width: 99.5% posent problème;
2. ou bien conférer le layout à div#mainContent afin que l'effet du Three Pixel Jog soit absorbé par le bloc conteneur et non pas par son contenu.

Moi je tenterais bien un truc de ce genre:

<style type="text/css" media="screen">
div#gauche {
	float: left;
	width: 160px;
	margin-right: 10px;
}
div#droite {
	float: right;
	width: 160px;
	margin-left: 10px;
}
div#centre {
	overflow: hidden; /* contexte de formatage */
}
</style>
<!--[if lte IE 6]><style type="text/css" media="screen">
div#gauche {
	margin-right: 7px;
}
div#droite {
	margin-left: 7px;
}
div#centre {
	zoom: 1; /* hasLayout pour émuler contexte de formatage */
}
</style><![ endif ]-->

(Nota: la syntaxe du commentaire conditionnel n'est pas exacte pour éviter un problème lié au forum. Voir la FAQ pour la syntaxe juste.)

Pour les questions:
- Qu'est-ce que les commentaires conditionnels ?
- Qu'est-ce que le HasLayout, et comment l'utiliser?
- utilisation d'un contexte de formatage dans un design à trois colonnes.

... Hello Florent, bonsoir.

... Je t'enverrais bien un cageot de mangues pour te remercier de ta patiente :o))) Demain matin, je vais aller suivre tes liens afin d'en apprendre toujours plus, ce soir suis cuit. Finalement, suite à une modif dans ma page, ça a l'air de fonctionner maintenant mais je ne sais pas si c'est propre (le code). J'ai passé la colonne centrale en float left et j'y ai mis le tableau en valeur réelle (px).

Voici le lien: http://graphiquedesign.pagesperso-orange.fr/99.htm

... Histoire de finir correctement cette première journée CSS commencée à 6 heures ce matin, j'ai encore ajouté un menu horizontal dans le header3. Demain, je vais tenter un habillage graphique de l'interface, je ne sais pas encore comment je vais m'y prendre, la démarche n'est définitivement pas la même qu'avec les <table>.

... Je pense que dans un premier temps je vais garder 1 ou 2 tableaux (béquille) dans un DIV, plus tard je t'enterai de m'en passer complêtement. Si jamais tu jettes un œil à mon code dans les prochains jours, je recevrai avec satisfaction tes critiques ... mais attention, tiens compte de mon niveau, c'est horrible quand on te donne des indications que tu ne comprends pas ;o))))

... Merci Florent.

GraphiqueDesign a écrit :
... Je pense que dans un premier temps je vais garder 1 ou 2 tableaux (béquille) dans un DIV, plus tard je t'enterai de m'en passer complêtement.

C'est une stratégie qui me parait parfaitement censée.
En fait dans le cas de la page que tu montres j'aurais utilisé -- si je n'étais pas sûr de moi en ce qui concerne les flottants et les bugs d'IE6 -- un seul tableau: pour faire les trois colonnes de la structure globale. Ça me «garantit» plus ou moins que ma structure globale sera en place et qu'il n'y aura pas une colonne chassée en dessous des deux autres par exemple, comme ça peut arriver parfois avec des flottants mal gérés.

Pour les contenus de ces colonnes, par contre, l'utilisation de tableaux me semble un peu excessive. Tu as l'air d'utiliser beaucoup de cellules de tableaux vides pour créer des espaces et des retraits, alors que les marges et padding marchent très bien pour ça (avec la petite subtilité de la fusion des marges à connaitre éventuellement).
Modifié par Florent V. (23 Mar 2008 - 19:56)

... Bonsoir Florent

Florent V. a écrit :
C'est une stratégie qui me parait parfaitement censée.
En fait dans le cas de la page que tu montres j'aurais utilisé -- si je n'étais pas sûr de moi en ce qui concerne les flottants et les bugs d'IE6 -- un seul tableau: pour faire les trois colonnes de la structure globale. Ça me «garantit» plus ou moins que ma structure globale sera en place et qu'il n'y aura pas une colonne chassée en dessous des deux autres par exemple, comme ça peut arriver parfois avec des flottants mal gérés.

... Si tu me proposes de revenir sur une structure tableau, je m'inquiète un peu, elle est tellement pas correcte, ma page ???
... J'ai en gros fini mon squelette et maintenant reste à habiller graphiquement la chose. Les possibilités graphiques sont justement trop intéressantes, notamment de pouvoir superposer un DIV sur un DIV avec dans chacun une image de fond différentes, chose selon moi impossible à faire sur un <table>. La dernière version se trouve ici:

http://graphiquedesign.pagesperso-orange.fr/Version15/97.htm

... Bon, il est clair que je manque d'expérience et de recul mais la page a l'air de s'afficher correctement sur une dizaine de navigateurs différents dont IE6W, IE5Mac (menu Spry développé), FireFox (win et Mac), Opéra, Camino ...
... C'est le résultat de trois jours d'apprentissage des CSS (DIV) et je souhaiterai vraiment approfondir mes connaissances. Si tu y vois une erreur grossière, vraiment grossière, peux tu me mettre simplement sur la piste ???

Florent V. a écrit :
Pour les contenus de ces colonnes, par contre, l'utilisation de tableaux me semble un peu excessive. Tu as l'air d'utiliser beaucoup de cellules de tableaux vides pour créer des espaces et des retraits, alors que les marges et padding marchent très bien pour ça (avec la petite subtilité de la fusion des marges à connaitre éventuellement).

... Bon, je viens du monde de la PAO et j'ai suivi une formation assez importante sur Flash avec l'AS et Lingo (Director).
... Le web, je l'ai appris sur le tas avec mon bon sens et effectivement des softs à la DreamWeaver (ce qui n'est pas la meilleur manière, j'en conviens). Par rapport à Flash par exemple, en terme de rigueur, travailler avec les tableaux et les shims m'a toujours laissé l'impression d'un vulgaire bidouillage mais bon, au résultat final et visible, ça fonctionne. Tous nos client ne souhaitent pas une accessibilité particulière et le code source ne les intéressent pas plus, ils veulent simplement que cela fonctionne et qu'il puissent communiquer avec leur site et son contenu. Le contenu a toujours prévalu sur le contenant.

... Aujourd'hui, grâce aux CSS, on pourrait penser que c'en est fini avec le bricolage. Je le répète, même les plus grands on utilisé la stratégie du gif transparent dès lors que les sites devenaient, à l'aide du graphisme, une valeur ajoutée de l'entreprise. Très honnêtement, pour la plupart des clients, on pourrait continuer encore longtemps à se battre avec des tableaux, ne serait-ce qu'en prétextant une plus grande visibilité par une plus grande accessibilité ... aux anciens navigateurs (IE5 sur MacOS9 par exemple) !!!!!

... Mais il est clair qu'aujourd'hui avec les marges et padding, le spacer.gif n'a plus de raison d'être. C'est drôle, tu préconises de monter le site sur un tableau et les contenus sur des DIV alors que je prévoyais de faire le contraire afin, de peu à peu, remplacer les dernières <table> par des DIV. Par exemple, le petit menu horizontal sur ma page aurait hier encore été un tableaux !!!

... En tout cas, si la structure de la page tient la route, je vais m'attaquer au contenu, avec aucun gif et le moins possible de tableaux. C'est pourquoi ton avis m'est indispensable ;o)))

Bien cordialement

GraphiqueDesign a écrit :
Si tu me proposes de revenir sur une structure tableau, je m'inquiète un peu, elle est tellement pas correcte, ma page ???

Non, il ne s'agit pas de cela. Mais comme tu le dis plus loin:

GraphiqueDesign a écrit :
C'est drôle, tu préconises de monter le site sur un tableau et les contenus sur des DIV alors que je prévoyais de faire le contraire afin, de peu à peu, remplacer les dernières <table> par des DIV. Par exemple, le petit menu horizontal sur ma page aurait hier encore été un tableaux !!!

De mon point de vue, la principale cause de découragement des apprenants dans l'utilisation des CSS est quand une partie importante de la mise en page «saute» à cause d'une mauvaise utilisation du positionnement CSS, ou à cause d'un bug de tel ou tel navigateur (essentiellement des bugs d'IE6, en bonne partie corrigés dans IE7, mais IE6 reste, dans le meilleur des cas, la base à assurer). Avec des colonnes flottantes, par exemple, si tu ne connais pas bien les questions de Three Pixel Jog, de Doubled Margin Bug, de gestion erronée de width ou de HasLayout, tu peux avoir un rendu «explosé» dans IE6, c'est à dire tout simplement une colonne qui «passe à la ligne», et donc se place sous les autres.
Avec un tableau (une ligne, trois cellules), le risque principal est d'avoir un élargissement du tableaux à cause d'un contenu trop large (suite de caractères sans espace, image trop large, etc.). Ça reste un risque, mais la conséquence est minimisée.

D'où la stratégie suivante pour les personnes qui viennent de la mise en page avec tableaux:
1. assurer la structure globale avec un, peut-être deux tableaux de mise en forme;
2. se passer de tableaux pour tout le reste (parce que, franchement, ça sera tout bêtement inutile pour le reste, sauf cas particulier), sauf bien sûr pour les tableaux de contenu.

GraphiqueDesign a écrit :
Tous nos client ne souhaitent pas une accessibilité particulière et le code source ne les intéressent pas plus, ils veulent simplement que cela fonctionne et qu'il puissent communiquer avec leur site et son contenu. Le contenu a toujours prévalu sur le contenant.

Certes et encore heureux.
Si je suis éditeur, je cherche avant tout à publier les bons textes. Mais ça ne m'empêche pas de travailler la maquette pour autant, n'est-ce pas?

Pour l'accessibilité, je pense qu'une prise en compte minimale de l'accessibilité dans la conception d'un site contribue à sa qualité technique, qui peut être perçue par de nombreux utilisateurs dans de nombreuses conditions, et pas uniquement par les handicapés visuels utilisés régulièrement comme exemple. À ce sujet, je te laisse jeter un oeil aux textes sur l'accessibilité publiés sur Openweb. Un site que je t'invite à consulter régulièrement, d'ailleurs.

Quant au code source... eh bien, un avantage d'une bonne utilisation de la mise en page CSS et dans une certaine mesure du balisage HTML «sémantique» est que le code source devient sensiblement plus lisible, plus simple à analyser, plus simple à modifier et corriger. Bref, une maintenance facilitée, que cela concerne:
- le professionnel qui a écrit ce code au départ (revenir sur un projet vieux d'un ou deux ans n'est pas toujours facile...);
- un professionnel qui n'a pas encore travaillé sur le projet et qui dois faire la maintenance d'un site écrit par d'autres.

Mais ces arguments sont développés ailleurs, et je ne voudrais pas faire de redite.

GraphiqueDesign a écrit :
même les plus grands on utilisé la stratégie du gif transparent

Et à l'époque ils ont eu raison. Mais l'époque d'IE4, NN4 et IE5 est révolue.

Florent V. a écrit :
De mon point de vue, la principale cause de découragement des apprenants dans l'utilisation des CSS est quand une partie importante de la mise en page «saute» à cause d'une mauvaise utilisation du positionnement CSS, ou à cause d'un bug de tel ou tel navigateur (essentiellement des bugs d'IE6, en bonne partie corrigés dans IE7, mais IE6 reste, dans le meilleur des cas, la base à assurer). Avec des colonnes flottantes, par exemple, si tu ne connais pas bien les questions de Three Pixel Jog, de Doubled Margin Bug, de gestion erronée de width ou de HasLayout, tu peux avoir un rendu «explosé» dans IE6, c'est à dire tout simplement une colonne qui «passe à la ligne», et donc se place sous les autres.
Avec un tableau (une ligne, trois cellules), le risque principal est d'avoir un élargissement du tableaux à cause d'un contenu trop large (suite de caractères sans espace, image trop large, etc.). Ça reste un risque, mais la conséquence est minimisée.

... Hello Florent, bonsoir.

... Ce fût aujourd'hui le dernier des 4 jours que j'ai pu entièrement consacrer à l'apprentissage des CSS.
... Au résultat, j'ai effectivement une page avec entête, pied et 3 colonnes, sans aucun commentaire conditionnel pour IE et visiblement ça passe dans IE6 et autres. Bon, dans IE5 W, ça ne fonctionne plus trop mais je ne sais pas si la parade existe réellement pour ce vieux navigateur. Par contre, je n'utilise plus aucun tableau dans la structuration de la page, si ce n'est 1 ou 2 qui traînent là depuis le début de l'exercice mais qui disparaîtront. Mon challenge est respecté ;o))))

... Graphiquement, c'est du n'importe quoi vu que le but de l'opération était de m'ouvrir l'esprit sur les CSS. Une fois le principe acquis, il sera toujours temps de me dégommer les yeux dans PhotoShop.

http://graphiquedesign.pagesperso-orange.fr/Version17/17.htm

... Je te relance une nouvelle fois donc sur l'éventualité que tu puisses y déceler une énorme bourde, sans pour autant m'en donner la correction, peut être un lien vers des explications plutôt. J'ai lu et relu toutes les pages que tu m'as transmis et je te remercie une nouvelle et ultime fois pour ton temps consacré à mes connaissances. À charge de revanche.

Cordialement

Michel

Hello,

Pas vu d'énorme bourde, mais j'ai croisé ceci:

<p class="sous_titre">Descriptif : </p>

Pourquoi ne pas utiliser un élément HTML correspondant à un titre (à vue de nez un h2 ici, mais ça va dépendre de comment tu structures tes titres pour l'ensemble du document).
La remarque vaut aussi pour div.titre_general et div.bloc_sous_titre (qui pourraient être respectivement des éléments h1 et h2). Attention à la divite, il existe d'autres éléments HTML que div et td.

Autre chose, tu as trois blocs imbriqués pour dessiner ton cadre global (div#container, div#container_fond_bas, div#container_fond). Deux suffiraient ici, ou même un seul si tu intègres l'image du bas dans le pied de page (avec un padding-top en conséquence. Mais bon, ça dépend du design à intégrer et ici ce n'est qu'un test.

Dernière chose: les liens avec icônes «valide HTML» et «valide CSS» ne servent pas à grand chose, objectivement parlant (et la bordure autour des images s'enlève avec un simple a img {border: none;} dans la feuille de styles).

Florent V. a écrit :
Hello,

Pas vu d'énorme bourde, mais j'ai croisé ceci:

<p class="sous_titre">Descriptif : </p>

Pourquoi ne pas utiliser un élément HTML correspondant à un titre (à vue de nez un h2 ici, mais ça va dépendre de comment tu structures tes titres pour l'ensemble du document).
La remarque vaut aussi pour div.titre_general et div.bloc_sous_titre (qui pourraient être respectivement des éléments h1 et h2). Attention à la divite, il existe d'autres éléments HTML que div et td.

... Bonjour Florent !!!
... Oui bien sûr, j'ai vu sur http://www.tuteurs.ens.fr/ beaucoup d'informations non seulement sur les CSS, mais sur la structure xhtml même. Dès que j'ai un moment, je m'y replonge !!!!

Florent V.Autre chose, tu as trois blocs imbriqués pour dessiner ton cadre global (div#container, div#container_fond_bas, div#container_fond). Deux suffiraient ici, ou même un seul si tu intègres l'image du bas dans le pied de page (avec un padding-top en conséquence. Mais bon, ça dépend du design à intégrer et ici ce n'est qu'un test.[/quote a écrit :


... Exactement. L'intérêt de cet exercice était simplement une prise de contact avec les CSS afin d'éviter l'usage des tableaux, là où l'on en aurait pas besoin vraiment !!! Il est clair que pour imaginer le design, vaut mieux connaître la techno employée !!!

[quote=Florent V.]Dernière chose: les liens avec icônes «valide HTML» et «valide CSS» ne servent pas à grand chose, objectivement parlant (et la bordure autour des images s'enlève avec un simple a img {border: none;} dans la feuille de styles).

... Bon, fallait trouver une manière symbolique de bien finir l'exercice avec une forme de congratulation ;o)))
... Si tu vas sur mon site perso, je dois avoir plus de 1000 erreurs dans ma page !!! Là c'était histoire de me faire plaisir, après avoir consacré l'intégralité du week end Pascal à cela !!! Puis l'aspect validation W3C n'est pas, pédagogiquement, à négliger car même si ça ne détecte pas les erreurs sur le plan de la sémantique, ça détecte toutes les autres par contre !!!!!

... Maintenant question: concernant les feuilles de style conditionnelles, y a t'il une syntaxe précise pour les différents navigateurs ??? IE5 Windows et IE5 Mac ??? ou encore IE5.5 ???
... J'arrive à corriger mes CSS pour que cela fonctionne sur IE5 Mac mais IE5.5 Windows, c'est la cata totale. Est-ce même possible de le faire ??? J'ai essayé une partie de la nuit mais sans résultat !!!!! Connais-tu des liens qui mènent à de l'info sur le sujet ???

... Bonne journée à toi !!!
... Merci ;o)

GraphiqueDesign a écrit :
... Maintenant question: concernant les feuilles de style conditionnelles, y a t'il une syntaxe précise pour les différents navigateurs ??? IE5 Windows et IE5 Mac ??? ou encore IE5.5 ???

La FAQ donne déjà une partie de la réponse à cette question.

Les commentaires conditionnels sont appliqués par Internet Explorer Windows. IE Mac, par contre, est un navigateur différent, et n'en tient pas compte. Mais bon, IE5 Mac est pour ainsi dire mort, et IE5 Win n'en est pas loin.

GraphiqueDesign a écrit :
mais IE5.5 Windows, c'est la cata totale.

Pour le coup, IE 5.5 n'applique pas le modèle de boite standard (j'allais dire qu'il interprète systématiquement les pages en mode Quirks, mais il faudrait que je vérifie ce point avant de peut-être dire une bêtise).

Je pense qu'à l'heure actuelle il y a assez à faire avec les bugs d'IE6 pour qu'on n'ait pas besoin de s'occuper d'IE 5.5 (et encore moins d'IE 5.0). Pour la part des utilisateurs d'IE 5, lire Parts de marché des navigateurs, la compil.