développer en css pour sauver le contenu

[dd32]

Bonsoir,

Je m'adresse ici à ceux qui s'interrogent : "tableaux ou css ?".

Cet article que certains connaissent déjà, résume de façon agréable comment développer un site web de façon optimisée.
Il traite de problèmes récurrents et que j'ai déjà rencontrés sur WRI donc je me permets de vous en faire part.
J'avais presque envie de faire un sondage pour savoir qui a passé ou non le cap css...

Quelques points de l'article que je tiens à souligner :

Le problème avec les tableaux HTML

- mélange des données de présentation et du contenu.
- augmente la taille des fichiers inutilement (cf. bande passante + temps de chargement)
- refonte de site : complexe
- pas de cohérence visuelle
- moins accessible

Google est aveugle

Amélioration du positionnement :
- en minimisant le balisage + en utilisant efficacement des éléments d'entêtes

- en réduisant le code par rapport au contenu + en plaçant du véritable texte (plutôt que des images)


PS : Si ce post n'a pas sa place ou a déjà été traité, merci de me le signaler ou de le supprimer....

 

[Szarah]

Cet article est une excellente introduction aux qualités objectives des CSS, dd32, merci de l'avoir remis en lumière.

Mais je n'ai toujours pas compris pourquoi ses auteurs n'ont pas centré le contenu, en 800 c'est forcément tout bon mais dès que tu montes un peu, tout est calé contre la marge de gauche et ça se voit, à partir de 1200 ça laisse à droite un vide vraiment grand.
Je vais leur écrire, tiens.

 

[DIEZ]

Mais je n'ai toujours pas compris pourquoi ses auteurs n'ont pas centré le contenu, en 800 c'est forcément tout bon mais dès que tu montes un peu, tout est calé contre la marge de gauche et ça se voit, à partir de 1200 ça laisse à droite un vide vraiment grand.
Je vais leur écrire, tiens.

