Le chemin de l'autonomie

Je suis profondément découragé par CSS.

Je ne suis pas mauvais en informatique, sans être un pro, j'ai un peu d'expérience. Je pratique couramment PHP et quelques autres langages de programation, et pour la gestion d'écran, j'ai programmé des interfaces il y a longtemps sous VMS.

Je suis en train de me pencher sérieusement sur CSS, j'ai lu plusieurs doc, et je suis vraiment découragé par mon incapacité à en faire quelque chose qui fonctionne. Je vais commencer par parler d'un problème technique, mais l'objectif de ma requête est d'abord méthodologique.

Voici la structure que je voudrais mettre en place :
- un menu et un contenant, le menu restant toujours à gauche du contenant, le contenant étant calé à droite
- le menu et le contenant occupe toute la hauteur de l'écran
- dans le contenant, trois div, qui s'organise en vignettes, en se répartissant équitablement, pourquoi pas avec un retour à la ligne, mais pas nécessairement.
- apparition d'ascenseurs dès qu'il y a des objets qui dépassent de la fenêtre.


Je ne comprends même pas comment attaquer le problème. J'obtiens cela :
http://mnibjb.free.fr/test/squelette.html

Je sais évidemment créer cette structure avec des tableaux, par exemple comme ceci (essai rapide : il faudrait y passer plus de temps pour rendre cela correct, mais c'est faisable). Mais voilà : j'ai tellement entendu répèter qu'il faut bannir les tableaux que je voudrais faire quelque chose de plus orthodoxe.


Plus je lis la doc, et plus je me dis que CSS n'est pas fait pour moi. Je veux vous donner quelques exemples.

1- Je prends le post-it méthodologique en tête de ce forum :

a écrit :
2- Si vous êtes complètement débutant dans le monde des styles CSS, si vous ne connaissez pas très bien les termes de classe, id, sélecteur, position absolue, relative, flottante, flux courant ou si vous ne savez pas bien utiliser les CSS en général, je vous recommande vivement un excellent cours pour débutants [..]

Je ne suis pas débutant, mais il me semble intéressant de réviser un peu ce que signifie "flottant". Je vais sur le lien spécifié. Rien sur les flottants. Peut-être qu'il y a un synonyme ? Quoi qu'il en soit, ce n'es pas un document que je confierais à un "débutant" : très peu d'illustrations ou d'exemples, des concepts abstraits très rapidement, peu de présentation des bénéfices attendus, etc. C'est vraiment le lien pour lecteur motivé et chevronné.

2- Autre exemple, la page d'Alsacréation consacrée aux positionnements dit à propos des positionnements absolu, relatif et fixe :

a écrit :
Sachez également que c'est le seul moyen de superposer deux blocs (avec la propriété z-index)

Ce n'est pas la première fois que je lis ceci ! Alors dans le doute, je n'utilise pas le positionnement absolu, relatif et fixe. Et bien voilà quand même ce que j'obtiens, au hasard d'un de mes essais.

3- j'ai compris que le spacer clear:both était assez intéressant. Mais je rame pour comprendre son mécanisme d'action. Sur une page d'alsacréation, on nous dit :

a écrit :
La propriété "clear" permet de gérer le contenu autour des éléments flottants et peut "pousser" un conteneur pour intégrer les éléments en float.

Ca veut dire quoi "pousser" un conteneur ? Alsacréation propose un "Lien explicatif complet" : c'est la page OpenWeb, très intéressante, mais qui ne donne pas le mécanisme d'action de ce clear:both.

Au final, je n'ai pas les moyens de construire mes propres solutions : je repompe servilement les exemples, et je perds du temps à comprendre, ou plutôt à ne toujours pas comprendre pourquoi cela ne marche pas.


Je pourrais multiplier les exemples ; je n'arrive pas à documenter solidement le comportement des instructions CSS. J'arrive à voir que peut-être je pourrais faire des choses plus propres. Mais cela ne fait pas tourner un site. Le plus simple, pour vous, c'est de me répondre comme ce dépanneur téléphonique à un client qui demandait ce qu'il devrait dire en rendant sa machine au comptoir SAV : "vous leur direz que vous êtes trop con pour avoir un ordinateur".

Si vous pensez que mon cas n'est pas désespéré, je ne vous demande pas un truc technique sur mon ptit problème là haut, mais un truc méthodologique, pour m'expliquer comment fait le post-débutant-juste-un-peu-dégrossi pour régler un problème simple sans que cela prenne 5 échanges successifs avec un pro, comme cela vient d'avoir lieu par exemple entre Corinne et mpop sur ce forum.

Archeboc
Modifié par archeboc (28 Jun 2006 - 20:09)

salut,

Je pense qu'il n'y a pas de quoi se décourager, il suffit d'assimiler le fonctionnement de ces fameux positionnement qui posent problème à tant de gens.

Je ne peux que te faire partager mon expérience en la matière, car moi aussi j'ai eu des difficulté à assimiler une chose finalement assez simple, mais qu'il faut intégrer :

Au mois d'octobre je me suis attelé moi aussi à passer à la mise en page non tabulaire, en me disant que le principe était génial. sauf j'ai pas mal déchanté pendant les premières semaines, car il m'était quasiment impossible d'arriver à un résultat correct facilement, et que ce problème devenait encore plus insoluble quand on voulait y parvenir sur différents navigateurs.

Tout cela car je n'avais pas assimilé le mode de fonctionnement de ces positionnements. Et ce n'est que par la lecture de nombreux tutoriels et sujets de forums, que j'ai pu petit à petit les intégrer. J'ai disséqué les modèles de site d'alsa, pour comprendre les choses plus facilement, même si ca ne m'a pas suffi. Et puis j'ai surtout beaucoup pratiqué depuis. Et à force de positionner les choses et de faire des bétises, je finis par connaitre ce qui marche ou ne marche pas, arriver à réparer les erreurs que j'ai pu faire rapidement pour corriger mon problème, etc.

Je ne dis pas que maintenant je trouve tout facilement du premier coup, mais je vais surtout plus vite sur les choses que j'ai le plus pratiqué. Le site que j'avais fait en octobre était une véritable usine à gaz, remplie de positions absolues, peu logique sémantiquement, etc... et il m'a fallu plus de deux semaines pour le faire. J'ai refait ce même site il y'a deux mois, en 5 jours. Sémantiquement plus logique, ergonomiquement plus simple, technologiquement plus avancé, et graphiquement...mmmh en fait je suis déja en train de le refaire.

Si tu comprends le PHP je vois pas pourquoi tu n'arriverais pas à assimiler les CSS qui est bien plus abordable à apprendre et assimiler.
Pour te répondre à la facon de ton dépanneur SAV, je te dirais "que tu dois penser que c'est bien plus compliqué que cela n'est en réalité".
Donc garde espoir, grapille partout ce que tu peux intégrer, et pratique beaucoup, et tu arrivera à tes fins

Si je comprends bien, c'est comme de faire les gestes pour avoir la foi : à force de lire et de relire les documents sacrés, et de les méditer sans rien y comprendre, je vais finir au paradis.

Le problème, c'est que mes ressources temps ne sont pas extensibles à l'infini, et qu'il y a de bonnes alternatives : je fais deux-trois pages en tabulaire, je les passe sous spip, et j'ai mon site de centaines de page qui tournent sans anicroche.

Archeboc.

Hello archeboc et bienvenue,

Ton retour d'expérience est très intéressant car très riche en informations et cas concrets.

Comme tu le dis si bien, il y'a certaines choses très faciles à faire avec des tableaux, tout simplement :
- parce qu'on a toujours eu la (mauvaise) habitude de faire des mises en page en tableaux
- parce que les éditeurs HTML WYSIWYG (comme Dreamweaver) font ça très vite

Je ne te mentirai pas sur ce point : faire un site sémantiquement propre, en CSS et sans tableau de mise en page n'est pas une chose innée.
Il faut bousculer des a priori et accepter de prendre du temps pour apprendre cette nouveauté... c'est ton cas apparemment

Le positionnement des éléments en CSS nécessite une excellente connaissance des bases même du HTML, c'est à dire de connaître les types de balises (en-ligne et bloc) et de savoir s'en servir à la perfection, sinon on se heurte vite à des incompréhensions (surtout lorsque certains vieux navigateurs, comme IE, ne font pas comme les autres).

Sur ce point, je t'invite fortement à suivre pas à pas ces deux articles complémentaires :
1- La structure des balises : bloc et en-ligne
2- Comprendre le positionnement des balises en CSS

Ce sont vraiment deux articles que j'estime indispensable car ils regroupent toutes les notions indispensables avant de se lancer dans une maquette en CSS.

Je reprends les points que tu évoques et qui te posent problème :

a écrit :
Ce n'est pas la première fois que je lis ceci ! Alors dans le doute, je n'utilise pas le positionnement absolu, relatif et fixe. Et bien voilà quand même ce que j'obtiens, au hasard d'un de mes essais.

Je ne vois pas exactement quel problème tu soulèves. Peux-tu être plus précis ?

a écrit :
Ca veut dire quoi "pousser" un conteneur ? Alsacréation propose un "Lien explicatif complet" : c'est la page OpenWeb, très intéressante, mais qui ne donne pas le mécanisme d'action de ce clear:both.

"Pousser" un conteneur, c'est faire en sorte qu'un élément flottant s'affiche à l'intérieur de son bloc parent, sans dépasser (ce qui est son comportement normal par défaut).
Openweb explique comment fonctionne clear : la propriété empêche qu'un flottant s'affiche à côté (sur la même ligne) qu'un élément ayant reçu un "clear".
Un élément avec "clear" n'aura pas de flottant sur la même ligne. Pour cela, cet élément "clear" ira s'afficher sous l'élément flottant. Du coup, il va entraîner l'ensemble du bloc parent, qui s'affichera également sous le flottant.

a écrit :
Je pourrais multiplier les exemples ; je n'arrive pas à documenter solidement le comportement des instructions CSS

Dans certains cas, il est préférable de faire l'acquisition d'un livre, dont le contenu est organisé logiquement; plutôt que de piocher des informations par-ci par-là sur le Web.

PS : attention, tu as partout mal écrit "Alsacréations"

La patience est une des vertu de l'apprentissage. Le but n'étant pas de ne pas comprendre pour aller au paradis comme tu dis, mais bien de comprendre, en allant ou non au paradis, ce qui est un autre problème.

Si tu n'as pas de temps d'apprendre, c'est une chose compréhensible que ton découragement, car il en faut pas mal pour assimiler ca.

Tu peux effectivement choisir d'utiliser les technologies à base de tableaux, si tu pense que ca te fais gagner du temps.
Ayant franchi -je peux dire avec succès maintenant- le cap des tableaux, je peux te dire que toute les heures que j'ai pu perdre à essayer de comprendre pourquoi mes fichus blocs allaient la ou bon leur semblait n'aura pas été une perte de temps, mais bel et bien un investissement, qui m'en aura fait gagner énormément ensuite.
J'ai désormais un code simple, où je peux faire la différence entre le fond et la forme simplement, sans être perturbé par celui des deux qui ne me concerne pas lorsque je fais une mise à jour. Et surtout je sais que bien plus de gens pourront en profiter car il est plus accessible gràce à cette technologie.

A toi de voir si oui ou non tu veux investir un peu de temps pour en gagner par la suite.

Mikachu a écrit :
A toi de voir si oui ou non tu veux investir un peu de temps pour en gagner par la suite.

Je ne jette pas l'éponge, mais a priori, comme je le disais plus tôt, vu que je vais générer mes pages avec SPIP, cela ne me coûte pas grand chose de passer par les tableaux : je fais deux ou trois squelettes en récupérant des briques, et c'est SPIP qui fait le boulot.

Sincèrement, si je ne trouve pas une méthode simple et visuelle pour expliquer CSS, je ne vais pas me casser la tête et casser celle de mes élèves.

Archeboc.

Raphael a écrit :
Hello archeboc et bienvenue,

Ton retour d'expérience est très intéressant car très riche en informations et cas concrets.

Comme tu le dis si bien, il y'a certaines choses très faciles à faire avec des tableaux, tout simplement :
- parce qu'on a toujours eu la (mauvaise) habitude de faire des mises en page en tableaux
- parce que les éditeurs HTML WYSIWYG (comme Dreamweaver) font ça très vite

Je souhaiterais ajouter : surtout parce qu'un tableau, c'est visuel, donc facile
- à comprendre
- à mettre en oeuvre
Tant que je ne me serai pas fait une représentation mentale graphique du fonctionnement de CSS, je continuerais avec les tableaux, et je continuerais à conseiller cette méthode à mes étudiants (alors que dans un autre domaine, même si je ne suis pas encore passer de mySQL à postgreSQL, c’est vers postgreSQL que je les dirige aujourd’hui).

Raphael a écrit :

Sur ce point, je t'invite fortement à suivre pas à pas ces deux articles complémentaires :
1- La structure des balises : bloc et en-ligne
2- Comprendre le positionnement des balises en CSS

C'est justement ce que je viens de faire. Tu vas dire que je suis un chieur. Voici ce que j'avais écrit à la première lecture, et que je m'apprêtais à poster :

a écrit :

Tiens, je tombe sur un nouveau problème. Toujours sur Alsacréations, dans le tutoriel sur le positionnement, je trouve la phrase suivante :

Par défaut, les balises Bloc et les balises En-ligne ont un comportement différent dans le flux normal (voir tutoriel sur la structure des balises).

Si on regarde dans ce second tutoriel donné en référence, on ne trouve pas une seule fois le mot "flux".
A-t-il un synonyme qui m'aurait échappé ?


Entre temps, j'ai relu les deux documents, et j'ai compris ce qui m'avait échappé, mais la rédaction des deux documents, si l'on souhaite une cohérence entre eux, devrait être revue.

Raphael a écrit :
Ce sont vraiment deux articles que j'estime indispensable car ils regroupent toutes les notions indispensables avant de se lancer dans une maquette en CSS.

Question : à la lecture de ces deux articles, j'ai l'impression que l'on cherche massivement à faire des mise en page avec "float", alors que c'est in-line qui devrait être utilisé. Je me trompe ?
En tout cas, c’est clairement du côté de div inline que je vais maintenant piocher. Mais je ne suis pas sûr que cela va résoudre mon petit problème à 5 <div>.

Raphael a écrit :
Je reprends les points que tu évoques et qui te posent problème :
Ce n'est pas la première fois que je lis ceci ! Alors dans le doute, je n'utilise pas le positionnement absolu, relatif et fixe. Et bien voilà quand même ce que j'obtiens, au hasard d'un de mes essais.

Je ne vois pas exactement quel problème tu soulèves. Peux-tu être plus précis ?

Bien sûr. Erreur de ma part, je n’avais pas donné la bonne adresse. La voici. Fais varier la largeur de la fenêtre.
Tu as vu? Sauf erreur de ma part, je n'ai pas utilisé de positionnements absolu, relatif ou fixe : que du float, et encore, pas beaucoup. Et pourtant, cela superpose joliment (avec IE et FF). Donc l'affirmation que ce sont les positionnements absolu, relatif ou fixe qui provoquent du recouvrement est fausse : le float en provoque aussi.

Tu vas me dire que les positionnements absolu, relatif ou fixe sont les seuls utilisables pour faire de la superposition contrôlée. Mais c'est justement l'existence d'une superposition incrontrôlée qui me gêne.

Raphael a écrit :
Ca veut dire quoi "pousser" un conteneur ? Alsacréations propose un "Lien explicatif complet" : c'est la page OpenWeb, très intéressante, mais qui ne donne pas le mécanisme d'action de ce clear:both.

"Pousser" un conteneur, c'est faire en sorte qu'un élément flottant s'affiche à l'intérieur de son bloc parent, sans dépasser (ce qui est son comportement normal par défaut).

Il y a une justification d’ergonomie pour ce comportement par défaut ? On aurait pu imaginer exactement le même comportement, avec simplement un conteneur qui n’a pas le droit de s’arrêter avant ses objets inclus, même s’ils sont hors flux. Je vois ce qu’on y aurait gagné, je ne vois pas ce qu’on y aurait perdu.
Tout le résultat que je vois, c’est qu’on est obligé de faire les pieds au mur si on veut avoir deux colonnes d’égales longueurs.

Raphael a écrit :

Openweb explique comment fonctionne clear : la propriété empêche qu'un flottant s'affiche à côté (sur la même ligne) qu'un élément ayant reçu un "clear".
Un élément avec "clear" n'aura pas de flottant sur la même ligne. Pour cela, cet élément "clear" ira s'afficher sous l'élément flottant. Du coup, il va entraîner l'ensemble du bloc parent, qui s'affichera également sous le flottant.

OK, je comprends mieux. En fait, l'élément flottant, c'est conçu à la base pour mettre une photo dans du texte, et faire "couler" le texte autour. L'utiliser pour autre chose (par exemple pour agencer des zones de textes entre elle) ressemble pour moi à un détournement (cf. ci-dessous).

En effet, même si chez OpenWeb, l’utilisation de ce "clear:both" n’est pas expliqué pour les vignettes, avec tes précisions, je pense avoir compris. Donc on rajoute un objet dans le flux, et on force par clear:both pour que cet objet dépasse les objets hors flux (les vignettes de chez OpenWeb).

Là où je décroche, c’est lorsqu’on nous dit qu’il faut séparer le contenant du contenu. On a été obligé ici d’ajouter dans le contenu un élément de mise en page. Le plus comique, c’est quand l’auteur nous explique qu’un élément de mise en page ce n’est pas propre, et qu’il met à la place un séparateur. Et ensuite, il le met invisible. Je vois mal comment tu vas me convaincre qu’il n’a pas glissé ici un élément de mise en page dans le fichier HTML.

Raphael a écrit :
Je pourrais multiplier les exemples ; je n'arrive pas à documenter solidement le comportement des instructions CSS

Dans certains cas, il est préférable de faire l'acquisition d'un livre, dont le contenu est organisé logiquement; plutôt que de piocher des informations par-ci par-là sur le Web.


Dans un livre, je vais trouver les propriétés display:table, display: table-row-group, etc. et je vais faire mes mises en page avec. Et je serai toujours CSS-obéissant, non ?

Raphael a écrit :
PS : attention, tu as partout mal écrit "Alsacréations"

J'édite pour corriger ?

Merci de ta réponse ultra rapide (et merci à Mikachu aussi).

Archeboc.

Bonjour,

Tout d'abord je dois avouer que moi aussi je me retrouve pas mal dans ce que tu dis, concernant la difficulté de compréhension de ce langage. Mais pour te faire part de mon expérience personnelle je dois t'avouer que maintenant que je me suis mis au CSS, je ne cesse d'être ébahi par la pure puissance de ce langage.

Pour débuter, étant moi aussi un vieux de la mise en forme par tableau maîtrisant HTML et PHP, je suis passé par deux sites qui sont pour moi vraiment excellent :
- Alsacrétions qui pour moi s'adresse à des initiés
- Le site du Zéro qui s'adresse vraiment à des débutants.

Je t'encourage vivement à prendre le temps de lire le second pour appréhender les bases.

Ensuite tu verras que ces histoires de positionnement, au fond, ce n'est pas plus compliqué que des Légos. Manquerait peut être en effet un léger effet visuel qu'on peut cependant obtenir un crayon à la main en griffonant sur une feuille, ou de facon en ligne en donnant une couleur à un contenant :

background: #b0b;

Courage, ca en vaut vraiment le coup
Modifié par Jedi (29 Jun 2006 - 10:30)

archeboc a écrit :
Je souhaiterais ajouter : surtout parce qu'un tableau, c'est visuel, donc facile

Je crois que tu viens toi-même de mettre le doigt exactement au bon endroit.

C'est exactement ça : un tableau, c'est une conception de page "visuelle", comme une maquette papier, comme le média Print... et c'est bien pour cela que c'est si facile avec un logiciel WYSIWYG.

L'intérêt de revenir aux sources, c'est à dire à la Sémantique (la fonction des balises), à la séparation entre le fond (HTML) et la fome (CSS), à l'emploi de code propre, standardisé et pérenne, c'est justement de permettre une chose essentielle : arrêter de croire que le Web se limite à un média Print figé et visuel.

Le Web c'est avant tout du contenu. Pour qu'un document soit accessible à tout le monde (la vocation du Web depuis sa création), le message qui doit être véhiculé c'est bien le contenu et non son aspect visuel (qui sera de toute façon différent selon les utilisateurs, leur matériels et leurs configurations).

Raisonner en tableau, c'est ne pas s'occuper du contenu, de la sémantique des balises, de la façon dont le document sera restitué partout. C'est croire qu''un document ne sera restitué que sur un navigateur de type graphique, sur un écran d'ordinateur, pour une certaine partie de la population (bien voyante, bien entendante, mobile, etc.). Bref, c'est ne pas ce soucier de l'universalité de ce document.

Vouloir faire un site universellement accessible, c'est accepter que l'on ne peut pas se limiter uniquement à l'aspect visuel du document.

Je comprends que c'est une philosophie très différente, et personne n'est obligée de la suivre car elle nécessite une grosse remise en question.
Modifié par Raphael (29 Jun 2006 - 10:58)

a écrit :
Question : à la lecture de ces deux articles, j'ai l'impression que l'on cherche massivement à faire des mise en page avec "float", alors que c'est in-line qui devrait être utilisé

Non pour plusieurs raisons :
- "in-line" n'est pas un mode de positionnement, c'est simplement un type de balise
- une balise de type "in-line" est justement faite pour ne pas créer de blocs, ni contenir de blocs... elle sert à enrichir le contenu textuel.
- une balise "inline" ne possède pas de dimensions (width, height) pour les raisons évoquées précédemment. Seule exception (ou presque) : la balise inline <img>.

Pour rappel, les méthodes de positionnement sont :
1- dans le flux normal (dépend du type de balise), une variante est la position relative
2- "positionné" (= position absolue et position fixée) : l'élément sort du flux normal et se place au pixel près (top, left, bottom, right)
3- "flottant" (= float left/right)

a écrit :
En tout cas, c’est clairement du côté de div inline que je vais maintenant piocher

Un <div> inline n'a pas de sens. La balise <div> est de type bloc, c'est justement la seule chose qui la distingue de la balise <span>.
En clair, un <div> inline = un <span>.

Or <span>, comme tout élément de type inline n'est pas fait pour servir de bloc, et n'est pas autorisé à contenir des blocs.

a écrit :
Bien sûr. Erreur de ma part, je n’avais pas donné la bonne adresse. La voici. Fais varier la largeur de la fenêtre.
Tu as vu? Sauf erreur de ma part, je n'ai pas utilisé de positionnements absolu, relatif ou fixe : que du float, et encore, pas beaucoup.

D'après ton exemple, il y'a "superposition" sur Firefox uniquement et cela est logique finalement puisque le contenu dépasse de la hauteur (height) que tu as donnée au parent. Du coup, en réduisant la fenêtre, les éléments se positionnent par rapport à la hauteur de l'élément (que tu as précisée), et effectivement le contenu, plus haut que ce height, dépasse.
Mais cela est dû à la hauteur que tu as imposée à l'élément.
L'effet ne se produit pas sur IE qui confond les propriétés "height" et "min-height".

a écrit :
Tout le résultat que je vois, c’est qu’on est obligé de faire les pieds au mur si on veut avoir deux colonnes d’égales longueurs.

Non, en fait, les CSS prévoient tout ce qu'il faut pour faire des "colonnes" de même hauteur (display: table-cell).
Si on est obligé de bidouiller c'est simplement à cause des anciens navigateurs comme IE5 qui ne comprend pas encore ces solutions simples et logiques.

a écrit :
Là où je décroche, c’est lorsqu’on nous dit qu’il faut séparer le contenant du contenu. On a été obligé ici d’ajouter dans le contenu un élément de mise en page.

Hé hé
Là encore tout est prévu depuis longtemps en CSS. Il suffit d'ajouter la pseudo classe ":after" pour affecter un clear sans rajouter de contenu... mais une fois encore, on se heurte à des navigateurs qui ne sont pas à la page.
Modifié par Raphael (29 Jun 2006 - 11:01)

Salut,

archeboc a écrit :
Là où je décroche, c’est lorsqu’on nous dit qu’il faut séparer le contenant du contenu. On a été obligé ici d’ajouter dans le contenu un élément de mise en page.

Je suis sur ce point à 150% d'accord avec toi, et ayant débuté depuis pas si longtemps que ça, j'avoue toiujours être surpris par le nombre de div superflue que mon code peut désormais contenir.

Sinon, en plus des liens qu'ont déja pu te fournir, je me sens obligé d'ajouter l'excellent Pompage qui a publié toutes une série d'aricles reprenant tout de A à Z, ainsi que ce petit site sympa ou tu pourras trouver un pdf récapitulatif bien pratique au début, et enfin, quasi-obligatoire, la traduction française des http://www.yoyodesign.org/doc/w3c/css2/indexlist.htmlspécifications du W3C

Bonne lecture; il en y aura beaucoup; mais ça en vaut largement la peine

coccimaster a écrit :
j'avoue toiujours être surpris par le nombre de div superflue que mon code peut désormais contenir.

C'est effectivement très curieux car un <div> n'est quasiment jamais superflu.
Il est fait pour :
- regrouper des éléments sémantiques (p, hn, ul, etc.) s'il y'en a besoin
- être utilisé si aucun élément sémantique ne correspond à l'emploi
- pallier parfois à des manques de certains navigateurs.

Comment se fait-il que tu aies des div superflus ?
Modifié par Raphael (29 Jun 2006 - 11:14)

Raphael a écrit :
Comment se fait-il que tu aies des div superflus ?

Un exemple simple, hier j'étais confronté à un souci du à une liste déroulante : elle était placée dans une div, et la partie de ma liste qui dépassait de cette div était bien visible au survol, mais lorsque je survolais sa partie basse, qui sortait du conteneur, la liste disparaissait.

La solution, c'était de mettre un z-index, mais, uniquement possible sur des éléments positionnées : comme toute ma page était en flottants, je me retrouve avec ma liste dans son conteneur en absolue et son z-index, contenue eux-même dans un conteneur en flottant pour conserver ma mise en page et mes cheveux...

Je pense qu'il y avait possibilité de faire sans cette avalanche de div, mais dans l'immédiat, pour que tout reste là ou je le voulais, je n'ai rien trouvé de mieux.

C'est sur ce genre d'exemple simple, que je veux parler, et ce n'est pas le seul, un simple centrage vertical sans tableau pourrait en être un autre...

coccimaster a écrit :

Un exemple simple, hier j'étais confronté à un souci du à une liste déroulante : elle était placée dans une div, et la partie de ma liste qui dépassait de cette div était bien visible au survol, mais lorsque je survolais sa partie basse, qui sortait du conteneur, la liste disparaissait.

J'avoue que je n'ai pas très bien suivi le comportement souhaité et obtenu
Aurais-tu un exemple en ligne, bien plus parlant ?
Au fait, pourquoi avoir placé ta liste dans un div, était-ce nécessaire ?

coccimaster a écrit :

C'est sur ce genre d'exemple simple, que je veux parler, et ce n'est pas le seul, un simple centrage vertical sans tableau pourrait en être un autre...

C'est dommage que l'on ait cet a priori.
En fait, il n'y a besoin d'aucun <div> pour center verticalement un élément.

Exemple :

#centre{
     position:absolute;
     left: 50%; 
     top: 50%;
     width: 700px;
     height: 400px;
     margin-top: -200px; /* moitié de la hauteur */
     margin-left: -350px; /* moitié de la largeur */
     border: 1px solid #000;
     background: gray;
     }

