Aller au contenu

Pourquoi utiliser un pixel transparent ?


David Vincent

Sujets conseillés

Certaines chartes graphiques sont réglées pour cadrer des éléments au pixel prêt. Difficile alors de se contenter des paramètres d'alignement du code HTML, il faut trouver des astuces. L'une des plus courantes consiste en l'utilisation d'une image transparente de 1x1 pixel permettant une plus grande souplesse et une plus grande compatibilité entre navigateurs.

Voici quelles raisons ont amené son utilisation.

Ce sont principalement ces différences qui nous amènent à utiliser les techniques suivantes pour cadrer des éléments au pixel près.

Bonne lecture :)

Lien vers le commentaire
Partager sur d’autres sites

il y a aussi les feuilles de style qui peuvent servir...

par exemple

<td style=padding-left:5px>

pour créer des espaces entre les tableaux, c'est très très utile.

Lien vers le commentaire
Partager sur d’autres sites

Salut,

il y a aussi les feuilles de style qui peuvent servir...

C'est vrai que le CSS semble donner de puissants outils pour définir tous ce type de caractéristiques... Mais en fait, si on y regarde de plus près, ca n'est pas aussi simple.

Il y a quelques temps, j'ai essayé de faire toute la mise en page d'un site uniquement avec du CSS, mais j'ai eu la douloureuse surprise :( de constater que (par exemple) IE et Mozilla interpretaient très légèrement différemment les instructions CSS.

Pour être plus précis, le calcul de la largeur de la boite (margin-left + border-left + padding-left + width + padding-right + border-right + margin-right) donnaient des résultats différents, et donc, selon le navigateur, un petit ecart de 1 ou 2 pixels !

Je suis donc fini par opter pour un mix CSS-Pixel transparent ;)

A plus,

Fruge

Modifié par Fruge
Lien vers le commentaire
Partager sur d’autres sites

Bonsoir,

j'avais d'abord opté pour un total CSS, et je m'y suis brisé les reins... Faut travailler avec un papier calque scotché sur l'écran....

Pour les tableaux imbriqués, ils sont généralisés tant leur emploi est facile.

Je pense que la prochaine fois, je vais opter pour : No CSS, No TABLE. Que du <h1><H2><H3>. Que du texte, avec une image. Que du rapide...

A+, Anonymus.

Lien vers le commentaire
Partager sur d’autres sites

Bonsoir,

En accord avec ce que j'affirme dans ma signature... :rolleyes:

Tes articles sont remarquables et intéressants, David, j'y ajouterai cependant quelques commentaires.

En fait, tu m'a forcée à étudier quelque chose que j'ignorais ;) : l'utilisation des tableaux en HTML. En effet, 3 mois après la mise en ligne de mes premières pages (réalisées avec FrontPage Express :( ), j'ai découvert CSS 1 et abandonné définitivement les tableaux pour la mise en page.

J'ai repris tes 2 premiers exemples et essayé de comprendre.

En réalité, l'attribut bordercolor n'existe pas dans les spécifications du W3C (lien vers la traduction française), il est propriétaire à IE. C'est donc Netscape, Mozilla et Opera qui ont raison en ne l'interprétant pas (ou mal).

Pour déterminer la couleur de la bordure d'un tableau, il faut utiliser les feuilles de style. En voici un exemple avec 4 captures d'écran.

Evidemment, Netscape 4 ne comprend pas :wacko:

L'élément table ne devrait être utilisé que pour des tableaux de données, et non pour la mise en page.

