Discussion :

[Tony BOUHITEM]

Bonjour,

Voici le résultat que j'essaye de mettre en forme dans le cadre d'un exercice :



Et voici ce à quoi j'arrive avec mes maigres connaissances en CSS :



J'ai essayé de mettre l'ensemble entre <span> et d'appliquer le style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
span {
  border-width:1px;
  border-style:dotted;
  border-color:black;
  }

Il y a bien des bordures, mais elles ne sont clairement pas au bon endroit.

Auriez-vous des pistes ? Merci d'avance.

[jreaux62]

Bonjour,

1- <span> est une balise de type "inline".
Il faut ici une balise de type "block", comme <div>.

Dans les 2 cas, on peut modifier le type avec :
display:inline-block;.

2- pour le centrage (textes, image) :
text-align:tenter;

[ProgElecT]

Salut

Petite faute de frappe
text-align:tenter;.
text-align:center;

[jessyPop]

Bonjour ^^

Cela pourrait être intéressant d'avoir également le bout de code HTML associé, tout ne se joue pas forcément en CSS

[Tony BOUHITEM]

Voilà donc où j'en suis :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<figure><figcaption><br><br>Les fraises des bois sont souvent de petite taille.<br><br>
Source : <a href="https://commons.wikimedia.org/wiki/File:Fraise_des_boisFL16.jpg">Wikimédia</a>, licence CC BY-SA</figcaption><br><br>
<img src="img/fraises_fruits.jpg"><br><br></figure>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
figure {
  border-width:1px;
  border-style:solid;
  border-color:black;
  text-align:center;
  background-color: #ffffff;
  }

[jessyPop]

Ne sachant pas trop où tu en es dans l'apprentissage et ce que tu es censé mettre en pratique dans cet exercice, je vais t'aiguiller avec les bonnes pratiques et je te laisse tester (parce que la pratique y'a que ça de vrai)

Le html c'est un ensemble de boites dans des boites entourées de boites, le css va permettre de jouer sur la ou les boîtes que l'on veut. Une boite est une balise. Donc si on décortique ce que tu dois reproduire :

• 1 balise contient un texte
• 1 balise contient un autre texte type légende et se trouve sous la première balise
• 1 balise contient une image et se trouve sous la balise précédente
• 1 balise contient les 3 autres balises et possède une bordure.

A toi de voir quel type de balise tu vas devoir utiliser pour chaque élément. Comme l'a dit très justement jreaux62 les span sont de type inline, donc ont un comportement particulier quand tu leur ajoutes un padding ou une border par exemple. A toi de voir comment se comporte la balise figure. Soit tu utilises la bonne balise, soit tu modifies le comportement de la balise choisi pour avoir ce que tu veux en suivant les conseils de jreaux62. Attention, je ne dis pas que la balise figure n'est pas un bon choix ! N'hésites pas à aller voir la documentation officielle pour les balises et en connaitre les règles et les usages.

Ensuite, je vois que pour faire des espaces en haut et en bas de tes éléments tu utilises des balises br. Il est préférable de jouer avec les padding et les margin pour avoir un comportement plus facilement compatible sur tous les supports (responsive).

En espérant t'avoir éclairé suffisamment sans t'empêcher d'apprendre par toi même