Première page du tout premier site...

Salut à tous,...

Je viens de commencer à apprendre la création de site et plus particulièrement la technique CSS...

Cela fait trois jours que je m'y suis mis et ma technique d'apprentissage est de commencer (ce n'est qu'une étape!) au plus simple: les balises div...
Je n'ai donc utilisé QUE ça sans penser non plus à optimiser le code (ce que je ferai plus tard), en me concentrant sur la mise en page de la page d'accueil et sur la compatibilité IE6 et Geckos.
Voilà qui est à présent chose faite.
Au niveau du texte, il sera remplacé partout par du contenu dynamique en php mais ça c'est une autre histoire, je n'y suis pas encore...

Tout fonctionne sauf une chose que je vous laisse découvrir sur la page de mon site au niveau de la colonne centrale.
Curieusement, la logique semble pencher du côté de IE cette fois-ci car seul Firefox semble réagir bizarrement sur la colonne centrale.
J'ai changé la doctype pour vérifier mais rien n'y fait.
Je vous propose de voir le site avec les deux navigateurs pour comparer.

Pouvez-vous me donner votre avis ou une solution?

Dans la colonne des articles vous remarquerez aussi que les lignes de séparation diffèrent en couleur et en position entre les deux navigateurs (ce qui est moins grâve car cela ne change rien à la structure de tout le document m'enfin bon...)

Cela n'a pas été simple à faire pour moi et je vous explique ma methode pour vous donner des pistes:

-Je n'ai pas utilisé les positionnements relatifs et absolus car ma page est centrée, quelle que soit la largeur du navigateur. la fenêtre centrale de contenu est aussi une sorte de pseudo frame en include. Si j'utilise le positionnement, cela fonctionne sur un navigateur mais pas sur l'autre car il considère le bord du navigateur et non le bord du site en soi.
J'ai donc exclu cette méthode.

-J'ai divisé la page en conteneurs spécifiques: Un gros pour les "news/concours/tutos" avec un float à gauche, Un autre pour 'La Une" avec un float à droite et un pour les deux dernières colonnes avec un float à droite pour la "communauté".
Vous voyez donc que seule la section "articles" n'a pas de float ce qui semble poser problème.
Si je mets un float à gauche sur l'ensemble comprenant la section "articles", tout l'ensemble veut se mettre en-dessous de la section "tuto" et si je mets un float à droite, la colonne "articles" et "communauté" s'inversent sans pour autant régler le problème.
Je suis donc coincé.
J'ai tenté des "clear: left/right/both;" un peu partout, sans résultat.

Autre chose: maintenant que tout ça est fait, je compte optimiser cette page au niveau du code et utiliser toutes les balises adéquates.
Je viens de tester la balise "Hn" mais mes titres changent de taille ce que je ne veux pas...Comment rectifier leur taille à ma guise?

Voilà mes premières questions les plus urgentes à propos de ce début de site que je compte utiliser comme outil d'apprentissage.
Mais n'hésitez pas à me donner des conseils pratiques !
Si vous avez besoin d'un bout ou de l'entièreté du code (il est long!) n'hésitez pas à demander.

Petite remarque: pour ceux qui se demanderaient pourquoi j'ai tant de conteneurs imbriqués:
Sans cela j'ai soit des problèmes de positionnement, soit des problèmes de bordures épaisses aux tailles incontrôlables sur Firefox.
De ce fait, j'ai créé des conteneurs généraux et invisibles qui me servent à placer mes colonnes dans le flux et dedans, j'ai placé des conteneurs pour tracer les contours et les limites de petites entités de blocs que sont les différentes sections.
Je ne dis pas que c'est la meilleure methode mais c'est la plus propre en plus d'être la seule que j'ai trouvé de compatible sur tous les navigateurs...mais bon ça alourdit le code.

Merci de toute votre aide et à bientôt:

http://www.audiosquare.com


PS: sans rien toucher, mes trois documents (index/page1/css) ont un poids total de 37,9ko (64,0ko sur disque).
Cela est-il raisonnable pour une seule page affichée?
Modifié par lexgotham (20 Feb 2005 - 15:39)

lexgotham a écrit :

Je viens de commencer à apprendre la création de site et plus particulièrement la technique CSS...

Cela fait trois jours que je m'y suis mis et ma technique d'apprentissage est de commencer au plus simple: les balises div...
Je n'ai donc utilisé QUE ça sans penser non plus à optimiser le code, en me concentrant sur la mise en page de la page d'accueil et sur la compatibilité IE6 et Geckos.
Voilà qui est à présent chose faite.

Très bien. Mais il est temps, maintenant, de jeter tout cela et de recommencer par le commencement: le langage HTML. Ce n'est qu'après avoir construit une page structurée avec les éléments (les "balises") qui conviennent qu'il sera temps de s'occuper de sa présentation et de la technique CSS.

Pour l'instant, tu fais les choses à l'envers

lexgotham a écrit :

Cela fait trois jours que je m'y suis mis et ma technique d'apprentissage est de commencer au plus simple: les balises div...
Je n'ai donc utilisé QUE ça sans penser non plus à optimiser le code, en me concentrant sur la mise en page de la page d'accueil et sur la compatibilité IE6 et Geckos.
Voilà qui est à présent chose faite.
Au niveau du texte, il sera remplacé partout par du contenu dynamique en php mais ça c'est une autre histoire, je n'y suis pas encore...

Au commencement était le html..., et c'est dans ta courbe d'apprentissage un préalable indispensable. Il existe beaucoup d'autres éléments que div ou span que tu utilises exclusivement. Div est un élément neutre permettant de faire des regroupements d'éléments par exemple. Si tu as un paragraphe il existe un élément p, tu disposes également de 6 niveaux de titres de h1 à h6 etc. (index des éléments html)
Pour bien débuter je te conseille de suivre ce tutoriel Écrire une page Web avant de te lancer plus avant.
Ensuite pour ta mise en écran css s'en occupera.

grillé
Modifié par Igor (20 Feb 2005 - 13:33)

Désolé, il semble que je me sois mal exprimé...

Mon but n'est pas d'obtenir un diplôme es webdesign.
Je n'ai ni l'envie ni le temps non plus.
Mon but est de faire un site qui fonctionne ou de savoir concretement pourquoi il ne fonctionne pas.

Je reformule donc...

J'ai envie de faire un site (c'est le moteur de ma démarche) et je compte fonctionner par le principe de l'essai (c'est la méthode).
Chaque fois que je calle sur une notion, je me documente par moi-même à ce sujet.
Une fois le résultat obtenu me semblant satisfaisant, je mets la barre un cran plus haut, demande des avis, et revois/affine le tout de manière à me rapprocher des règles de l'art.
Ce faisant, au bout du compte, j'ai mis la main à la pâte tout de suite et au final, ai un bon apperçu des techniques abordées.

