En se basant sur du HTML 5, car ton doctype ne précise pas quel version de HTML tu utilises.
Pour ton sujet, la mise centrée d’un titre n’a pas besoin d’un
Un simple paragraphe suffit:
<p style="text-align:center">Ce texte est placé au centre.</p>
Pour mettre deux images au même niveau tu as différentes solutions dont:
Le tableau d’une seule ligne avec deux colonnes
Deux divavec positionnement
La disposition en colonne
Les tableau sont à éviter en fait, mieux vaut utiliser les div.
Pour cela il faut utiliser les CSS de positionnement: Inline, relatifs, absolus, adhérent etc…
Il faut garder en mémoire le fait que les contextes sont inclusifs d’un bloc à un sous-bloc.
Il est aussi possible d’utiliser une disposition par colonne.
Pour trouver tout un tas de notion bien décrites avec des exemples:
J’ai dit que les images sont de display inline par défaut, mais si elles sont encapsulées dans des div qui elles sont de type block par défaut, normal qu’elles s’affichent en-dessous les unes des autres.
Remplacer « display:block; » dans le .pic par « display:inline-block; »
En même temps je fais tout de tête depuis mon tel là, j’ai fait aucun test, et le code je l’ai parcouru assez rapidement ^^
Je zieuterai ce soir sur pc, avec des tests et tout et tout
Chose promise, chose dûe! Voici ce que tu cherches clé en main. Comme j’ai précisé, pour les fontes il vaut mieux utiliser les unités « em » ou « rem » (non c’est pas le groupe de musique ). Pour rappel, 1em = la largeur par défaut d’un caractère dans ton navigateur. Comme tu voulais 80%, cela correspond à 80/100=0.8em, que j’ai corrigé plusieurs fois mais que normalement tu ne pourrais mettre qu’une seule fois dans le css de ton body, puisque tu mets la même taille partout. Je t’ai aussi indenté correctement ton code html et css. Je t’ai mis en commentaire 2 propriétés css car elles ne servent à rien pour le centrage (sauf à le pourrir ), ça se fait « tout seul » avec les valeurs par défaut (du moins sous chromium 103 chez moi).
Fini le bla-bla, envoie le pâté!
L’archive tout cuit mais une fois téléchargée tu dois retirer le « .log » à la fin pour avoir l’archive, je l’ai rajouté pour pouvoir uploader ici, sinon on a un message d’erreur: Pat66.zip.log (12,6 Ko)
Pour Pat66, il faudrait que tu attaques les Flexbox et le Grid si tu veux faire du positionnement précis.
car avec du float tu risque de bien vite galérer pour le responsive
Si tu déclares dans l’en-tête du document html que ton document va utiliser l’encodage utf-8
il n’est pas nécessaire d’utiliser dans ces pages web des entités html => utilise directement les caractères (accentués et autres) qui te sont déjà accessibles depuis ton système Linux qui devrait sans doute utiliser l’encodage utf-8
Voir le retour de la ligne de commande suivante :
locale
Pour entrer un caractère espace insécable (NO-BREAK SPACE) depuis un système Linux,
tu peux utiliser la méthode d’entrée d’un caractère par son point de code unicode qui, pour le caractère espace insécable est noté : U+00A0
Mais si je te donne l’exemple en utilisant un caractère espace insécable, tu ne verras rien apparaître à l’écran, alors, comme le principe est le même, je vais t’expliquer comment entrer le caractère UTF8 ¾ dont le point de code unicode est noté : U+00BE
Note :
Dans ces exemples, il n’est pas nécessaire d’entrer les deux chiffres zéro qui précèdent la valeur hexa-décimale, et on peut entrer les lettres de la valeur hexa-décimale en lettres minuscules au lieu de majuscules.
Il n’y a pas de repositionnement des lien par rapport à l’image (pas de saut de ligne type <br> ou de repositionnement relatif ou absolu dans ton CSS sur la balise <a />
Par ce que ton footer n’est pas redimensionné donc par defaut il occupe le reste de la page.
et comme dans toute traduction, il arrive qu’il y ait des erreurs,
si tu te débrouilles un peu en anglais ou même simplement en globish
tu préféreras les mêmes pages web dans leur version originale :
Ne saute pas les étapes, car tout dépends de ce que tu auras appris précédemment,
et dans le HTML comme dans le CSS tu verras que c’est très important si on veut pouvoir comprendre et arriver à faire quelque chose qui fonctionne correctement.
De ce que je comprend que tu veuilles faire c’est des cartes.
Il y a vraiment un moyen tres simple de faire cela
j’aurais un code html simple ici
<div class="cards_container">
<div class="card_item">
<img> .......
<a></a> ou balise <p></p> <q></q> tout dépend de ce que tu veux faire lien ou texte liste etc...
</div>
</div>
en CSS pour le positionnement
.cards_container{
width: 100vw ou 100%;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
/*Les propriétés que tu souhaite niveau style*/
}
.card_item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Regarde et expérimente un peu pour voir comment ça se comporte.
1er) J’attire également ton attention, sur la mauvaise pratique que de faire de l’inline style.
C’est à dire mettre du style directement dans ton html.
Pour le simple fait que dans ton code html, ci–dessus, par exemple, ton image sera fixe ! très mauvais pour le responsive (inexploitable sur mobile).
De plus ça te créera des soucis dans tes spécificités CSS car le style in-line à un point plus fort que les classes id etc… dans la cascade.
2e) Je ne vois aucune utilité à ton lien cliquez-ici , cela pourrait être fait simplement en entourant ton img du <a></a> qui ferait de ton image un lien, après en css au moment du :hover tu pourrais faire un tas de chose qui indiquerait que fais ton lien.
), ça se fait « tout seul » avec les valeurs par défaut (du moins sous chromium 103 chez moi).