L'utilisation des blocs imbriqués n'est pas plus complexe que celle des tableaux imbriqués. C'est une question d'habitude et de clarté du code (par exemple, j'ai pris l'habitude d'indiquer, en commentaire, la class ou l'id d'un bloc à côté de la balise de fin du bloc).

La vraie difficulté (et tu as raison, Fruge), c'est le calcul des largeurs des blocs - pour IE, la largeur de la bordure s'ajoute à celle du bloc, par exemple. Mais des pros ont étudié le problème et des solutions sont proposées dans de nombreux sites. Un exemple sur openweb et beaucoup d'autres en faisant une recherche sur css box model.

Lien vers le commentaire
Partager sur d’autres sites

L'élément table ne devrait être utilisé que pour des tableaux de données, et non pour la mise en page.

Ah bon ? Mais pourquoi ? Au début je n'utilisais que les calques car avec Dream c'était tout simple (quand tu parles de blocs tu parles bien de calques ?). Et je me suis rendue compte que selon la configuration de l'écran la mise en page n'était plus la même. Alors qu'avec des tableaux on peut définir l'étirement, etc. Avec les calques aussi sans doute, mais finalement ça revient au même non ?

En tous cas bravo David pour ces deux articles.

Lien vers le commentaire
Partager sur d’autres sites

L'élément table ne devrait être utilisé que pour des tableaux de données, et non pour la mise en page.

Je n'utilise pour ma part que des tableaux pour la construction de mes sites et ceux de mes clients. Des tableaux bien construits, c'est du béton, cela ne bouge pas d'un pixel, quelque soit le navigateur.

Les feuilles de style sont à mon avis interprétées de manières trop différentes par les navigateurs du marché...

Lien vers le commentaire
Partager sur d’autres sites

L'élément table ne devrait être utilisé que pour des tableaux de données, et non pour la mise en page.

Ah bon ? Mais pourquoi ? Au début je n'utilisais que les calques car avec Dream c'était tout simple (quand tu parles de blocs tu parles bien de calques ?). Et je me suis rendue compte que selon la configuration de l'écran la mise en page n'était plus la même. Alors qu'avec des tableaux on peut définir l'étirement, etc. Avec les calques aussi sans doute, mais finalement ça revient au même non ?

Oui calques, layout ou blocs veulent dire la même chose dans ce cas.

Bien sûr que les blocs peuvent s'adapter, tant au contenu qu'aux dimensions de la fenêtre... il suffit d'utiliser des valeurs relatives.

La grande différence est au niveau de l'accessibilité.

Ceux qui utilisent un navigateur texte ou vocal (ce qui est le cas des aveugles) lisent un tableau ligne par ligne. Il leur est donc beaucoup plus difficile de suivre la logique du texte qu'avec une succession de blocs.

Et dans le cas de ton site essentiellement basé sur du texte, cela me semble particulièrement important. C'est le type même de site qui pourrait avoir du succès chez les aveugles.

Internet est pour eux une fabuleuse ouverture sur le monde.

Je te recommande la lecture de ce site à ce sujet.

Lien vers le commentaire
Partager sur d’autres sites

Idem, je ne suis pas près de me mettre aux positionnements par CSS.

Si les tableaux ne servent qu'aux données, je me permet de rétorquer, chere Monique, qu'une information n'est qu'une donnée, et inversement. Tout n'est que 'données', d'autant que c'est tout issu des.. bases de données ;)

Pour ma part, j'ai pris modele sur les sites informatiques, qui ne sont jamais structurés.

En fait, il y a 3 écoles :

- les CSS,

- les tableaux,

- les <h1><h2>..<ul>,<etc>

La prochaine fois que je refais l'archi du site, je me mets à la 3é solution. (mais je l'avais déjà dis, il me semble ;) )

Pour ce qui est des standards, il n'y a pas de recommandations du W3C sur la logique à suivre pour l'architecture du site. non ?

A+, Anonymus.

Lien vers le commentaire
Partager sur d’autres sites

Si les tableaux ne servent qu'aux données, je me permet de rétorquer, chere Monique, qu'une information n'est qu'une donnée, et inversement. Tout n'est que 'données', d'autant que c'est tout issu des.. bases de données ;)

Pour ma part, j'ai pris modele sur les sites informatiques, qui ne sont jamais structurés.

Mais non, mon cher Anonymus... ;)

Un élément table est destiné à contenir des données tabulaires comme celles qui seraient listées dans un tableur du style Excel.

Mais cela est vrai dans le cas d'un site classique (dynamique ou pas), où le contenu est structuré à l'aide des balises hx, p, ul...

Un site de type portail ou un forum est construit d'une manière différente, ce qui ne l'empêche pas d'être valide (comme le Hub :up: ) et même de correspondre aux critères d'accessibilité de niveau 1 (presque comme le Hub :nono: ).

En fait, il y a 3 écoles :

- les CSS,

- les tableaux,

- les <h1><h2>..<ul>,<etc>

