...je cale, je cale avec une feuille CSS sous Golive CS2

[Goliath]

...hello la tribu et Bonne Année!!

...là je donne ma langue au chat! ...si quelqu'un peut m'expliquer comment les marges du bloc central avec la femme asiatique ont été réalisées, cela m'aiderait bien (voir annexe). Apparemment ce sont des blocs (des calques eux aussi?) qui sont imbriqués dans le calque. Ces blocs sont réalisés avec un style applicable aux éléments uniques (#)... je ne capte pas comment on y est arrivé...
Pour cela il faut ouvrir la page dans Golive et opter pour "Mise en page" et là on voit bien les blocs détourés qui sont imbriqués...
Je vous préviens que je viens tout juste de me lancer dans le CSS donc soyez patient...

...merciiii!

 

[Anonyme]

Salut,

Le code (généré par golive?) n'est vraiment pas terrible. Il y a des éléments dépréciés comme FONT dans le code, il y a aussi divite (surabondance de div imbriqués), et enfin ce n'est pas sémantique du tout. Par exemple : le titre du site (logotype?) pourrait tenir dans un H1, la liste de liens à droite devrait se faire avec liste non-ordonée (OL) et pour la lettrine, utiliser la pseudo-classe :first-letter aurait suffit. En plus, on utilise des div vides pour créer des marges. On dirait vraiment une mise-en-page tableau, qui a été convertie telle quelle en une multitude de divs. Ah oui, il y a aussi le prologue xml qui va faire passer IE6 en mode quirk et va le faire calculer les boîtes différement, à enlever ou utiliser php pour le mettre ou non suivant le navigateur.

