Bonjour
je débute en html je dois réaliser une page comportant un titre centre
puis deux images avec des liens en dessous
voici mon code :
```html
B.A.B.A
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:
```auto
Ce texte est placé au centre.
```
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:
> **[Le positionnement - Apprendre le développement web | MDN](https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Positioning)**
>
> Le positionnement permet de sortir les éléments du flux normal de la composition du document, et de les faire se comporter différemment, par exemple en plaçant un élément sur un autre ou en occupant toujours la même place dans la zone d'affichage du...
---
> [@Pat66](#):
>
> ``
Permet de déclarer du html5, pas besoin de préciser la version.
Pour les images tu peux utiliser « figure » et « figcaption » pour la légende.
Pour tes images le display est en inline, réduis ta margin-left ou tu mets margin:0 auto;
---
> [@Pat66](#):
>
> `font-size:80%;`
Mets plutôt des em ou des rem
> [@Zargos](#):
>
> Le tableau d’une seule ligne avec deux colonnes
Ça se fait plus ça
---
> [@Zargos](#):
>
> … Tu y est presque, …
Pourtant :
[](https://ibb.co/dtJsxLk)
Je rappelle que :
> [@Pat66](#):
>
> Pourrais-je avoir des indications pour centrer mes images ainsi que les liens en dessous des images ?
---
> [@anon29980398](#):
>
> ```auto
> .pic {
> display: block;
>
> ```
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](https://www.debian-fr.org/uploads/short-url/rmuYnXiek2VoBu7NZBMWzXZzyPV.log) (12,6 Ko)
Le html:
```auto
B.A.B.A
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
---
Bonsoir
J ai revu mon code a present
je demande une revue de code
voici mon resultat
mon css
body {
font-size:16px;
font-family:verdana;
font-style:normal;
color:white;
background-color:#fd6c9e;
padding:0px;
}
a:link{
```
color:white;
```
}
a:visited{
```
color:green;
```
}
a:hover{
```
text-decoration:underline;
```
}
footer{
font-size:13px;
float:right;
font-style:italic;
}
title{
text-align:center;
color:white;
}
.main {
```
text-align:center;
}
```
img{
width:250px;
height:250px;
}
.pic {
```
text-align:center;
display:inline-block;
```
}
Pourrais-je avoir des explications sur le fait que les liens ne sont pas en dessous des images
et pourquoi l espace du footer est plus grand ?
NB:je suis un bougre de debutant 😏
---
> [@Pat66](#):
>
> Pourrais-je avoir des explications sur le fait que les liens ne sont pas en dessous des images
Il n’y a pas de repositionnement des lien par rapport à l’image (pas de saut de ligne type ` ` ou de repositionnement relatif ou absolu dans ton CSS sur la balise ``
> [@Pat66](#):
>
> et pourquoi l espace du footer est plus grand ?
Par ce que ton footer n’est pas redimensionné donc par defaut il occupe le reste de la page.
---
Pour gagner du temps, je te recommande les tutoriels suivant :
[Tutoriel HTML](http://www.w3big.com/fr/html/default.html#gsc.tab=0)
[Tutoriel CSS](http://www.w3big.com/fr/css/default.html#gsc.tab=0)
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](https://fr.wikipedia.org/wiki/Globish)
tu préféreras les mêmes pages web dans leur version originale :
[HTML Tutorial](http://www.w3big.com/html/default.html#gsc.tab=0)
[CSS Tutorial](http://www.w3big.com/css/default.html#gsc.tab=0)
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.
---
Salut
Pat66
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
```auto
.......
ou balise tout dépend de ce que tu veux faire lien ou texte liste etc...
```
en CSS pour le positionnement
```auto
.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 \\ 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.
