AccueilAccueil  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 [html/css] construction d'un footer

Voir le sujet précédent Voir le sujet suivant Aller en bas 

reborn

reborn
◊ Étranger de Camus

MESSAGES : 19
INSCRIPTION : 16/10/2018
ÂGE : 100
CRÉDITS : /
RÉGION : XXX


[html/css] construction d'un footer Empty
Message(#) Sujet: [html/css] construction d'un footer [html/css] construction d'un footer EmptySam 23 Nov 2019 - 14:33

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!
Revenir en haut Aller en bas

SOLSKEN

SOLSKEN
◊ Penseur de Rodin

MESSAGES : 2447
INSCRIPTION : 06/03/2014
ÂGE : 23
CRÉDITS : @gizniee
RÉGION : google maps.
HUMEUR : despresso



EN SAVOIR PLUS
PASSIONS: dormir, manger.
CÉLÉBRITÉS: kwon hyuk (dean bb), mingyu, mino, bora, taehwan, loading la liste bc c'est trop long !!
LOGICIEL(S): massacreshop

[html/css] construction d'un footer Empty
Message(#) Sujet: Re: [html/css] construction d'un footer [html/css] construction d'un footer EmptySam 23 Nov 2019 - 19:43

coucou [html/css] construction d'un footer 2429781408

je suis pas la reine du codage mais en voyant ta maquette, je ferais un tableau Embarassed (bon je suis du genre à éclater le template comme il faut, même si c'est pas forcément ce qu'il faut faire) mais je partirais sur un truc du genre:

Code:
<table><tr>titre du footer dans une div adaptée</tr>

<tr><td>utilisateurs enregistrés dans une div adaptée</td>
<td>div des messages + div des membres + div bienvenue xxx</td>
<td>membres connectés au cours des 24h dans une div</td></tr>


<tr><td>x utilisateurs en ligne ds leur div</td><td>groupe 1 dans sa vie</td><td>groupe 2 dans sa div</td></tr>
</table>

bon bien sûr, il faut remplacer ce que j'ai écrit par les codes genre {total users online} et tous les autres que tu trouveras dans le tuto mentionné au-dessus [html/css] construction d'un footer 3200731053

je trouve que c'est plus simple de faire un tableau et des div à l'intérieur pour compléter mais je sais que beaucoup font à la div comme toi [html/css] construction d'un footer 2429781408

sinon les codes rouges ne les font pas forcément bug Embarassed le table sert à encadrer, genre à faire les tableaux - c'est comme des poupées russes et le table est la + grosse poupée [html/css] construction d'un footer 1225131605

je sais pas si ça aide ou si j'ai bien compris mais voilà [html/css] construction d'un footer 3461076838
Revenir en haut Aller en bas

Atols

Atols
◊ Étranger de Camus

MESSAGES : 17
INSCRIPTION : 28/10/2019
ÂGE : 20
CRÉDITS : (c)94mlk
RÉGION : Canada / Québec
HUMEUR : all the things i should have quit



[html/css] construction d'un footer Empty
Message(#) Sujet: Re: [html/css] construction d'un footer [html/css] construction d'un footer EmptyDim 24 Nov 2019 - 23:02

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 ?
Revenir en haut Aller en bas

reborn

reborn
◊ Étranger de Camus

MESSAGES : 19
INSCRIPTION : 16/10/2018
ÂGE : 100
CRÉDITS : /
RÉGION : XXX


[html/css] construction d'un footer Empty
Message(#) Sujet: Re: [html/css] construction d'un footer [html/css] construction d'un footer EmptySam 30 Nov 2019 - 17:38

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 Razz

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... [html/css] construction d'un footer 2429781408







Revenir en haut Aller en bas


Contenu sponsorisé



[html/css] construction d'un footer Empty
Message(#) Sujet: Re: [html/css] construction d'un footer [html/css] construction d'un footer Empty

Revenir en haut Aller en bas
 

[html/css] construction d'un footer

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum