Bonjour,

Après quelques jours à tenter de construire (en vain) mon footer (cf: maquette) je viens demander votre savoir.

Maquette:

Je sais que la partie qui m'intéresse se trouve à la ligne 136 grâce à ce tutoriel. J'ai également lu celui-ci pour connaître la signification des attributs.

Code:

Je sais que le HTML va me permettre de rédiger le contenu, créer des "colonnes" etc. Le CSS, qui se trouve en dehors des templates, va me permettre d'agencer les blocs à mes souhaits et de styliser le tout.


Je souhaiterai recevoir des pistes, des astuces sur les codes html dans un premier temps, à utiliser, sans pour autant donner la solution complète, histoire d'apprendre.

J'ai tenter de créer des colonnes, avec des div, mais je n'ai pas réussis à avoir des résultats satisfaisant (codes qui deviennent rouges), puis la présence du table me perturbe énormément. Aussi, à quoi sert le table ?

Merci d'avance!

Coucou puisque tu commences avec le qeel, tu as l'avantage de pouvoir créer ta structure avant et ensuite de pouvoir adapter ton code avec FA. Pour t'éclairer, une balise rouge signifie qu'il y a une autre balise à l'intérieure de celle-ci qui n'est pas bien fermée. La balise table, c'est la balise tableau. Ça signifie possiblement que ton forum est en phpbb2/3. Il serait important alors que tu prennes le temps de lire un tutoriel pour bien comprendre la structure des tableaux parce que toutes les templates en contiennent dans cette version.

Par contre, je me permet de contredire Solsken, il faut éviter d'utiliser les tableaux à tout prix quand tu le peux. Parce que l'utilisation des tableaux pour le positionnement des éléments est une pratique obselète. Est-ce que tu connais plutôt le flexbox ? (On est supposé se servir des tableaux uniquement quand on veut faire... un vrai tableau)

Si tu veux, je peux t'aider à coder pas-à-pas ton QEEL. On va commencer simple, sans regarder la template. Est-ce que tu peux coder la structure HTML de ta maquette ?

Bonjour @Solsken, @Atols,

Désolé pour la réponse tardive, ma semaine a été intense.


En cours, j'ai appris à créer des tableaux, mais pour faire de réels "tableaux", c'est pourquoi j'ai du mal à faire le lien avec les codes table des différentes templates. C'est troublant.


S'il faut réellement les éviter, pour le positionnement, comme le dis Atols, je vais plutôt pencher pour la pratique moderne/courante

Alors voyons... je ne connais absolument pas le flexbox, bien que le nom me dise quelque chose.

Je me suis donc renseigné ICI, sans trop non plus m'égarer dans tous les détails techniques. Si j'ai bien compris, cela va m'aider à organiser le contenu de mon footer de manière simple, et responsive ?
Cela relève bien entendu du CSS, et doit être réalisé après le HTML, n'est-ce pas ?

Alors, je propose un premier jet sur la structure HTML du footer:

Code:

<div class="footer">

<div id="footertitre"> Titre de mon footer </div>

<div id="footeronline" {L_WHO_IS_ONLINE }> Liste des utilisateurs en ligne </div>

<div id="footernombre" {LOGGED_IN_USER_LIST}> Nombre d'utilisateurs en ligne, enregistrés, invisibles et invités  </div>

<div id="footermessages" {TOTAL_POSTS}> Nombres de messages sur le forum </div>

<div id="footerbienvenu" {NEWEST_USER}> Bienvenu au nouveau membre </div>

<div id="footerheures" {L_CONNECTED_MEMBERS}> Liste des membres connectés au cours des 48 dernières heures </div>

<div id="footermembres" {TOTAL_USERS_ONLINE}> Nombre de membres sur le forum </div>

<div id="footergroupe1" {GROUP_LEGEND}> Nom du premier groupe </div>

<div id="footergroupe2" {GROUP_LEGEND}> Nom du deuxième groupe </div>

</div>

Et voilà ce que ça donne, sans regarder les templates !

J'ai juste regardé à la fin la template, et j'ai vu qu'ils utilisaient le span au lieu de div. Qu'est-ce que cela signifie ?

Je suis disponible par call (discord/skype), si cela peut vous arranger, je peux communiquer mon pseudo par MP. Il est parfois plus simple de communiquer de vive voix sur un tel sujet !

Bonne soirée à tous.


PS: J'ai malheureusement perdu mon carnet contenant toutes mes notes sur les fondamentaux HTML/CSS prises en cours. Je vais essayer de les récupérer au plus vite...