En théorie, ta réponse est politiquement très très très correcte et on ne peut plus constructive.
En pratique, elle est une belle esquive et met largement en ruine tout ce que je viens de faire (un paquet de jours).

Ne peut-on partir de ce qui est fait pour m'orienter ou est-ce si catastrophique?
Modifié par lexgotham (20 Feb 2005 - 14:31)

Oui, il est impératif de bien comprendre qu'il n'y a surtout pas que des balises <div>.

Voici des lectures à suivre :
des calques qui se perdent
Trop de div tue les div
TMaladies exotiques et CSS
Modifié par Raphael (20 Feb 2005 - 13:45)

Evidemment qu'il n'y a pas que les balises div! Il me semble que mon premier post a été assez explicite à ce sujet...
J'ai bien lu tout ce qui a été écrit.
Je pense que la crise de "divitis" s'applique à ceux qui pensent que les balises div sont la solution ultime.
Pourquoi est-ce le cas?
Car c'est tout simplement le plus évidentes à aborder...
Personnellement je ne pense pas que ce soit la solution qui me convienne mais je la vois en tous cas comme un bon point de départ.
Je ne vous aurais pas posé la question sur les balises <hn> si je n'envisageais pas d'aller plus loin.
Cette page d'accueil ne vient pas de nulle part!
J'ai commencé par "image ready" et les slices habituels.
les limites de ceux-ci compris, j'ai balancé tous les slices pour créer des tableaux sous dreamweaver.
Ceci compris également, j'ai créé des feuilles de styles pour les polices.
Et maintenant, ayant bien compris tout ça, je me lance dans le "tout css" mais en douceur.
L'interêt est de comprendre pourquoi chaque technique à sa raison d'être aini que ses limites et MAINTENANT je sais exactement pourquoi j'en suis arrivé aux feuilles de styles.
Maintenant je m'apprettais à savoir EXACTEMENT pourquoi le tout "div" est à éviter.
C'est un apprentissage bien plus actif et plus pertinent à MON goût que celle qui est préconisée par tout le monde.
Respectons cela.

