5176 sujets

Le Bar du forum

Bonjour,

je pratique les css avec bcp de plaisir depuis qq mois maintenant et je suis donc encore un débutant.
Je me suis aperçu que pour beaucoup les tableaux étaient à bannir pour la mise en page, ce qui est bien sur logique.
Je me suis aussi aperçu d'autre part que pour éviter ces avatars diaboliques que sont les tableaux ( Smiley biggrin ) les auteurs de css sont amenés à passer par des codes bien loin d'être limpides et qui me semble aller à l'encontre de la simplicité que pourrait procurer l'usage des css.

Comme bcp, je suis souvent en bute à des souçis provenant du rendu des css dans internet explorer comme en témoigne mon message d'hier soir dans la partie "css mise en forme" concernant les flottants avec IE (qui n'a d'ailleurs pas trouvé de réponses ou n'a pas suscité d'intérêt mais peu importe)
Malgré la lecture de dizaine de pages web en français et en anglais sur le sujet il m'a été impossible à mon (très) petit niveau de résoudre par des css "pures" ce problème (qui n'en est pas un avec FF).
Je me suis donc résolu à introduire, pour la mise en page d'un header comprenant plusieurs images accolées et théoriquement flottantes, un tableau pour que "ça passe" sous IE, n'en pouvant plus de tourner en rond pour satisfaire à l'aide de tours de passe-passe les caprices d'un navigateur qui n'est pas aux normes.

