Discussion :

[ophelay_]

Bonjour,

je viens vers vous car j'ai d'énormes soucis. Je dois coder l'image ci-dessous mais je rencontre des problèmes de positionnement.

J'ai créé une classe ".conteneur" pour que le contenu du header, du footer et du contenu de la page soient alignés (comme vous pouvez le voir sur l'image, c'est aligné à gauche et à droite)

Malheureusement, pour les blocs du centre, je n'arrive pas à les positionner. J'ai tout essayé, mais soit ca me créé des marges sur les côtés et donc ce n'est plus aligné, soit les contenus ne sont plus cote à cote... Bref, je suis perdue.

Pouvez-vous m'aider? Merci

[mathieu]

montrez nous un lien vers la page que vous avez déjà faite pour qu'on puisse tester.

[ophelay_]

J'en ai fait deux car j'ai tenté des choses différentes

http://compte034.latetedansleweb.org...Miam/miam.html
http://compte034.latetedansleweb.org...am2/miam2.html


P.S. je sais que mon code contient de petites erreurs que je vais corriger à l'aide de W3C

[mathieu]

j'ai l'impression qu'il ne reste plus grand chose à faire
pour les 2 boites "bienvenue" et "horaires", je vous conseille d'utiliser la mise en page "flex" :
https://developer.mozilla.org/fr/doc...e_base_flexbox

[ophelay_]

1) merci beaucoup, mais j'ai l'impression que mon code est sale et qu'il y aurait une manière plus propre d'avoir fait tout ça

2) malheureusement, le prof qui va m'évaluer ne nous a pas enseigné le flexbox, donc je pense qu'il attend à ce que l'on code de manière "tradit" avec les float et tout le bazar

3) y'aurait-il une manière plus propre de faire apparaître la ligne de tirets comme sur l'image qu'avec des <hr> qui sont apparemment inappropriés ?

Merci encore!

[Invité]

Bonjour,

le principal problème ici, c'est que tu as séparé les blocs-image des blocs-texte auxquels ils sont associés.

En réalité, on a 3 "groupes" image/texte.

Le HTML devrait être :

Code html :

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
29
30
31
32
33
34
35
36
37
<main>
	<section>
		<div class="bloc_texte_image bloc_vert">
			<figure>
				<img src="images/page1_img1.jpg" alt="cuisine traditionnelle" width="370" height="300">
			</figure>
			<div>
				<img src="images/icon1.png" alt="icône cuisine traditionnelle">
				<h1>Cuisine<br>traditionnelle</h1>
				<p class="tirets"></p>
				<p><a href="#" class="discover">découvrir</a></p>
			</div>
		</div>
		<div class="bloc_texte_image bloc_bleu">
			<div>
				<img src="images/icon2.png" alt="icône menu enfant et végétarien">
				<h1>Menus enfant &amp;<br>végétarien</h1>
				<p class="tirets"></p>
				<p><a href="#" class="discover">découvrir</a></p>
			</div>
			<figure>
				<img src="images/page1_img2.jpg" alt="menu enfant et végétarien" width="370" height="300">
			</figure>
		</div>
		<div class="bloc_texte_image bloc_jaune">
			<figure>
				<img src="images/page1_img3.jpg" alt="happy hours et événements" width="370" height="300">
			</figure>
			<div>
				<img src="images/icon3.png" alt="icône happy hours et événements">
				<h1>Happy hours <br>&amp; événements</h1>
				<p class="tirets"></p>
				<p><a href="#" class="discover">découvrir</a></p>
			</div>
		</div>
	</section>
</main>

Et le CSS :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/* BLOCS CONTENU PRINCIPAL */
main > section {
  text-align: center;
  box-sizing:border-box;
}
.bloc_texte_image { 
  display: block; 
  float:left;
  vertical-align: top;
  width: 370px;
}
.bloc_texte_image > figure,
.bloc_texte_image > figure > img,
.bloc_texte_image > div { 
  display:block;
  text-align: center;
  width: 370px;
  height: 300px;
  margin: 0;
  padding:0;
}
.bloc_texte_image.bloc_bleu { 
  background-color: #86cdd7;
}
.bloc_texte_image.bloc_vert { 
  background-color: #aad4b3;
}
.bloc_texte_image.bloc_jaune { 
  background-color: #ffcf7f;
}
.bloc_texte_image h1,
.bloc_texte_image p,
.bloc_texte_image a
{ 
  text-align: center;
  color:#fff;
}
.bloc_texte_image p.tirets:before {
  display:inline-block;
  content:'----------------------';
}
/* bloc central */
main > section {
  width: 1150px;
  margin:0 auto;
}
.bloc_texte_image:nth-child(2) { 
  margin:0 20px; /* (1150px - (3*370px))/2 = 20px */
}

N.B. C'est UNE solution.
Ça ne veut pas dire que c'est la meilleure.