Mon but est de comprendre le flux avant de me lancer dans le reste.
Je commence par une notion, l'exploite à fond et constate ses limites.
Après je passe à la suivante...

Une méthode n'est jamais exclusive, juste adaptée à la circonstance.

Ok, je vais sortir par la petite porte, aller potasser des bouquins et des sites que je ne comprendrai pas par manque de concret et abandonner un site qui n'aura même jamais vu le jour par découragement.
Comme beaucoup d'ailleurs.
Par contre, je pourai, par idées reçues, faire passer le message que les "tables" sont pour les bouseux et que la divitis est une maladie honteuse.
Mais comme beaucoup encore, je ne saurai jamais pourquoi, concrètement parlant, car on ne m'aura pas vraiment permis de le tester.

MA méthode me permet d'éviter ce cas de figure car elle donne une satisfaction immédiate, ludique, un certain degré d'implication et d'esprit critique avec, en fin de processus, une connaissance solide.
Mais bon. Faisons comme vous dites. Vous savez mieux que moi de quoi vous parlez.

Merci pour vos réponses.
Je reviendrai...quand je saurai tout.
Modifié par lexgotham (20 Feb 2005 - 14:33)

Oulà, il ne faut pas se vexer comme ça (corrige-moi si je me trompe) !

Si j'ai bien compris, tu apprends le HTML, c'est bien. Tu n'utilises que des balises "div", c'est moins bien. Il y a une raison à ça. Prenons une analogie:

Je veux ranger ma chambre. Je me dis, mettons tout dans des boîtes, en fonction du contenu. Alors je commande des dizaines de containers métalliques de 15 mètres par 3 par 3. Très bien, non ? Tout ce qui est dans ma chambre doit bien pouvoir rentrer dans ces containers! Je me met alors à ranger ma collection de timbres. Je met tous les timbres nationaux dans le container 1 et tous les timbres étrangers dans le container 2. On peut dire qu'ainsi, les timbres sont rangés, non ? J'ai bien séparé mes timbres en deux ensembles distincts. N'aurait-il pas été plus simple et plus pratique d'utiliser des petits cartons ou des albums exprès pour ? Ne serait-il pas plus logique de mettre les timbres dans un contenant adapté ?

Il veut en venir où ? J'y viens. Les timbres (et le cheni de ma chambre), c'est tout le contenu de ta page HTML. Le container de 15 mètres, c'est la balise "div". Je peut tout mettre dedans, mais ça n'a pas forcément de logique. L'album de timbres, c'est par exemple, la balise "p" (si les timbres sont des paragraphes). On peut évidemment mettre tout le cheni de ma chambre dans de grands containers, mais on peut aussi, par logique, ranger tout ça dans des contenants adaptés, non ?

Tout ça pour essayer de dire qu'il est important (à nos yeux et aux yeux du W3C, en tout cas(corrigez-moi )) d'utiliser les balises correspondant au contenu. "p" pour un paragraphe, "hn" pour un titre, "q" pour une citation en ligne, "blockquote" pour une citation bloc, etc. Tu peux certes tout faire avec des "div" et des "span", mais agir ainsi, ce n'est pas exploiter toutes les possibilités offertes par le langage. C'est comme si, dans ton langage parlé, tu remplaçais tous les noms par "chose", pas évident, non ?

Quitte à me répéter, tu peux faire ton site avec uniquement des "div" et des "span", tu passes juste, à mon avis, à coté d'une bonne partie de ce que peut t'offrir le langage HTML. Par ailleurs, à mon avis, tu risques de perdre du temps à essayer de tout "[b]divifier[/i]", plutôt que de perdre un temps bien moindre à apprendre les quelques balises adaptées.

En espérant t'avoir un peu convaincu !

@+, HoPHP

Non, je ne suis pas vexé du tout!
Je suis juste du genre à parler avec passion, lol!
J'ai bien compris ton exemple et il est très pertinent.
Ce que j'essayais de dire c'est que je n'essaye pas de tout "divifier". J'en suis simplement au stade où je ne "dédivifie" pas tout de suite de manière compulsive car j'en suis juste arrivé au stade où je me rend compte que les timbres, ça se range.
Maintenant que c'est fait et que je me rend compte que mes timbres peuvent être mieux rangés, je vous demande de venir voir ma chambre pour me donner les conseils adhoc, sur le terrain.
Un avis pratique, sur place vaut 1000 fois le catalogue ikea (même si je le lis quand même et en prends bonne note).