J'ai par ailleurs, surement comme vous, constaté l'existence de dizaines de hacks (fort bien trouvés d'ailleurs) pour pallier aux nombreuses imperfections de IE.

Tout ceci m'a amené à me poser la question de savoir s'il ne valait pas mieux, quand cela engendre un css TROP tordu, passer par un tableau qui permet d'éviter des pages pleines de "hacks" qui risquent fort un jour ou l'autre de se retourner contre leurs concepteurs (on n'est jamais à l'abri d'un miracle, et IE pourrait être un jour aux normes!)

Evidemment, lorsqu'il s'agit de petites choses cela peut être facilement mis en place (la double marge sur les float réglée pour IE par un display:inline).

Mais je me demande si cela vaut la peine de passer des heures et des heures, même si cela est aussi certaines fois le plaisir de la chose, à se casser la tête pour IE.
Là comprenez moi bien, il ne s'agit pas de ne pas tenir compte d'IE bien sûr (quoique... Smiley lol ) mais de passer par du tableau quand une partie de mise en page exige de perdre des heures à fabriquer un code css au final extrémement compliqué et abscon ( ce qui peut décourager les gens souhaitant passer aux css)
En effet, d'un côté il est difficile de dire : "les css c'est super, bcp plus logiques et puissantes que les tableaux", et de devoir rajouter un peu plus tard "ah oui mais là il faut un "hack" pour IE, et pense aussi à opéra 5.2 et à netscape 4 et à machin 1.0.02....."


Donc cette approche me semble poser deux problèmes :

1-Une perte de temps considérable qui pourrait être utilisée à découvrir et pratiquer les possibilités de css sur des navigateurs qui sont aux normes.

2-A force de bidouiller le code css pour satisfaire IE, j'avoue que cela m'embrouille au point de ne plus savoir ce qui est un "bon" code aux normes et un code qui ne l'est plus.


En bref, je ne comprends pas bien l'intérêt de saper un code correct au risque de perdre son latin et de rendre sa page "mal écrite" au final.
Ne vaut-il pas mieux quand cela devient trop ésotérique et confus d'employer un tableau et de les supprimer à mesure que les navigateurs en retard (suivez mon regard.....) s'adaptent?
Modifié par gauguin (23 Mar 2006 - 22:43)
Administrateur
Salut,

Je pense que ton approche est un peu biaisée : il n'est pas du tout obligatoire d'utiliser des hacks pour faire les sites web proprement (en tout cas dans 99% des cas). Pour ma part, je n'emploie aucun hack dans aucun des sites que je réalise.

Employer des hacks, c'est :
- souvent par méconnaissance des CSS et pour vouloir aller très vite en sautant les étapes de son apprentissage --> dans ce cas, oui, pourquoi ne pas rester aux tableaux plutot que de faire des choses encore plus alambiquées par "mode"
- parfois (très peu) une obligation.

Tu en apprendras bien plus sur notre avis à propos des hacks, et comment les utiliser judicieusement sur ce lien :
http://forum.alsacreations.com/faq/#item40
Modifié par Raphael (23 Mar 2006 - 19:36)
A la question, "Cela en vaut-il la peine ?", je répondrais : Oh que OUI !

Mais il faut revoir complètement sa façon de monter une page, oublier tout ce qu'on sait ...

J'ai répondu à ton post (problème des float left sur tes images) ...

Mais c'est en maîtrisant de mieux en mieux les propriétés css (et là, lire et relire les tutaux sur le positionnement, entre autres) que tu te rendras compte du potentiel de ce langage.

Ton code est pour l'instant, effectivement, très compliqué : parce que tu n'as pas encore tout intégré (moi non plus, d'ailleurs) mais c'est normal ...

Sors de ton projet (cinq minutes) et essaie de faire une mise en page simple et d'expérimenter un peu toutes les possibilités ...

Et, avant toute chose concernant le style, respecter la sémantique XHTML et réfléchir au flux de ta page, car c'est lui qui doit rester simple et cohérent.

Si cela peut te rassurer, oui, tu as le blues, c'est normal, nous sommes nombreux à l'avoir eu : c'est le TableBlues avant CSS !

Mais cela va passer ...





Smiley biggrin
Bonjour,

Merci pour vos réponses.
Je suis bien heureux (et rassuré) d'apprendre de la part de gens expérimentés que le "bon code" marche.
Je n'ai en effet que peu d'expérience et il est vrai que sur les forums et les tutos internet, on a (enfin j'ai) l'impression que tout réside dans des manipulations alchimiques....contrairement au livre de E. Meyer ( CSS la réference chez o'reilly) où tout paraît se tenir comme un seul homme.

J'ai pû, il est vrai, réaliser un site sans trop de souçis mais en m'essayant à la réplication (pour garder la main) de mises en pages plus complexes, je suis passé par toutes les couleurs.

a écrit :
il n'est pas du tout obligatoire d'utiliser des hacks pour faire les sites web proprement (en tout cas dans 99% des cas)


Voilà le genre de phrase qui rassure....ouf!

ps: merci pour la réponse au post sur les floats, je vais voir ça
Modifié par gauguin (23 Mar 2006 - 20:48)
Salut, Smiley smile

Raphaël a écrit :
Je pense que ton approche est un peu biaisée : il n'est pas du tout obligatoire d'utiliser des hacks pour faire les sites web proprement (en tout cas dans 99% des cas). Pour ma part, je n'emploie aucun hack dans aucun des sites que je réalise.

100% d'accord ! Je n'ai jamais utilisé de hack pour mes sites ou pour mes kits et c'est pas aujourd'hui que je vais commencer lol

Je préfère faire des concessions plutôt que des bidouilles hazardeuses et qui peuvent se révéler en plus éphémeres (cf. une remarque du lien de la FAQ "Un autre gros problème des hacks, est qu'ils reposent sur une déficience d'une version de navigateur qui peut être corrigée du jour au lendemain.")
Modifié par Pandore (23 Mar 2006 - 21:47)
J'ai mis la page complète et le "nouveau" souçi qui va avec dans la partie css et mise en forme pour illustrer le propos.
Modifié par gauguin (23 Mar 2006 - 22:47)
Je ne suis pas vraiment un expert, mais tant que les tableaux ne "contiennent" pas de "contenu", mais uniquement de la pure mise en forme, je suis un peu comme gauguin, pourquoi se passer d'un outil simple et puissant ?
maintenant, j'imagine que ça doit rester un tableau simple: une ou deux lignes, une ou deux colonnes.
Mais je m'étais également posé la question lors d'une mise en page tordue...
Concernant les hacks l'attitude n'est pas très compliquée : si t'as besoin d'un hack c'est en gros que tu t'es attaché à un rendu visuel particulier qui le nécessite.
A partir de là deux possibilités : ou tu considères que ton travail c'est d'obtenir coûte que coûte ce résultat graphique sur un écran d'ordi compris entre 800 et 1600, ou tu considères que c'est de distribuer un contenu avec le moins d'altération possible... Dans le premier cas tu passes en tableaux, dans l'autre tu raisonne tes pages autrement. C'est pas si compliqué Smiley lol
Comme le disait Marley (enfin je crois..) No hack No Cry
Bonsoir,

Arsene a écrit :
si t'as besoin d'un hack c'est en gros que tu t'es attaché à un rendu visuel particulier qui le nécessite.

Ou bien, c'est que tu as développé ton css "au p'tit bonheur la chance", cas typique des débutants (moi, au début), en rajoutant petit à petit des "margin", des "padding", etc, dans tous les sens parce que tes blocs ne s'alignaient pas correctement les uns avec les autres.
Alors, à la fin, tu as une "bouillie" de css, qui certes s'affiche comme tu le veux, mais nécessite effectivement des "hacks" pour IE, en particulier à cause du modèle de boites.

En reprenant l'écriture calmement, et en essayant de limiter au maximum le nombre de lignes de css (après avoir parfaitement compris comment marchait les "margin", "padding", "border" et autres "width" et height"), tu t'aperçois alors qu'en programmant "propre", tu n'as plus besoin des hacks !! (même pour IE 5.x ...) Smiley biggrin
(après tout, IE n'est quand même pas si idiot que cela Smiley cligne , la plupart du temps, si tu as un décalage, c'est de ta faute, pas celle d'IE)

La règle qu'il faut connaître est la suivante :
Moins il y a de déclarations css, moins il y a de hacks, et mieux s'affiche la page sur tous les navigateurs.

A mon avis, il n'y a pas de design qui ne puisse être réalisé "proprement" en css, il faut juste ne pas abandonner trop tôt et ne pas se dire "c'est pas possible, je vais revenir aux tableaux", mais plutôt "je n'ai pas assez cherché, je n'ai pas encore compris toutes les propriétés css".
Bon, bien sûr, il faut avoir du temps pour faire ça quand on débute, et ne pas avoir un site à livrer à un client en 3 jours Smiley cligne ...

A la fin, tu obtiens un code plus simple, des css moins longs, et les quelques "width" ou "height" qui restent différents pour IE (pour IE5.x on n'y coupe pas à cause du modèle de boites), tu les mets dans un fichier spécial IE appelé en commentaire conditionnel (donc jamais de "hacks").
Bravo Mpok, on sent le vieux routier!
C'est exactement la démarche que j'ai suivi, des ajouts de padding et de margin à droite à gauche jusqu'à ce que ça passe... Smiley biggrin .

Je suis repassé depuis en "tout css" et j'ai supprimé le tableau pour le header,

voici d'ailleurs la page que j'ai répliquée (à peu près...)

http://www.bunnylovershop.com/Paris/paris.htm

le seul problème à présent est que , comme j'ai supprimée la largeur du div qui contenait l'image (qui tombait lorsque je passais en 800*600) , on ne la voit plus que partiellement en 800*600.
Pour mémoire il s'agit de la grosse image de droite dans le header qui se trouve dans le div id="header_b.
Tous ces souçis à cause de IE.... Smiley biggrin
Modifié par gauguin (25 Mar 2006 - 02:00)
Arsene a écrit :
si t'as besoin d'un hack c'est en gros que tu t'es attaché à un rendu visuel particulier qui le nécessite.


+1(et autant de zéro que l'on veut)

en rajoutant que, de surcroit, le choix visuel en question est éventuellement hérité d'habitude de rendu des pages web ne tenant pas particulièrement compte des possibilités des css. Du coup il peut y avoir un phénomène de "passage en force" ou "à tout prix".

Arsene a écrit :

Comme le disait Marley (enfin je crois..) No hack No Cry


Ah bon ?

Moi je croyais que c'était : More hash No cry

Enfin bon j'ai pu me tromper Smiley confused
Modifié par clb56 (25 Mar 2006 - 00:16)
Mais on s'attache toujours à un rendu visuel particulier non?

C'est à mon avis le code qui doit s'adapter au rendu et non l'inverse.