<p id="centre">Et hop un paragraphe centré</p>

J'ai utilisé 1 élément (<p>), alors que j'aurais dû en utiliser au minimum 3 en tableaux (<table>, <tr>, <td>).
Où est concrètement l'apport des tableaux ?

Je n'ai montré que le code "lourd" qui est compris par tout le monde y compris IE6, mais j'aurais pu faire plus léger... lorsque IE7 sortira enfin.

Je pense que je n'ai pas été trés clair lors de mon dernier post, je vais essayer d'être plus concis. En fait, quand, je parlais de liste déroulante, j'aurais du dire une barre d'onglets, m'affichant une liste de lien au survol. J'avais crée un topic sur le sujet, qui sera bien plus parlant.

Pour le centrage vertical, idem, j'ai manqué de précision, je parlai d'un élément dont on ne connais pas la hauteur.

Mais justement, c'était juste pour montrer que pour un débutant, un problème simple tourne souvent à la complication excessive, du fait de restrictions entre les positionnements, les types de boites, etc...

Le problème est que pour les premiers projets, en aveugle, dans mon cas, je n'ai pas "pensé" ma mise en page, et chaque ajout me fait subir les contraintes de ce qui a été fait précedemment.

Mais dans tous les cas, merci pour les piste, je vais essayer de rectifier mon code tout pourri
Modifié par coccimaster (29 Jun 2006 - 12:20)