Discussion :

[RimaG]

Hi,

Can someone help me doing this part of maquette with html/css:


I do write this code but it doesn't work correctly
html:

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
<hr>
				<div>
					<div class="left-part"><h6>Le projet est <span class="important-numbers">26 </span></h6></div><div><h6 class="grey-text">jours en retard</h6></div>
				</div>
				<div class="right-part">
					<div class="left-part">
						<div><h6>Fin prévue</h6></div>
						<div><p class="grey-text">17/02/2018</p></div>
					</div>
					<div class="left-part"><span class="important-numbers">5 </span></div><div><h6 class="grey-text">jours en avance</h6></div>
				<hr>

Css:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
	.important-numbers{
		font-weight: bolder;
		font-size: 20px;
	}
 
	.grey-text{
		color: #C9C7C7;
		font-weight: normal;
	}
	.left-part{
		float: left;
		margin-right: 20px;
	}
	.right-part{
		float: right;
	}

Many thanks

[Invité]

Bonjour,

1- tu es sur un forum francophone.
Merci de t'exprimer en français.

2- explique ce qui ne fonctionne pas "correctement".

3- essaie les flexbox (display:flex)

4- display:table devrait aussi faire l'affaire.

[RimaG]

Bonjour

Je travaille sur une maquette en html/CSS et je veut arriver à ce résultat


CE que j'ai écrit jusqu'à mainetenant ne me donne pas le resultat souhaité, voci mon code
html:

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
<hr>
				<div>
					<div class="left-part"><h6>Le projet est <span class="important-numbers">26 </span></h6></div><div><h6 class="grey-text">jours en retard</h6></div>
				</div>
				<div class="right-part">
					<div class="left-part">
						<div><h6>Fin prévue</h6></div>
						<div><p class="grey-text">17/02/2018</p></div>
					</div>
					<div class="left-part"><span class="important-numbers">5 </span></div><div><h6 class="grey-text">jours en avance</h6></div>
				<hr>

CSS:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
.important-numbers{
		font-weight: bolder;
		font-size: 20px;
	}
 
	.grey-text{
		color: #C9C7C7;
		font-weight: normal;
	}
	.left-part{
		float: left;
		margin-right: 20px;
	}
	.right-part{
		float: right;
	}

[psychadelic]

comme-ça, ça va être compliqué, parce que visiblement tu as de mauvaises bases sur la compréhension du css..

tu devrai tout revoir en utilisant le modèle des flexbox, surtout si tu débute car il est bien plus simple à mettre en œuvre.

[Invité]

Une solution : https://codepen.io/jreaux62/pen/bGdWpdQ

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="projet-fin-parts">
    <h6>
      <span>Le projet a </span>
      <span>26 </span>
      <span>jours en retard</span>
    </h6>
    <h6>
      <span>Fin prévue<br /><span>17/02/2018</span></span>
      <span>5 </span>
      <span>jours en avance</span>
    </h6>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.projet-fin-parts {
  display:flex;
}
.projet-fin-parts > h6 {
  flex:1 1 50%;
  display:flex;
  justify-content:center;
  font-size: 20px;
  font-family:Arial,sans-serif;
}
.projet-fin-parts > h6 span {
  display:inline-block;
  vertical-align:top;
}
.projet-fin-parts > h6 > span:first-child {
  text-align:right;
}
.projet-fin-parts > h6 > span:last-child,
.projet-fin-parts > h6 > span:first-child span {
  color: #C9C7C7;
	font-weight: normal;
  font-size: 80%; /* 80% de 20px */
}
.projet-fin-parts > h6 > span:nth-child(2) {
  font-weight: bold;
  font-size: 220%; /* 220% de 20px */
  padding:0 3px;
}