Pour travailler correctement, le mieux c'est d'utiliser un éditeur de texte comme smultron (gratuit, open source), textmate (la rolls, shareware) ou golive (puisque tu l'as) en mode source et de taper tout à la main. Comme accessoire indispensable : firefox avec l'extension webdevelopper et l'extension firebug.

Pour t'aider à bien démarrer voici une page qui résume tout ce que tu dois savoir.

 

[Goliath]

Salut,

Le code (généré par golive?) n'est vraiment pas terrible. Il y a des éléments dépréciés comme FONT dans le code, il y a aussi divite (surabondance de div imbriqués), et enfin ce n'est pas sémantique du tout. Par exemple : le titre du site (logotype?) pourrait tenir dans un H1, la liste de liens à droite devrait se faire avec liste non-ordonée (OL) et pour la lettrine, utiliser la pseudo-classe :first-letter aurait suffit. En plus, on utilise des div vides pour créer des marges. On dirait vraiment une mise-en-page tableau, qui a été convertie telle quelle en une multitude de divs. Ah oui, il y a aussi le prologue xml qui va faire passer IE6 en mode quirk et va le faire calculer les boîtes différement, à enlever ou utiliser php pour le mettre ou non suivant le navigateur.

Pour travailler correctement, le mieux c'est d'utiliser un éditeur de texte comme smultron (gratuit, open source), textmate (la rolls, shareware) ou golive (puisque tu l'as) en mode source et de taper tout à la main. Comme accessoire indispensable : firefox avec l'extension webdevelopper et l'extension firebug.

Pour t'aider à bien démarrer voici une page qui résume tout ce que tu dois savoir.

...au fait à la base je suis maquettiste/graphiste donc tu comprendras que l'encodage n'est pas vraiment ma tasse de thè :sleep: ... franchement je m'endors devant des pages encodées.... bon, apparemment il y a du pain sur la planche...je vais essayer de pousser un peu plus loin mes maigres connissances sur le web...

...en tout cas merci!

 

[Anonyme]

...au fait à la base je suis maquettiste/graphiste donc tu comprendras que l'encodage n'est pas vraiment ma tasse de thè :sleep: ... franchement je m'endors devant des pages encodées.... bon, apparemment il y a du pain sur la planche...je vais essayer de pousser un peu plus loin mes maigres connissances sur le web...

...en tout cas merci!

Je viens de relire mon post et je crois que j'ai été un peu abrupt avec ce «catalogue de problèmes»... Je m'en excuse. Je devrais poster quand je suis de meilleure humeur, ça m'éviteras d'être parfois agressif.

Sinon courage pour la suite, tu verras que ce n'est pas si compliqué, le truc c'est de lâcher prise et de ne pas essayer de refaire au pixel près une mise en page identique (tentant quand on vient de la mise-en-page papier ) sur tous les navigateurs mais de faire une mise-en-page qui s'affiche correctement, simplement.

En tête de ce forum tu trouveras une liste d'adresses utiles.

P.S. : un tutoriel en 15 leçons pour débutants.

 

[Goliath]

Je viens de relire mon post et je crois que j'ai été un peu abrupt avec ce «catalogue de problèmes»... Je m'en excuse. Je devrais poster quand je suis de meilleure humeur, ça m'éviteras d'être parfois agressif.

Sinon courage pour la suite, tu verras que ce n'est pas si compliqué, le truc c'est de lâcher prise et de ne pas essayer de refaire au pixel près une mise en page identique (tentant quand on vient de la mise-en-page papier ) sur tous les navigateurs mais de faire une mise-en-page qui s'affiche correctement, simplement.

En tête de ce forum tu trouveras une liste d'adresses utiles.

P.S. : un tutoriel en 15 leçons pour débutants.

...peut-être la mauvaise humeur est le défaut des encodeurs?

...en effet quand on passe de la mise en page papier au Web on a tendance à être perfectionniste ...mais je me dis que si GoLive présente son logiciel avec option de mise en page avec grille ou avec calque il doit y avoir une raison, non? (...les deux techniques reposent sur le CSS) ...je trouve cela vachement convivial pour quelqu'un qui vient d'Indesign, de Photoshop ou d'Illustrator... sûrement le problème se pose par apprès pour les encodeurs acharnés... de toute façon je n'ai nulle l'intention de me lancer dans des pages web hyper sophistiquées et passer des heures devant des pages encodées car cela n'est pas mon but et comme je l'ai déjà dit auparavant cela ne m'intéresse pas du tout... et puis il y a une autre vie à côté de l'ordinateur

 

[Anonyme]

...peut-être la mauvaise humeur est le défaut des encodeurs?

...en effet quand on passe de la mise en page papier au Web on a tendance à être perfectionniste ...mais je me dis que si GoLive présente son logiciel avec option de mise en page avec grille ou avec calque il doit y avoir une raison, non? ...je trouve cela vachement convivial pour quelqu'un qui vient d'Indesign, de Photoshop ou d'Illustrator... sûrement le problème se pose par apprès pour les encodeurs acharnés... de toute façon je n'ai nulle l'intention de me lancer dans des pages web hyper sophistiquées et passer des heures devant des pages encodées car cela n'est pas mon but et comme je l'ai déjà dit auparavant cela ne m'intéresse pas du tout... et puis il y a une autre vie à côté de l'ordinateur

Ben le problème de Golive et dreamweaver c'est qu'ils ont été faits au départ pour de la mise-en-page avec tableaux et ils ont difficile de lâcher prise siffle, alors ils produisent un code html assez caca quand tu travailles avec les CSS.

Peut-être que la prochaine version de dreamweaver réglera ces problèmes mais en attendant... Vive les éditeurs de texte.

Sinon j'avais l'impression que tu voulais apprendre les CSS, c'est pour ça que j'ai taper tout ça. Voilà quoi.

Adchao.

 

[Goliath]

Ben le problème de Golive et dreamweaver c'est qu'ils ont été faits au départ pour de la mise-en-page avec tableaux et ils ont difficile de lâcher prise siffle, alors ils produisent un code html assez caca quand tu travailles avec les CSS.

Peut-être que la prochaine version de dreamweaver réglera ces problèmes mais en attendant... Vive les éditeurs de texte.

Sinon j'avais l'impression que tu voulais apprendre les CSS, c'est pour ça que j'ai taper tout ça. Voilà quoi.

Adchao.

...tout à fait!... en tout cas y voir un peu plus clair et au besoin utiliser une feuille de style CSS si ma page ne résulte pas comme il faut sur les différents navigateurs! ...merci!

 

[fredmac75]

Ben le problème de Golive et dreamweaver c'est qu'ils ont été faits au départ pour de la mise-en-page avec tableaux et ils ont difficile de lâcher prise siffle, alors ils produisent un code html assez caca quand tu travailles avec les CSS.

...

J'utilise dream et je n'ai pas le sentiment de faire du code "caca" . Encore faudrait-il que les utilisateurs cochent la case "rendre le doc conforme XTML" avant de créer leur page...

Quand aux feuilles de style, Dream ne fait ni plus moins que ce que tu lui met dans le ventre et hormis l'autocomplétion, je ne vois pas en quoi le code css serait mauvais, si ce n'est la mauvaise compréhension des principes de base du CSS de celui qui rédige.

concernant le problème de notre ami, il me semble effectivement qu'une petite lecture des principes du positionnement dans ou hors le flux, serait la bienvenue. En l'absence de ces notions de base, il me semble difficile d'apporter de l'aide.

Ps: j'ai jetté un œil sur le code fournis en pièce jointe et force est de constater que la structure et trop complexe (beaucoup de petits bouts qui se balladent) au prorata du résultat. Simplifier la structure me semble être un bon départ. A titre d'exemple, il serait peut être intéressant de s'interroger sur la conception du background ; toutes les images doivent-elles se retrouver dans un conteneur img ? la taille de mon texte (le nombre de mots) va t-elle changer, quid des éléments qui viennent au mileu ou après ?

 

[Anonyme]

J'utilise dream et je n'ai pas le sentiment de faire du code "caca" . Encore faudrait-il que les utilisateurs cochent la case "rendre le doc conforme XTML" avant de créer leur page...

J'avoue que je n'ai pas la dernière version du programme, je n'ai que dreamweaver mx «simple» au boulot et par défaut, en xhtml, je n'ai droit qu'à du transitionnal. En html simple, il insère un mauvais Doctype, là aussi problème. De plus, il me rajoute systématiquement le prologue xml avec les pages xhtml, ce qui pourrait dérouter les débutants quand ils vont regarder leurs pages dans IE ensuite. Dans tous les cas, il autorise, via l'interface graphique, l'insertion de code interdit par le doctype (font, align center, etc). Mais d'après ce que tu dis les choses ont l'air de s'être améliorées depuis. Tant mieux.

Quand aux feuilles de style, Dream ne fait ni plus moins que ce que tu lui met dans le ventre et hormis l'autocomplétion, je ne vois pas en quoi le code css serait mauvais, si ce n'est la mauvaise compréhension des principes de base du CSS de celui qui rédige.

C'est vrai qu'à part un ou deux trucs qui manquent et un preview chaotique (dans ma version déjà ancienne ) je n'ai pas de critiques sur le code CSS en lui-même.

 

[Anonyme]

D'ailleurs je sais qu'il existe un article sur un internet pour modifier les fichiers de config et gabarits pour le forcer à être strictement valide (dans cette version).

 

[fredmac75]

...De plus, il me rajoute systématiquement le prologue xml avec les pages xhtml...

Ce qui est tout à fait normal compte tenu du fait qu'il s'agit de Xhtml, c'est l'inverse qui serait inquiétant.

...ce qui pourrait dérouter les débutants ...

Basculement en quirk mode de la part de IE avec tout les soucis que cela comporte...

Je te rassure j'ai également une MX 2004 et j'avoue ne pas rencontrer les "problèmes" dont tu parles. Ceci dit, il y a un bon moment que je ne code plus en HTML.

Toutes choses mise à part ne penses tu pas que la page de notre ami gagnerais à avoir une structure simplifiée ? La question des marges est, chez lui, gérée par des éléments de type block. D'où la divite aigue. Un emploi plus judicieux des margin et padding permettrai sans doute cette simplification de la structure.

 

[fredmac75]

D'ailleurs je sais qu'il existe un article sur un internet pour modifier les fichiers de config et gabarits pour le forcer à être strictement valide (dans cette version).

Oui, j'ai moi même fait des modifs dans les fichiers de conf pour qu'il (Dream) me prenne en compte safari 2.0, FF 1.5 dans la vérification syntaxique du code.

 

[Anonyme]

Toutes choses mise à part ne penses tu pas que la page de notre ami gagnerais à avoir une structure simplifiée ? La question des marges est, chez lui, gérée par des éléments de type block. D'où la divite aigue. Un emploi plus judicieux des margin et padding permettrai sans doute cette simplification de la structure.

Oui tout à fait d'accord avec toi : on peut réduire fortement le nombre de div avec les marges, les paddings. Mais je pense qu'en fait il voulait savoir comment était réalisé cette page pour apprendre et malheureusement on ne peut pas dire qu'elle soit un bon exemple. Le mieux pour apprendre serait de la refaire en appliquant les bonnes méthodes…

Je vais peut-être m'y mettre tiens, comme je suis aussi aussi un débutant, ça me fera de l'exercice.