Là aussi, je te dis non...

Il y a 2 écoles : la mise en page à l'aide de tableaux et celle à l'aide de blocs (div et hx, p...).

L'utilisation correcte des CSS s'applique aux 2.

La prochaine fois que je refais l'archi du site, je me mets à la 3é solution. (mais je l'avais déjà dis, il me semble ;) )

Pour ce qui est des standards, il n'y a pas de recommandations du W3C sur la logique à suivre pour l'architecture du site. non ?

Sans doute, mais sur la page de validation de ta feuille de style, tu peux lire cet avertissement :

Pour fonctionner comme prévu, votre feuille de style CSS doit avoir un arbre grammatical correct, cela implique que vous devriez utiliser de l'HTML valide.

En complément de cette réponse trop laconique à mon goût, je t'invite à lire les remarques sur les performances, l'implémentation et la conception, qui font partie des recommendations du W3C (j'ai donné le lien vers la traduction française, mais la référence à la version originale s'y trouve). Je me permets d'attirer ton attention sur l'utilisation des attributs id et class, cela te permettra de corriger une série d'erreurs sur tes pages ;)

Une autre lecture intéressante, celle de cet article de Laurent Jouanneau sur Openweb, La sémantique des balises

Lien vers le commentaire
Partager sur d’autres sites

  • 1 month later...

Bonsoir tout le monde... très intéressant la discussion... je ne suis pas le seul à être passé la alors..:) En effet les Css sont souvent synonyme de galère et surtout quand on a des clients sous mac ou Windows 95...........ai ai ai donc après quelques années ( et beaucoup de nuits et de cafés ) je ne jure que par des tableaux imbriqués combiné avec un pixel 1px/1px ou l'espacer prévu dans DW mx par default ... tip top en Netscape 4.7, I.E. 5 5.5 6 etc et même sous Mac ça ne bouge pas ( enfin le plupart du temps :) car Mac = Mac , voici un de nos exemples de cette combinaison => http://www.jeanvallon.com .. il y a toute une collection de tableaux et de pixels :)

Lien vers le commentaire
Partager sur d’autres sites

Monique : même si sur le fond, tu as raison... dans la forme, il faut avouer que de se cogner des mises en pages entièrement en HTML relève plus du trip "programmeur fou" que du "webdesigner".

Quand j'ai débuté sur le web, j'ai découvert une petite boite qui s'appelle Macromedia, qui était à l'époque toute petite et qui a sorti un fantastique logiciel qui s'appelle Dreamweaver 1. La révolution à l'époque...

Sans vouloir faire du vieuconisme aigü, Dreamweaver a changé la vie de bons nombres de gens comme moi, qui n'ont pas un background de développeur et pour qui écrire une page html sur notepad gonfle terriblement.

A mon sens, l'essentiel reste le contenu et peu importe l'enveloppe qu'on y met. Forcément, il faut que ça soit joli, mais que ce soit du <table>, du <div> ou du <span>, l'internaute (grand public, que je côtoie) s'en contrefout.

Personnellement, je pourrai écrire une page web sur le bloc-notes sans souci (5 ans d'expérience feront toujours la différence :P ) mais ce n'est pour ça que je bosse.

Il faut avoir en tête que des logiciels comme dreamweaver ont permis au web de devenir ce qu'il est aujourd'hui.

Alors, les standards oui, pourquoi pas, mais ça reste extrêmement élitiste & ça n'a finalement que peu d'intérêt pour les internautes qui surfent sur vos sites.

"on s'ra jamais des standards, des gens comme il faut"...

Lien vers le commentaire
Partager sur d’autres sites

je suis assez d 'accord avec MrFab, sans des outils comme DW et autres il y aurait beaucoup moins de sites. Faire une page ou un petit site sans connaitre le codage c'est faisable, j'en sais quelque chose ;)

le principal souci pour des amateurs comme moi c'est d' avoir un site pour sa satisfaction perso, qu' il soit pas trop mal reference et puis si on bidouille un peu pour les standards pour nous c'est pas trop grave

je comprends tout a fait la reaction d' un webmaster pro

qui prefere une page aux normes

mais c'est pareil dans toute profession si on aime un peu ce qu'on fait

si je vois un meuble ancien qui presente bien mais faux et bidouillé, il plaira à un amateur non eclaire mais moi il me genera.

chacun son truc

mais j'essaye de m'appliquer pour les codes et les standards :rolleyes:

Lien vers le commentaire
Partager sur d’autres sites

Bonjour MrFab,

Monique : même si sur le fond, tu as raison... dans la forme, il faut avouer que de se cogner des mises en pages entièrement en HTML relève plus du trip "programmeur fou" que du "webdesigner".

C'est une question d'apprentissage... et les bases n'en sont pas si difficiles.

Le problème est un peu différent pour les "anciens" : changer ses habitudes n'est pas facile et demande du temps (dont on ne dispose pas toujours, j'en conviens).

