Explications sur display flex

Version imprimable

Bonjour,
je cherche a modifier un vieux projet en table par des div et container flex.

J'ai fait le tour des tutos du sites et d’ailleurs, j'ai pataugé un bon moment, et suis arrivé à créer le bandeau de tête de ma page.
Du moins... en local. Parce qu'une fois les fichier sur le serveur, c'est une horreur.

je vous donne le code des deux fichiers, si quelqu'un pouvais m'expliquer mes erreurs, j'en serais très heureux.

le fichier css:

Code:

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
50
51
52
53
54
html{
  height: 100%;
  width: 100%;
}
body{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
 
.entete{
  display: flex;
  align-items: center;
  background-color: black;
  width: 100%;
  max-height: 20%;
  margin: 0;
  padding: 0;
}
.entete #coin_droit_sup{
  align-items: flex-start;
  background-color: black;
  max-height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
 
.entete #barre_centrale_sup{
  background-color: black;
  max-height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
 
.entete #coin_gauche_sup{
  align-items: flex-end;
  background-color: black;
  max-height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
#logo{
  max-width: 100%;
  max-height: 100%;
}
 
#logo_centrale{
  max-width: 100%;
  max-height: 100%;
}

le fichier html

Code:

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
<!DOCTYPE HTML>
<html>
  <head>
    <title> ST_Services</title>
    <link href="./Style2.css" type="text/css" rel="stylesheet"/>
  </head>
 
  <body>
      <div class="entete">
        <div id="coin_droit_sup" >
          <img id="logo" src="images/logo1.jpg" ></img>
        </div>
        <div id="barre_centrale_sup">
          <img id="logo_centrale" src="images/logo2_3.jpg"  ></img>
        </div>
        <div id="coin_gauche_sup">
          <img id="logo" src="images/logo1.jpg"  ></img>
        </div>
      </div>
      <div class="main">
        <div id="menu">
          4
        </div>
        <div id="corps">
          5
        </div>
      </div>
      <div class="footer">
        <div id="coin_droit_inf">
          6
        </div>
        <div id="barre_centrale_inf">
          7
        </div>
        <div id="coin_gauche_inf">
          8
        </div>
      </div>
  </body>
 
</html>

merci de votre attention.

05/10/2018, 12h22
Invité
Bonjour,

1- La 1ère chose à faire, c'est avant tout de t'intéresser à HTML5 .
Il existe des balises spécifiques et sémantiques : <main>, <header>, <section>,...

Une structure HTML5 saine et conforme assurera un bel avenir à ton code.
- HTML5 : le guide du débutant
2- avant display:flex, tu peux t'intéresser à :
- display:table / display:table-row / display:table-cell, qui sont aussi bien pratiques et simples à utiliser.
3- ensuite, tu fais une utilisation "étrange" des classes et id CSS.
Je t'invite à réviser leur sens et utilisation.
- Un unique élément concerné : id
- Plusieurs éléments concernés : class
4- enfin, pour répondre(quand même) à ta question : align-items se met sur le parent.
Ici, ce sera plutôt justify-content:space-between.
- A Complete Guide to Flexbox
05/10/2018, 12h39
deuwi

merci de ta réponse.

Oui les class et id me sont pas inconnus. Je vous ai donner le code qui me rester sur les bras, je suis passé par pleins d'etape avant de venir ici.

Je vais faire table rase çà sera plus simple pour redémarrer sur une nouvelle page.

si vous voulez voir le probleme en ligne il est ici: http://carfourdesanim.free.fr/ST-Services/index4.html

merci.

Ton code se résume à :

Code:

1
2
3
4
5
6
7
8
.entete{
  display: flex;
  justify-content:space-between;
  background-color: black;
  max-height: 20%;
}
.entete > div { text-align:center; }
.entete > div img { max-width:100%; max-height:100px; }

ET C'EST TOUT

05/10/2018, 14h14
deuwi

Merci beaucoup pour la solution.
Merci beaucoup tes liens.