Explications sur display flex

**deuwi** · 05/10/2018, 12h13

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 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
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 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
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.

Invité · 05/10/2018, 13h22

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

**deuwi** · 05/10/2018, 13h39

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.

Invité · 05/10/2018, 14h45

Ton code se résume à :

Code css :

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

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

**deuwi** · 05/10/2018, 15h14

Merci beaucoup pour la solution.
Merci beaucoup tes liens.

Explications sur display flex

Positionnement en CSS avec flexbox

Vue hybride

Discussions similaires

Partager

Partager