Utiliser les tableaux imbriqués n'est pas facile non plus, je m'y suis perdue longtemps.

Quand j'ai débuté sur le web, j'ai découvert une petite boite qui s'appelle Macromedia, qui était à l'époque toute petite et qui a sorti un fantastique logiciel qui s'appelle Dreamweaver 1. La révolution à l'époque...

Sans vouloir faire du vieuconisme aigü, Dreamweaver a changé la vie de bons nombres de gens comme moi, qui n'ont pas un background de développeur et pour qui écrire une page html sur notepad gonfle terriblement.

Je ne voudrais pas non plus travailler avec un éditeur rudimentaire... il existe des éditeurs texte très perfectionnés, dotés de nombreuses fonctions qui rendent le travail simple et rapide. Sur des groupes de discussion, je cotoie des professionnels qui n'utilisent que de tels logiciels, comme les responsables du site Openweb par exemple.

Dreamweaver est devenu un éditeur de bonne qualité, mais il faut quand même pouvoir mettre les mains dans le cambouis, donc connaître le html...

A mon sens, l'essentiel reste le contenu et peu importe l'enveloppe qu'on y met. Forcément, il faut que ça soit joli, mais que ce soit du <table>, du <div> ou du <span>, l'internaute (grand public, que je côtoie) s'en contrefout.

Ben non justement...

Oui, l'essentiel est le contenu. L'informatique et Internet ont overt un accès facile à toutes ces informations à toute une catégorie de la population, jusque là plutôt exclue : les non voyants et les mal voyants... l'utilisation des tableaux imbriqués pour la mise en page ou des tailles fixes, cela leur ferme les portes au nez.

C'est un problème très important, je viens d'ouvrir un forum pour en débattre.

Personnellement, je pourrai écrire une page web sur le bloc-notes sans souci (5 ans d'expérience feront toujours la différence :P ) mais ce n'est pour ça que je bosse.

Il faut avoir en tête que des logiciels comme dreamweaver ont permis au web de devenir ce qu'il est aujourd'hui.

Alors, les standards oui, pourquoi pas, mais ça reste extrêmement élitiste & ça n'a finalement que peu d'intérêt pour les internautes qui surfent sur vos sites.

"on s'ra jamais des standards, des gens comme il faut"...

Faut jamais dire jamais ;)

PS : le site de Macromedia vient de passer aux div/css :up:

Lien vers le commentaire
Partager sur d’autres sites

le site de macromedia vient de passer aux div/css parce que leur nouvelle version de dreamweaver a des fonctions poussées pour les css, si j'ai bien compris... pas encore testé. Mais si c'est facile et accessible, promis je m'y mettrai :D

Lien vers le commentaire
Partager sur d’autres sites

je comprends tout a fait la reaction d' un webmaster pro

qui prefere une page aux normes

mais c'est pareil dans toute profession si on aime un peu ce qu'on fait