+1 pour dd32 et +1 pour Szarah (jte dis pas la place que j'ai avec mon 19/10eme)

L'arcticle est sympa tout plein, les images issues probablement des comics agrémentent agréablement l'ensemble.

Original et instructif.

Moi jdis rien mais ça send la recomandation...

 

[HawkEye]

Moi jdis rien mais ça send la recomandation...

Moi j'dis rien non plus et je recommande aussi...

>> i viva CSS !

 

[totof78]

Très bien cet article en effet.
Mais je ne comprend pas bien pourquoi ils recommandent de ne pas utiliser le tag <br>
Ok pour utiliser le {display:block} pour un paragraphe, mais quand dans ce meme paragraphe ont désire revenir à la ligne pour le rendre plus clair, on n'a pas vraiment le choix.
A moins qu'il existe un autre tag pus adapté que le <br> dans ce cas ?

 

[Maxib]

Pour moi la question ne se pose plus, le CSS pour la structure du site, et les tableaux pour les données tabulaires. Quoi de plus logique?

Recommandation +1

 

[dd32]

Cet article est une excellente introduction aux qualités objectives des CSS, dd32, merci de l'avoir remis en lumière.

Mais je n'ai toujours pas compris pourquoi ses auteurs n'ont pas centré le contenu, en 800 c'est forcément tout bon mais dès que tu montes un peu, tout est calé contre la marge de gauche et ça se voit, à partir de 1200 ça laisse à droite un vide vraiment grand.
Je vais leur écrire, tiens.

Merci :wink:
Tiens nous au courant, par curiosité...

Sinon, n'hésitez pas à compléter ce post par vos avis et expériences.

 

[TOMHTML]

- pas de cohérence visuelle
- moins accessible

c'est faux et c'est faux
va falloir arrêter de suivre bêtement vos sectes que sont CSS et W3C Validator

on peut faire un site avec des tableaux sans pour autant que ce soit moche, et c'est tout à fait accessible.
OK "les tableau c'est fait pour mettre des données tabulaires"
mais ça y'a que les webmasters-pro-XHTML qui savent ça, c'est à dire 0,00001% des internautes.
Pour les autres, dans tous les cas ce qu'ils voient c'est un site.

Et vous avez beau regarder avec Lynx ou avec n'importe quel browser pour les personnes mal-voyantes : il n'y a pas de problème !


Alors dire que le CSS c'est mieux, OUI
dire que les tableaux sont un problème, NON

 

[Szarah]

Les CSS sont trop pratiques pour qu'on les ignore, il n'y a pas besoin de prêcher en leur faveur.

Ce qu'il faut éviter surtout, ce sont les diktats, et la croisade contre le <br> en est un.

Question tableaux, c'est clair qu'il ne faut pas s'en servir pour organiser le visuel - on le dit depuis dix ans - mais comme le visuel importe aussi, il faut apporter des solutions alternatives CSS pratiques, et il en manque d'importantes.

Moi, ce qui m'intéresse, c'est de pouvoir center un contenu quelle que soit la résolution.
La page qui motive ce topic élude la question, elle ne montre pas la solution CSS à ce souci très commun qui est réglé en deux coups de cuillère à pot par deux tables imbriquées.

Et ce n'est pas la peine de m'envoyer sur les zengarden, un bout de code ici, ça ira.
Merci.

 

[spidetra]

Alors dire que le CSS c'est mieux, OUI
dire que les tableaux sont un problème, NON

+1.
Il faut aussi tenir compte des réalités économiques.
Lorsque dans une équipe de dev, une seule personne maîtrise la mise en page full CSS + XHTML, vous devenez dépendant de cette personne.

L'investissement pour mettre toute l'équipe à niveau est loin d'être négligeable.

Sur bc de projet aujourd'hui on revient en arrière.
Après une phase de passage ( + ou - en force ) full CSS + XHTML, on revient à une mise en page par tableau.

Aujourd'hui on a un bon mix tableau + CSS qui permet une productivité maximale.
Un design en tableau nous coûte bc moins cher, il est donc bc plus facilement jetable.
Je n'ai aucun complexe a jeter une vue qui ne me convient plus et en faire une nouvelle.

Honnêtement se prendre la tête sur des pb qui se règlent facilement en tableau, ça va un temps.

Maintenant, on est d'accord : Oui, les CSS et le XHTML, c'est mieux.

 

[dd32]

- pas de cohérence visuelle
- moins accessible

c'est faux et c'est faux
va falloir arrêter de suivre bêtement vos sec_tes que sont CSS et W3C Validator

on peut faire un site avec des tableaux sans pour autant que ce soit moche, et c'est tout à fait accessible.
OK "les tableau c'est fait pour mettre des données tabulaires"
mais ça y'a que les webmasters-pro-XHTML qui savent ça, c'est à dire 0,00001% des internautes.
Pour les autres, dans tous les cas ce qu'ils voient c'est un site.

Et vous avez beau regarder avec Lynx ou avec n'importe quel browser pour les personnes mal-voyantes : il n'y a pas de problème !


Alors dire que le CSS c'est mieux, OUI
dire que les tableaux sont un problème, NON

Tout à fait d'accord
Je ne faisais que résumer les paragraphes de l'article... (je n'allais pas omettre volontairement des passages)

J'ai oublié d'insister sur le fait que ce qui a motivé la publication de ce post ce sont ces éléments en particulier :
- mélange des données de présentation et du contenu.
- augmente la taille des fichiers
- refonte de site : complexe

Sinon, je suis mal placée puisque jusqu'à présent la plupart de mes sites sont présentés avec des tableaux (+CSS)...
J'essaie plutôt de passer au CSS parce que le "CSS c'est mieux" :lol: mais ce n'est pas une fatalité.

Sinon, j'ai aussi rencontré le problème dont parle Szarah ("centrer un contenu quelle que soit la résolution").

D'autres problèmes (lors du passage tableaux >> CSS) comme le valign="center" m'ont fait douté...