Ce qui me mets parfois hors de moi c'est l'attitude formattée du genre: "J'ai vu une table! pas de table! tu n'en sauras pas plus tant qu'il y a une table!"
Peut-être y-a-t-il une raison d'être à cette table.
En tous cas ce qui est certain, c'est que c'est hors-sujet et qu'en attendant, le gars n'a pas la réponse à sa question qui n'avait rien à voir avec cette maudite table.
On en est là, aujourd'hui.
Je vous demande des conseils, je vous mets en garde contre les div en vous disant que je connais leur danger, que ce n'est que temporaire, le temps de mieux comprendre autre chose mais...on crie au loup!
On ne veut rien savoir. C'est pire qu'une phobie.
Malheureux, tu es pris d'un accès de divitis!
Et hop! je suis en quarantaine.
J'avais mes raisons pourtant.
Mais personne ne semble vouloir lire ce que j'ai écris à ce sujet...

Vous doutez? J'exagère?
Alors expliquez moi pourquoi j'ai eu tant de discours sur LE div dans son expression la plus théorique alors que pas un seul d'entre-vous ne m'a encore parlé de ses conséquences sur mon site même, en pratique...


Comprenez que je ne suis ni vexé ni méprisant à votre égard.
Vous êtes des pros qui en savez mille fois plus que moi et je respecte ça mais je voulais insister sur le fait que, parfois, les pros, oublient ce que c'est que de débuter ou simplifient les motivations des débutants.
Etre débutant dans un domaine n'impliquent pas qu'on soit dénudé de sens commun pour autant.
La reflexion, tout comme vous, on la pratique depuis notre naissance...
Elle n'est peut être pas juste pour autant mais elle vaut bien une autre dans la considération.

J'ai mis en garde à propos de mon utilisation des div un nombre important de fois depuis le premier message.
Même le dernier message que vous avez posté en parle comme si je n'en avais jamais fait mention.
Modifié par lexgotham (20 Feb 2005 - 15:07)

Je ne voulais pas être mal interprêté : je n'ai jamais dit que tout ce que tu faisais était mal. Ce n'est pas le cas.
Tu as apparemment la motivation et la volonté pour aller de l'avant, c'est pourquoi je t'ai simplement proposé des pistes à suivre avant d'aller trop loin dans le mauvais sens

Comme moi et comme tout le monde ici, tu débutes sur une terre nouvelle. Si on peut t'aider à ne pas perdre trop de temps, c'est mieux non ?

Pour ma part, je n'ai jamais dit qu'il fallait bannir les tableaux de mise en page tout de suite (rien ne t'empêche de les abandonner au fur et à mesure), je tenais simplement à te signaler que beaucoup de débutants ont l'habitude de remplacer les cellules (td) par autant de <div>, ce qui est parfaitement inutile.

A toi de jouer, teste, teste et teste encore. N'hésite pas à faire des erreurs et à revenir en discuter. C'est à ça que sert une communauté

Merci!
On va y arriver et je vais coller ici jusqu'à devenir un pros!
Merci de ne pas m'avoir envoyé ballader...
Je suis très...emporté et ça peut parfois me causer des problèmes.
Je vais suivre vos conseils, virer toutes ces div's inutiles, et je reviens.

A++

Ce que nous tentons de te dire c'est que avant de te lancer dans la décoration il faut mieux partir de fondations solides.
Concrètement d'abord un code html correctement balisé, outre que ton contenu portera plus de sens, il sera bien plus facile et efficace d'utiliser les css pour réaliser ta mise en page et décorer ton site.
Pour ce qui est de la divite je crois que nous sommes tous passés par la là, avant de se lancer dans la classite compulsive
Modifié par Igor (21 Feb 2005 - 17:25)

Pour la classite aussi, je trouverai bien mon mot à dire à ce moment là, mdr!!

Merci à tous et dès que j'ai un truc présentable, je reviens.

PS: la déco...mmm...elle me permet de savoir où je veux en venir, le but que je dois atteindre; une sorte de devis en quelque sorte, mais c'est vrai que ça sert à rien d'accrocher un tableau au mur (un vrai, pas une balise!) si on compte plâtrer juste après...

Leçon retenue!
Modifié par lexgotham (20 Feb 2005 - 15:40)

Tu me fais penser à une autre analogie pour le coup: la différence entre poser des carreaux au mur (divs à profusion) et poser des lais de papier peint (clear: both; ou quelque chose comme ça une fois arrivé en bas du mur et c'est tout, le prochain lai redémarre en haut du mur, hop 3 colonnes et le design est fini)