fupap : perso, je pense pouvoir me considérer comme un webmaster "pro" (si tu le prends au sens professionnel, càd que c'est mon job). Et pourtant, que mes pages soient aux normes css, je m'en contrefous :D

Tout dépend ce qu'on entend derrière le terme webmaster. J'avais d'ailleurs écrit un chouette article là-dessus à poster sur le site, mais je ne retrouve plus où je l'ai foutu sur mon disque dur... *Fab le boulet* <_<

En gros, il y a x façons différentes d'envisager et de concevoir le métier de webmaster, celui que l'on vienne/que l'on ait des affinités/que l'on a fait des études dans le milieu informatique, le milieu de la communication, le milieu du marketing etc.

Pour un ingénieur réseau, le métier de webmaster s'apparentera plus à des soucis de temps de réponses. Pour un ingénieur informaticien, ce sera une question de machines, de procédures, d'automatisation, de choix de langage etc. Et pour un gars comme moi, qui vient du milieu marketing/communication, le web est un média et je suis - en tant que webmaster - le PPDA de mon site, ou pour citer un ex plus proche de ma cible, le Arthur (Funradio) ou le Michael Youn de mon site.

C'était -en très gros - ce que racontait mon article. Mdr. *Quel con, mais quel con, où j'ai bien pu le foutre ?*

Lien vers le commentaire
Partager sur d’autres sites

Alors, les standards oui, pourquoi pas, mais ça reste extrêmement élitiste & ça n'a finalement que peu d'intérêt pour les internautes qui surfent sur vos sites.

Peu d'intérêt pour les internautes si évidemment on ne prend pas en compte les personnes handicapées.

Mais il faut également penser à l'avenir du Web. D'abord l'évolution des navigateurs et puis la nécessité pour les sites à grands publics de respecter les standards pour être accessibles aux personnnes handicapées.

A l'heure actuelle la plupart des sites sont des mixes des 2 méthodes (tableau et CSS) mais, étant donné les recommandations du W3C, l'avenir c'est le XHMTL/CSS.

Si cette technologie tarde à se mettre en place c'est justement parcequ'elle doit faire face aux réticences des vieux de la vieille qui ont appris une manière de travailler et ont du mal à s'en défaire.

Pour ceux qui se sont mis récemment à la création de site, je pense qu'il vaut mieux laisser tomber les tableaux et travailler directement avec les CSS. Cela implique évidemment quelques efforts mais ils en valent la peine.

un site à connaître

http://openweb.eu.org/

Lien vers le commentaire
Partager sur d’autres sites

  • 1 month later...

rajoutez aussi http://www.csszengarden.com/

si ca les convainc pas, j'comprends pas moi :D

et sinon, pour "revenir sur le débat", ce que je trouve "dommage" :

- la mise en page de type tableau qui fait du 600px de large avec des polices de 8px illisibles juste pour faire "plus propre" (et hop les malvoyants et tous ceux qui ont pas une vue excellente ou un écran avec une résolution trop grande)

- les dernières technologies qui ont trop tendance à exclure ceux qui ne l'utilisent pas (même si je reconnais que Flash permet des animations et une interactivité vraiment surprenante)

j'apprécie :

- PHP/MySql parce qu'ils permettent de faire des sites interactifs et dynamiques sans demander aux internautes les dernières technologies ... (javascript pas toujours activé, Flash pas installé partout, etc)

- les CSS qui permettent de gérer BCP de choses

(genre le bouton "imprimer" ça m'énerve ... les css type="print" c'est pas fait "pour les chiens")

et de rendre la compatibilité des sites à beaucoups de personnes (dont une amie aveugle qui est desespérée de pas pouvoir surfer sur les sites qu'elle veut parce que son "traducteur" est incapable de gérer les mises en page de type tableau)

- les calques parce que ça fait des trucs marrants avec qqs lignes ...

Lien vers le commentaire
Partager sur d’autres sites

Si cette technologie tarde à se mettre en place c'est justement parcequ'elle doit faire face aux réticences des vieux de la vieille qui ont appris une manière de travailler et ont du mal à s'en défaire.

Bonjour,

L'article du mois du site Pompage.net aborde ce problème délicat avec la traduction d'un article de Al Sparber Clarence the pony. Le problème de l'immobilisme professionnel y est abordé avec beaucoup d'humour, la conclusion est pourtant sans appel :

...

Ne pas se mettre à CSS, c'est un peu un lent suicide professionnel.

...

Le fait est qu'on ne peut jamais arrêter d'apprendre. Le jour où vous croyez savoir tout ce qu'il y a à savoir, vous êtes de train de tourner en rond.

Al Sparber est l'un des fondateurs de Project VII, un site (anglohone) incontournable et riche en ressources pour la création de pages web.

Cette équipe a créé quelques-unes des Extensions Dreamweaver les plus intéressantes.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...