Les arguments de ce topic pour rester en tableaux ou migrer vers les CSS permettent d'y voir plus clair et c'était plutôt le but de ce topic (et non pas une croisade contre les tableaux :wink.

Pour ma part, je continue à développer avec des tableaux et je m'attache à apprendre le CSS pour mes futurs développements professionnels.

 

[TOMHTML]

Les arguments de ce topic pour rester en tableaux ou migrer vers les CSS permettent d'y voir plus clair et c'était plutôt le but de ce topic (et non pas une croisade contre les tableaux :wink.

je me doute bien
mais je vois déjà venir les ayatollahs du XHTML avec leur flot d'insultes contre les pauvres ignares que nous sommes, nous qui ne connaissons pas les règles de l'art CSS...

 

[Albert1]

-http://www.uzine.net/article1979.html les ayatollahs du XHTML

sûr que si tu déterres un troll ... faudra pas t'étonner du retour de manivelle :roll:
ensuite, vu les "circonstances géopolitiques" actuelles et surtout la signification réelle du mot Ayatollah,
je trouve que celui est fort mal employé.
mais ça n'engage que mon opinion :wink:

Pour les reste : CSS, (x)HTML et tout le toutim, chacun fait comme il veut et surtout comme il peut :lol: :wink:

 

[spidetra]

- refonte de site : complexe

dd32 tu as raison de vouloir progresser, et peut-être même de te casser un peu les dents, sur les mises en pages CSS + XHTML.
Ensuite met ça en pratique, et en production, pour te faire ta propre opinion.
Tu pourras mesurer les avantages ( ils sont nombreux ), et les limites.

Par contre, de tout les arguments, l'argument le plus faux, c'est bien l'argument sur la facilité de refonte d'un site.
La facilité de refonte du site elle ne dépend pas de la mise en page ( tableau Vs Div ), mais bien de l'architecture de ton appli.

Je ne sais pas si tu code en Php, mais si tu fais dans ton code :
=> connection SGBD
=> Requêtes
=> Traitements divers
=> Sortie HTML.
=> decnx SGBD.

Ta sortie HTML, cela peut être des tableau ou du FullCSS, la refonte de ton site va être compliqué.
Il est évident qui si tu as une mauvaise architecture logicielle, l'utilisation des CSS va t'aider à refondre plus facilement ton site.
Dans ce cas là, ce n'est qu'une béquille sur une mauvaise architecture à la base.

Pour refondre facilement un site, tu vas réfléchir à une bonne architecture logicielle avant même d'avoir pondu, une seule ligne de code.

1. tu vas architecturer ton application en couches logiques :
DAO => Accés à tes bases de données
Métier => Logique de ton application
Présentation => Interface Utilisateur ( Web ou autre ).

2. Modèle MVC sur ta couche de présentation
Tu va construire ta couche présentation suivant le modèle MVC ( Modèle, Vue, Controleur )
Vue => interface utilisateur elle-même.

Si tu prend l'habitude de développer comme cela, tu verras que ta Vue, c'est un tout petit bout de la totalité de ton application.
Et donc le changement de design d'un site, c'est juste un changement de vue.
Avec une telle architecture, l'argument de la facilité de la refonte ne tient plus.

Dans le cas de la refonte d'un existant dont l'architecture de départ est mauvaise ?
Soit tu pleure, soit tu prend tes jambes à ton cou et tu cours sans t'arrêter

 

[f_trt]

et il en manque d'importantes.

Moi, ce qui m'intéresse, c'est de pouvoir center un contenu quelle que soit la résolution.
La page qui motive ce topic élude la question, elle ne montre pas la solution CSS à ce souci très commun qui est réglé en deux coups de cuillère à pot par deux tables imbriquées.

Et ce n'est pas la peine de m'envoyer sur les zengarden, un bout de code ici, ça ira.
Merci.

+1 et ne parlons pas du pied de page ou du centrage verticale.

 

[nagafolk]

Moi, ce qui m'intéresse, c'est de pouvoir center un contenu quelle que soit la résolution.
La page qui motive ce topic élude la question, elle ne montre pas la solution CSS à ce souci très commun qui est réglé en deux coups de cuillère à pot par deux tables imbriquées.

body {margin:0px;padding:0px;text-align:center;}
#conteneur {width:xxx;position:relative;text-align:left; margin-left: auto; margin-right: auto;}

A lire: http://css.alsacreations.com/Faire-une- ... web-en-CSS

 

[Szarah]

Bin oui mais non hein nagafolk.

Le positionnement des DIV par attribution d'une classe, je connais par coeur.
Ce dont moi je parle c'est d'une solution de centrage des éléments qui rende le même visu partout, sans devoir penser à traiter spécialement tel ou tel Navigateur - même s'il est faiblard.

Là, je lis une bidouille qui passe outre aux lacunes de IE mais qui pervertit la pureté des CSS.
Des tableaux imbriqués ne bidouillent rien du tout et ne tiennent compte des spécificités d'aucun mauvais élève : c'est bien plus universel.

Mais merci

 

[dd32]

J'ai tout de même oublié de préciser qu'avant de lancer ce sujet, j'avais visité ce site : http://pompage.net/pompe/csspratique/

 

[Szarah]

C'est un excellent sujet, dd32, et de bonnes références à faire connaître.

Ce que moi je tiens à faire remarquer c'est que pour remplacer un tableau centreur de contenu, on est amenés à faire

body {
margin:50px 0px; padding:0px;
text-align:center;
}

à cause de IE5 : c'est donc un code spécifique, ce n'est pas ainsi qu'il faut faire en pure CSS.

Je supprimerai mes tableaux centreurs, qui sont universels et non spécifiques, quand IE5 aura été éradiqué, et je les remplacerai alors par un vrai centrage CSS. Faire autrement, c'est habituer les gens à mal coder en fonction d'un Navigateur dépassé.

 

[edupin]

Sinon on peut aussi s'aider en utilisant des tempaltes CSS toutes faites ou des générateurs de CSS, ne serait-ce que pour décortiquer le code et comprendre comment c'est construit :
http://www.presse-citron.net/?2005/12/16/500-faciliteurs-de-css

 

[Szarah]

C'est une excellente adresse, Edupin.

Les modèles proposent les organisations d'écran les plus courantes, et c'est CSS2 et XHTML 1.0 :

http://www.intensivstation.ch/en/templates/

A utiliser et à faire connaître ...

 

[edupin]

Oui pardon, j'ai oublié de citer intensivstation, et autres :
http://www.presse-citron.net/?2006/03/03/746-de-la-template-css-comme-s-il-en-pleuvait

 

[keishisis]

pour ma part j'ai changer mon site en css y'a 1 mois et demi

En 'y passant beaucoup et en m'arrachant les cheveux des fois a cause des interprétations naviguateur , je suis arrivé a faire ce que je voulais , avoir un design pus complexe mais beaucoup moins lourds en ce qui concerne le poids page car les pages sont plus de 2 fois moins lourdes qu'auparavant ex: la page d'accueil faisait 56 ko et maintenant avec le meme contenu ( voir plus meme ) je suis passer a 22 ko tout mouillé...
cela a pour effet de diminuer les echanges avec le serveur et de rendre la naviguation plus agreables avec les feulles de styles mis en cache.
en ce qui concerne le ration texte /code html , je suis passer de 11% de texte a 20.5% c'est deja ça de gagner ...en s'ameliorant et en maitrisant bien le css on pourrait arriver à des resultats tres interessants pourl 'utilisateurs et les moteurs ne peuvent qu'apprecier qu'on leur facilite le travail !

voila pour mon experience si ça peut aider àconvaincre eux qui doutent encore des bienfaits du css ....par ailleur j'utilise encore les tableaux pour des données tabulaires( prix, comparaison...) ce qui est logique

 

[luxe-campagne]

Moi, ce qui m'intéresse, c'est de pouvoir center un contenu quelle que soit la résolution.

* {margin: 0; padding: 0; font-weight: normal; list-style: none;}
html, body {width: 100%;height: 100%;}
body { text-align: center; }
#page {margin: 0 auto 0 auto ;width: XXXpx; text-align: justify}

C'est léger et ça centre n'importe quoi n'importe où horizontalement quel que soit la plate forme et le navigateur.

par contre pour centrer verticalement, je ne sais pas le faire si la hauteur du contenu n'est pas fixée en px...

 

[Szarah]

Merci, Luxe-campagne,
et en ce qui concerne le centrage vertical ... on fera comme si on n'en avait pas vraiment besoin, ce qui est vrai dans la plupart des cas.

 

[luxe-campagne]

moi j'en ai eu besoin pour un site le mois dernier, j'ai cherché cherché, et je n'ai rien trouvé de plus simple que les tables pour cela.
Enfin, ça m'a permis d'avancer un peu plus sur les fonctionnement des css !

 

[thierry8]

Oui pour l'alignement vertical en effet c'est particulier.
Ce qui est normal du fait qu'il s'agit d'un media extensible à "volonté" en hauteur.

Il existe plusieurs possibilité pour aligner verticalement un contenu en css.
Cependant la plupart posent des problèmes dès lors que l'on utilise IE.

C'est pour cela que l'alternative consiste donc bien à utiliser un tableau pour aligner verticalement le contenu souhaité.

 

[Benefsnet]

Je vais devoir m'y mettre un jour :roll:

 

[DaMonkey]

Il y a peu dans un autre post, j'ai parler du lancement de mon nouveau site web de petites annonces >>> ici <<<. Puis j'ai eut quelques critiques au niveau des couleurs et du design, et de nombreuses erreur au W3C. J'ai un peu envoyé balader les critiques d'erreurs WC, puis j'ai un peu réfléchi, et me suis dit, si tout le monde parle du CSS ici, CSS là que finalement c'est qu'il y a des avantages tout de même...

Alors voilà, je me suis lancé à pieds joints dedans... et je suis vraiment content de m'être lancé...

J'ai tenté de reproduire convenablement et dans l'art des choses la page d'index de mon site, qui comprend d'orgine près de 10 tables imbriquées (pour le design génaral extérieur) et pour les éléments internets de contenu, mais maintenant uniquement en CSS et des DIV !

C'est magnifique... même plus besoins d'une page template complexe de tableaux imbriqués dans dreamweaver, mon template c'est une page simple, balisée avec des nom compréhensif et plus claire en me permettant de me retrouver directement dans mon code html, et mon deuxième c'est ma feuille de style. C'est magnifique ce que l'on peut faire...

Ma page d'index est maintenant validée XHTML Strict sur le validateur W3C...

J'espère pouvoir continuer dans cette voie...

PS : ne regarder pas directement sur le site online, la version CSS n'est pas en ligne, mais en local. Pour très bientôt en ligne !

A bientot,
FRED

 

[netsliver]

Salut,

Alors personnellement j'suis partisant du FullCSS mais bon c'est un vrai casse tête, actuellement en refonte d'une quinzaine de site (heureusement tous sur la même ergonomie).

Le problème du centrage quelque soit la résolution est un faux problème. Je m'explique les CSS permettent de le faire sans aucun problème bien sûr avec un peu de logique.

De grands discours ne valent pas un petit exemple que voici aux adresses : https://www.mypgsm.com/ ou encore http://www.cap-maitrise.com/, j'en ai d'autres en stock de ma fabrication...

Nous avons par exemple un élément "DIV" de 400x300 que l'on veux center sur la page quelque soit la résolution, voici une méthode :

div {width: 400px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -150px;}

Le tour est joué, c'est centré quelque soit la résolution.

Je ne dit pas que c'est la meilleur méthode mais s'en est une.

A bientôt

 

[Valneor]

* {margin: 0; padding: 0; font-weight: normal; list-style: none;}
html, body {width: 100%;height: 100%;}
body { text-align: center; }
#page {margin: 0 auto 0 auto ;width: XXXpx; text-align: justify}

Merci Luxe Campagne
j'utilise un autre code CSS pour ca je vais essayer le tien :wink:

 

[dd32]

Pour le centrage vertical comme un topic en parle déjà, j'en profite pour mettre le lien ici :
https://www.webrankinfo.com/forum/t/css-centrer-un-contenu-de-balise-verticalement.51131/

 

[Zim']

Amélioration du positionnement :
- en minimisant le balisage + en utilisant efficacement des éléments d'entêtes

- en réduisant le code par rapport au contenu + en plaçant du véritable texte (plutôt que des images)

+12...

Depuis le temps que je le dis et que je le répète