Discussion :

[flamant]

Bonjour,

j'essaye de construire mon footer de page avec 3 colonne
1) première colonne une image centrée horizontalement et verticalement
2) deuxième colonne un block de texte de 3 ligne avec pour chacune des lignes une icone. Les trois lignes doivent être avec un ajustement à gauche et l'ensemble des 3 lignes doivent être centrée dans la deuxième colonne verticalement et horizontalement
3) troisième colonne un titre et en dessous une ligne. L'ensemble de ces 2 lignes doivent être centrée dans la troisième colonne horizontalement et verticalement

De plus il faut que ça soit responsive de la manière suivante: quand on réduit la largeur, le block entier de texte de la troisième colonne doit venir en dessous du block de la deuxième colonne et quand on réduit encore le block entier de la deuxième et troisième colonne doit venir en dessous de l'image de la première colonne



J'ai fait beaucoup de tests en partant du decoupage en colonne

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
18
19
.container-footer {
    -webkit-column-width: 33%;
    -webkit-column-gap: 3.9%;
    -webkit-column-rule: 1px solid #eee;
    -webkit-column-count: 3;
    -moz-column-width: 33%;
    -moz-column-gap: 3.9%;
    -moz-column-rule: 1px solid #eee;
    -moz-column-count: 3;
    -ms-column-width: 33%;
    -ms-column-gap: 3.9%;
    -ms-column-rule: 1px solid #eee;
    -ms-column-count: 3;
    column-width: 33%;
    column-gap: 3.9%;
    column-rule: 1px solid #eee;
    column-count: 3;
 
}

pour le code html suivant

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
	<footer>
                <div class="container-footer">
                    <div class="center" style="padding: 20px 0px">
                        <img   src="{{ 'assets/images/logo/Cadre-Logo-Inger-250px-210px-72ppi-SurFondNoir.png' | absolute_url }}"  />
                    </div>
                    <div>
                        <div style="font-size: 15px;" >
                            <div style="display: inline-block;"  >
                                 <img  class="phone"  alt="{% t phoneicon %}" src="{{'assets/images/icons/Phone_number-16px-16px.png' | absolute_url }}"  style="vertical-align:middle"/> {% t callTheNumber %} {{site.telephone-number}}              
                            </div>
                            <div style="display: inline-block;" >
                                <img class="home"  alt="{% t homeicon %}" src="{{'assets/images/icons/Home-16px-16px.png' | absolute_url }}"  style="vertical-align:middle" /> {{site.adress}}
                            </div>
                            <div style="display: inline-block;" >
                                <img class="arobas"  alt="{% t arobasicon %}" src="{{'assets/images/icons/Email-16px-16px.png' | absolute_url }}"  style="vertical-align:middle" /> {% t sendmeAMail %} <a href="mailto:{{ site.email | encode_email }}" title="Contact me">{% t clickHere %}</a>
                            </div>                
                        </div>
                    </div>
                    <div style="font-size: 15px;" >
                        <h2 class="footerTitles">{% t schedule %}</h2>
                        {% t anyDayOfTheWeek %}
                    </div>
                </div>                
	</footer>

Merci d'avance pour votre aide

[JefReb]

Bonjour Flamant,
Ne serait-ce pas plus simple d'utiliser les flexbox?

par exemple:

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
footer		{
	border:1px solid red;
}
#contener		{
	display: -webkit-flex;
	display: flex;
	border:1px solid blue;
}
.item		{
	width: 30%;
	height:150px;
	margin:5px;
	-webkit-flex: 1 1 1%;
	flex: 1 1 1%;			
	border:1px solid green;
}

Code html :

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

1
2
3
4
5
6
7
<footer>
<div id="contener">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</footer>

[NoSmoking]

Bonjour,
je partage l'avis de JefReb concernant l'utilisation des « flex-box » en lieu et place des « column » qui ne se justifie pas ici à mon sens.

Néanmoins j'irais plus loin pour pouvoir respecter une de tes conditions, la 3^éme colonne passe sous la 2^éme, un élément en flex peut contenir un élément en flex donc je mettrais les colonnes 2 et 3 dans un conteneur qui serait en flex.

Cela pourrait donner une structure ressemblant à :

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
<footer>
  <div class="col-1">
  </div>
  <div class="col-2">
    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div>
      <h2></h2>
      <p></p>
    </div>
  </div>
</footer>

au passage ta colonne 2 n'est rien d'autre qu'une liste alors autant utiliser un élément <ul>.

L'approche du style serait, par exemple

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
18
footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.col-1 {
  flex: 1 0 33.33%;
  min-width: 320px;
}
.col-2 {
  display: flex;
  flex-wrap: wrap;
}
.col-2 > div {
  flex: 1 0 50%;
  min-width: 320px;
}

et il te resterait à gérer, via les « MediaQueries » les largeurs inférieures à 641px.

Code :

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

1
2
3
4
5
@media(max-width:640px) {
  footer {
    flex-direction: column;
  }
}

voilà pour cette mise en oeuvre.

[flamant]

Bonjour JefReb et NoSmoking et merci pour vos réponses, vous m'enlevez une épine du pieds, c'est entendu je vais utiliser les flex-box.

Néanmoins, comme je débute et que j'aimerais progresser (j'ai passé beaucoup de temps sur ce problème) j'aimerais avoir votre avis si c'est possible de faire la chose suivante :

Comme vous le voyez sur le print screen à la fin de ce post j'ai séparé ma largeur totale en 3 colonnes. La largeur de chaque colonne est donc en pourcentage (33%). La première colonne contient une image et détermine la hauteur totale du footer (car c'est le plus haut contenu parmi les 3 colonnes). La deuxième colonne contient 3 lignes de texte précédées chacune par une icône.

Est-il possible de centrer ces 3 lignes de texte (avec leurs images) verticalement et horizontalement dans cette deuxième colonne tout en ayant les 3 lignes (avec leurs images) justifiées à gauche (je veux dire par là les 3 lignes justifiées à gauche et l'ensemble des 3 lignes centrées horizontalement et verticalement dans cette deuxième colonne). J'aurais aimé faire la même chose avec le contenu de la troisième colonne.

voici le code html et css pour cette question

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
<footer>
                <div class="row">
                    <div class="center col-4" style="padding: 20px 0px">
                        <img   src="{{ 'assets/images/logo/Cadre-Logo-Inger-250px-210px-72ppi-SurFondNoir.png' | absolute_url }}"  />
                    </div>
                    <div class="center col-4" style="position:relative; ">
                        <div style="font-size: 15px; " >
                            <div style="display: inline-block;"  >
                                 <img  class="phone"  alt="{% t phoneicon %}" src="{{'assets/images/icons/Phone_number-16px-16px.png' | absolute_url }}"  style="vertical-align:middle"/> {% t callTheNumber %} {{site.telephone-number}}              
                            </div>
                            <div style="display: inline-block;" >
                                <img class="home"  alt="{% t homeicon %}" src="{{'assets/images/icons/Home-16px-16px.png' | absolute_url }}"  style="vertical-align:middle" /> {{site.adress}}
                            </div>
                            <div style="display: inline-block;" >
                                <img class="arobas"  alt="{% t arobasicon %}" src="{{'assets/images/icons/Email-16px-16px.png' | absolute_url }}"  style="vertical-align:middle" /> {% t sendmeAMail %} <a href="mailto:{{ site.email | encode_email }}" title="Contact me">{% t clickHere %}</a>
                            </div>
                        </div>
                    </div>
                    <div class="center col-4" style="font-size: 15px;" >
                        <h2 class="footerTitles">{% t schedule %}</h2>
                        {% t anyDayOfTheWeek %}
                    </div>
                </div>                
</footer>

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
18
19
20
21
22
23
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
 
[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}

Et voici enfin mon print screen

[JefReb]

Flamant,
j'ai fait un exemple à la louche pour montrer qu'il n'y a rien de bien compliqué.
Je ne sais pas avec quel manager de contenu tu travailles, mais le style inline (dans le code html) n'est pas très sioux à modifier par la suite pour la maintenance.
Pour les images de l'item central, il suffit d'utiliser vertical-align:middle;
Pour l'image de l'item1, j'ai pris une image utilisé par @NoSmocking
j'ai laissé la hauteur de l'item2 en auto pour que ce soit "un peu" responsive, mais ça il faut le revoir.

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<style type="text/css">
* {
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
}
html, body {
        height: 100%;
        font-size: 100%;
}
body {
        font-family: "Times New Roman", Times, serif;
        font-size: 100%;
        width: 100%;
}
footer {
        background-color:black;
        color:#fff;
        border: 1px solid red;
}
#contener {
        display: -webkit-flex;
        display: flex;
        justify-content:center;
        border: 1px solid blue;
}
.item1, .item2, .item3 {
        margin: 5px;
        -webkit-flex: 1 1 33%;
        flex: 1 1 33%;
        border: 1px solid red;
}
.item1 > img {
        display:block;
        margin-left:auto;
        margin-right:auto;
}
.item2 {
        height: auto;
        padding: 20px;
}
.item2 p {
        text-align: center;
}
.item3 {
        height: 150px;
        padding: 40px;
        text-align:center;
}
.item3 h1 {
        color:blue;
        font-weight:bold;
}
 
</style>
</head>
 
<body>
<footer>
  <div id="contener">
    <div class="item1">
      <img src="http://nosmoking.developpez.com/demos/images/_font_d_urle.jpg" alt="">
    </div>
    <div class="item2">
      <p>Appelez-moi au 1111111</p>
      <p>4 rue de la poissonerie, 56010 aix</p>
      <p><a href="mailto:www.yyy@orange.fr">Envoyez moi un mail</a></p>
    </div>
    <div class="item3">
      <h1>HORAIRES</h1>
      <p>Tous les jours de la semaine de 22h à 6h du matin</p>
    </div>
  </div>
</footer>
</body>
</html>

[JefReb]

Bon j'ai baclé un peu mon code en responsive.
Voila je pense qui est un peu mieux:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<style type="text/css">
* {
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
}
html, body {
        height: 100%;
        font-size: 100%;
}
body {
        font-family: "Times New Roman", Times, serif;
        font-size: 100%;
        width: 100%;
}
footer {
        background-color:black;
        color:#fff;
        border: 1px solid red;
}
.item1, .item2, .item3 {
        border: 1px solid red;
}
.item1 > img {
        display:block;
        margin-left:auto;
        margin-right:auto;
}
.item2 {
        padding: 20px;
}
.item2 p {
        text-align: center;
}
.item3 {
        padding: 40px;
        text-align:center;
}
.item3 h1 {
        color:blue;
        font-weight:bold;
}
@media screen and (max-width: 740px) {
}
@media screen and (min-width: 741px) {
#contener {
        display: -webkit-flex;
        display: flex;
        justify-content:center;
        border: 1px solid blue;
}
.item1, .item2, .item3 {
        margin: 5px;
        -webkit-flex: 1 1 33%;
        flex: 1 1 33%;
        border: 1px solid red;
}
.item1 > img {
        display:block;
        margin-left:auto;
        margin-right:auto;
}
.item2 {
        height: auto;
}
.item3 {
        height: 150px;
}
 
}
</style>
</head>
 
<body>
<footer>
  <div id="contener">
    <div class="item1">
      <img src="http://nosmoking.developpez.com/demos/images/_font_d_urle.jpg" alt="">
    </div>
    <div class="item2">
      <p>Appelez-moi au 1111111</p>
      <p>4 rue de la poissonnerie, 56010 aix</p>
      <p><a href="mailto:www.yyy@orange.fr">Envoyez moi un mail</a></p>
    </div>
    <div class="item3">
      <h1>HORAIRES</h1>
      <p>Tous les jours de la semaine de 22h à 6h du matin</p>
    </div>
  </div>
</footer>
</body>
</html>

[NoSmoking]

(je veux dire par là les 3 lignes justifiées à gauche et l'ensemble des 3 lignes centrées horizontalement et verticalement dans cette deuxième colonne)

En ajoutant un petit align-items: center au code fourni par JefReb, il y aura le centrage vertical.

Pour l'image de l'item1, j'ai pris une image utilisé par @NoSmocking

je me décide à te le dire NoSmoking il n'y a pas de C .

[JefReb]

@NoSmoKing Effectivement j'ai mis Justify-content, qui n'apporte pas grand chose.
Mais align-items serait ce que cherche flamant
voir:
https://codepen.io/JefReb/pen/gvrzxm

[flamant]

Bonjour JefReb et NoSmoking pour vos réponse

JefReb, pour ton exemple, dans la deuxième colonne (item2) je voulais justifier les 3 lignes à gauche, le tout centré dans la deuxième colonne, donc si je reprend ça devrait ressembler à ceci

Code HTML :

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

1
2
3
4
5
6
7
    <div class="item2">
      <div >
           <p>Appelez-moi au 1111111</p>
           <p>4 rue de la poissonerie, 56010 aix</p>
           <p><a href="mailto:www.yyy@orange.fr">Envoyez moi un mail</a></p>
      </div>
    </div>

Code :

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

1
2
3
.item2 div {
	padding: 5%;
}

et en suprimant

Code :

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

1
2
3
.item2 p {
	text-align: center;
}

mais l'ensemble des 3 lignes n'est pas centré dans la deuxième colonne. Merci pour ton aide

[JefReb]

Si tu rajoutes une div, alors dans ce cas tu n'as pas besoin de text-align:center
mais tu rajoutes:

Code css :

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

1
2
3
4
.item2 > div	{
	width:50%;
	margin:5% auto;
}

et je pense que cela fait ce que tu veux. à toi d'ajuster la largeur.
voir:
https://codepen.io/JefReb/pen/NyNmBY

[flamant]

Merci JefReb , je pense que cela sera résolu. Je testerai ça ce soir chez moi et te tiendrai au courant

[flamant]

Bonjour JefReb et NoSmoking,

j'ai fait un mix de vos solutions (où j'utiliserai les <ul> <li> plus tard, pour l'instant je fais un POC avec les <div>)

voici le code 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
<footer>
     <div class="row">
          <div class="center colonne-1" style="padding: 20px 0px">
               <img   src="{{ 'assets/images/logo/Cadre-Logo-Inger-250px-210px-72ppi-SurFondNoir.png' | absolute_url }}"  />
          </div>
          <div class="colonne-2" >
               <div class=""  style="font-size: 15px;" >
                    <div style="width: 90%; margin:5% auto">
                         <div style=""  >
                              <img  class="phone"  alt="{% t phoneicon %}" src="{{'assets/images/icons/Phone_number-16px-16px.png' | absolute_url }}"  style="vertical-align:middle"/> {% t callTheNumber %} {{site.telephone-number}}              
                         </div>
                         <div style="" >
                                <img class="home"  alt="{% t homeicon %}" src="{{'assets/images/icons/Home-16px-16px.png' | absolute_url }}"  style="vertical-align:middle" /> {{site.adress}}
                         </div>
                         <div style="" >
                                <img class="arobas"  alt="{% t arobasicon %}" src="{{'assets/images/icons/Email-16px-16px.png' | absolute_url }}"  style="vertical-align:middle" /> {% t sendmeAMail %} <a href="mailto:{{ site.email | encode_email }}" title="Contact me">{% t clickHere %}</a>
                         </div>
                    </div>
               </div>
 
               <div class="center" style="font-size: 15px;" >
                    <h2 class="footerTitles">{% t schedule %}</h2>
                            {% t anyDayOfTheWeek %}
                    </div>
               </div>
          </div> 
</footer>

le code 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
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
footer {
    background-color: $base-black-color;
    color: white;
}
 
 
 
footer .row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}
 
.colonne-1 {
  flex: 1 0 33.33%;
}
.colonne-2 {
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 66.66%;
 
}
 
 
.colonne-2 > div {
  flex: 1 0 50%;
}
 
@media only screen and (max-width:640px) {
  footer .row {
    flex-direction: column;
  }
}
 
@media only screen and (max-width:1034) {
  .colonne-1 {
    flex: 1 0 50% !important;
   }
  .colonne-2 {
    flex: 1 0 50% !important;
    flex-direction: column !important;
   }
}

Merci JefReb, pour centrer la div avec les 3 lignes dans la deuxième colonne, ça marche

Seulement voilà les média queries suivantes

Code :

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

1
2
3
4
5
6
7
8
9
@media only screen and (max-width:1034) {
  .colonne-1 {
    flex: 1 0 50% !important;
   }
  .colonne-2 {
    flex: 1 0 50% !important;
    flex-direction: column !important;
   }
}

ne sont pas appliquées quand je réduis la taille de mon navigateur. J'ai essayé sur firefox et chrome, et dans les 2 cas, les média queries ne sont pas appliquées. Merci d'avance

[JefReb]

Flamant, difficile de te répondre tellement il y a d'incohérences et peu de rigueur.
De plus tu utilises un système que je ne connais pas, mais bon ça n'empêche pas de voir quelques soucis.
Mais en résumer pour t'aider. Rigueur, rigueur:

1) Flex-direction est en row par défaut. Donc pas besoin de le spécifier.
2) inutile de le respécifier dans

Code css :

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

1
2
3
4
5
@media only screen and (max-width:640px) {
  footer .row {
    flex-direction: column;
  }
}

puisque tu l'as déjà défini AVANT au tout début.
3) pourquoi utiliser !important?
4) pourquoi rajouter une div de classe row dans footer ?? alors que tu peux mettre directement footer en display:flex
En simplifiant au maximum et en évitant de rajouter du code inutile, il est plus facile de voir les problèmes.
5) Je ne comprends pas trop le pourquoi du @media screen max-width:640px
6) tu as oublier px à @media only screen and (max-width:1034)
7) ne serait-ce pas min-width:1034px plutôt que max-width:1034px pour que cela s'exécute?
8) il faut éviter au maximum les définitions de style inline directement dans les balises
9) c'est quoi la classe center?
10) Pourquoi une classe vide comme class=""

etc.

[flamant]

Bonjour JefReb,
effectivement il y a peu de rigueur dans mon code. Je fais une multitude de test et je nettoie après quand j'ai obtenu ce que je veux. Désormais, quand je posterai une question ou même pour mes tests, je serai plus rigoureux. Merci d'avoir trouvé ce qui n'allait pas : il manquait px pour le max-width de la média query. Je ferais mes tests ce soir pour vérifier que c'était bien cela. Je te tiens au courant pour la suite. En tout cas merci

[flamant]

Bonjour JefReb,
voilà, c'est fini, je donne la solution pour ceux que ça pourra aider

code 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
<footer class="footer-media">               
     <div class="colonne-1">
          <img   src="{{ 'assets/images/logo/Cadre-Logo-Inger-250px-210px-72ppi-SurFondNoir.png' | absolute_url }}"  />
     </div>
     <div class="colonne-2" >
          <div>
               <div class="centerContactInfoDiv">
                    <div>
                         <img    alt="{% t phoneicon %}" src="{{'assets/images/icons/Phone_number-16px-16px.png' | absolute_url }}"  style="vertical-align:middle"/> {% t callTheNumber %} {{site.telephone-number}}              
                    </div>
                    <div>
                         <img   alt="{% t homeicon %}" src="{{'assets/images/icons/Home-16px-16px.png' | absolute_url }}"  style="vertical-align:middle" /> {{site.adress}}
                    </div>
                    <div>
                         <img   alt="{% t arobasicon %}" src="{{'assets/images/icons/Email-16px-16px.png' | absolute_url }}"  style="vertical-align:middle" /> {% t sendmeAMail %} <a href="mailto:{{ site.email | encode_email }}" title="Contact me">{% t clickHere %}</a>
                    </div>
               </div>
          </div>
 
          <div class="center">
               <h2 class="footerTitles">{% t schedule %}</h2>
                            {% t anyDayOfTheWeek %}
          </div>
     </div>
</footer>

code 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
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
55
56
footer {
    background-color: $base-black-color;
    color: white;
    display: flex;   
    align-items: center;
    justify-content: center;    
    width: 100%;   
    font-size: 15px;
}
 
.center {
    text-align: center;
}
 
.centerContactInfoDiv {
    width: 80%; 
    margin:5% auto;
}
 
.colonne-1 {
  flex: 1 0 33.33%;
  padding: 15px 0px;
  text-align: center;
}
.colonne-2 {
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 66.66%;
}
 
 
.colonne-2 > div {
  flex: 1 0 50%;
}
 
@media only screen and (max-width:640px) {
  .footer-media {
    flex-direction: column;
  }
}
 
@media only screen and (max-width:1034px) {
  .colonne-1 {
    flex: 1 0 50%;
    padding: 15px 0px;
    text-align: center;
   }
  .colonne-2 {
    flex: 1 0 50%;
    flex-direction: column;
   }
}
 
.footerTitles {
    color: $baseColor;
}

pour tes remarques suivantes

2) inutile de le respécifier dans

@media only screen and (max-width:640px) {
.footer-media {
flex-direction: column;
}
}

puisque tu l'as déjà défini AVANT au tout début.

et

5) Je ne comprends pas trop le pourquoi du @media screen max-width:640px

je veux que lorsque width < 640 px, tout soit mis dans une seule colonne. Merci encore pour tout

[JefReb]

Flamant, bien que tu as clos cette discussion, il est normal de la poursuivre.
Tu n'as pas du tout pris en compte les remarques ou les exemples que j'ai (ou nous) avons pu donner dans celle-ci et c'est un peu frustrant.

J'ai écrit qu'il fallait simplifier au MAXIMUM. Or tu rajoutes des <div> en veux-tu en voila, des classes etc. qui sont superflus complètement aujourd'hui en html5 et css3.
C'est en lisant les forum et en essayant d'assimiler les remarques de ceux qui y contribuent que j'ai pu apprendre.

En premier, le plus important en responsive est de coder en 'smartphone FIRST'. Oui je sais ça m'a été dur a comprendre.

Ainsi ton code ne peux pas fonctionner.

je veux que lorsque width < 640 px, tout soit mis dans une seule colonne. Merci encore pour tout

Ben justement, en codant:

Code css :

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

@media only screen and (max-width:1034px) {

ça ne marche pas.
Il faut coder:

Code css :

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

@media only screen and (min-width:641px) {

Ainsi en simplifiant ton code html et en supprimant toutes les classes inutiles, voila ce que ça donne:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<footer>
  <div class="colonne-1"><img src="http://nosmoking.developpez.com/demos/images/_font_d_urle.jpg" alt=""></div>
  <div class="colonne-2">
      <p><img src="/img/tel.gif" alt="">Appelez-moi au 1111111</p>
      <p><img src="/img/address.gif" alt="">4 rue de la poissonerie, 56010 aix</p>
      <p><img src="/img/mail.gif" alt=""><a href="mailto:www.yyy@orange.fr">Envoyez moi un mail</a></p>
  </div>
  <div class="center">
    <h2>horaires</h2>
    <p>Tous les jours de la semaine de 22h à 6h du matin</p>
  </div>
</footer>

C'est plus simple. pas de div et de classes inutiles.
Pas de style interne dans les balises du code html.

Mais en premier on code uniquement pour les écrans < 640px., en pensant d'abord smartphone,
et ensuite il ne reste plus qu'a définir pour les écrans > 641px comme tu le désires.

voici 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
50
51
52
53
54
55
56
57
58
59
60
61
* {
	margin: 0;								/* Mettons TOUTES les marges extérieures à zéro 				*/
	padding: 0;								/* Mettons TOUS les espaces intérieures à zéro  				*/
	box-sizing: border-box;					/* largeur des boites= width+padding+border     				*/
}
html, body {
	height: 100%;
	font-size: 100%;
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
footer {
	background-color: black;
	color: white;
	width: 100%;
	font-size: 15px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.colonne-1, .colonne-2, center {
	border: 1px solid red;
}
.colonne-1 > img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle;
}
.colonne-2 {
	padding: 20px;
}
.center {
	padding: 40px;
	text-align: center;
}
.center h2 {
	color: blue;
	font-weight: bold;
	text-transform: uppercase;
}
 @media only screen and (min-width:641px) {
footer {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border: 1px solid blue;
}
.colonne-1, .colonne-2, .center {
	-webkit-flex: 1 0 33.33%;
	flex: 1 0 33.33%;
	border: 1px solid red;
}
.colonne-2 p {
	width:35%;
	margin:0 auto;
}
}

et le résultat: https://codepen.io/JefReb/pen/jZyOrd

Ce que j'écris c'est en essayant de suivre les remarques et les suggestions des participants plus avancés que moi.
Donc voila ma contribution, mais je persiste à dire que ton code ne marche pas.

[flamant]

Bonjour JefReb,

c'est entendu, je fais mobile first.
Cependant, d'après ce que j'avais dit au départ, mon requirement était le suivant : en partant d'une grande largeur, j'ai 3 colonnes avec une image dans la première colonne, les informations de contact dans la deuxième colonne et les horaires dans la troisième colonne. Quand je réduit la largeur du viewPort et que j'arrive à 1034 px, mon viewport est divisé en 2 colonnes. La première colonne contient toujours l'image. La deuxième colonnes contient ce qui était dans la deuxième colonne ET ce qui était dans la troisième colonne. Quand je réduis encore jusqu'à 640px, le tout est dans une seule et unique colonne. Du coup le code html diffère de celui que tu m'a donné dans la dernière réponse

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
<footer>               
     <div class="colonne-1">
          <img   src="{{ 'assets/images/logo/Cadre-Logo-Inger-250px-210px-72ppi-SurFondNoir.png' | absolute_url }}"  />
     </div>
     <div class="colonne-2" >
          <div class="centerContactInfoDiv">
               <p><img    alt="{% t phoneicon %}" src="{{'assets/images/icons/Phone_number-16px-16px.png' | absolute_url }}"  style="vertical-align:middle"/> {% t callTheNumber %} {{site.telephone-number}}</p>
               <p><img   alt="{% t homeicon %}" src="{{'assets/images/icons/Home-16px-16px.png' | absolute_url }}"  style="vertical-align:middle" /> {{site.adress}}</p>
               <p><img   alt="{% t arobasicon %}" src="{{'assets/images/icons/Email-16px-16px.png' | absolute_url }}"  style="vertical-align:middle" /> {% t sendmeAMail %} <a href="mailto:{{ site.email | encode_email }}" title="Contact me">{% t clickHere %}</a></p>
          </div>
 
          <div class="center">
               <h2>{% t schedule %}</h2>
               {% t anyDayOfTheWeek %}
          </div>
     </div>
</footer>

dans ce nouveau code html, outre le fait que la séparation des colonne est construite de manière différente, j'ai rajouté une classe centerContactInfoDiv qui sert à centrer les 3 balises p qui seront justifiées à gauche, mais je reviendrai sur ce point plus tard.

Le code css devient

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
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
footer {
    background-color: $base-black-color;
    color: white;
    width: 100%;
    display: -webkit-flex; 
    display: flex;   
    -webkit-flex-direction: column;
    flex-direction: column;
    font-size: 15px;
}
 
 
.colonne-1 > img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle;
    padding: 15px 0px;
}
 
.colonne-2 {
    display: -webkit-flex; 
    display: flex;   
    -webkit-flex-direction: column;
    flex-direction: column;
}
 
.colonne-2 p {
    margin: 0px;
}
 
.centerContactInfoDiv {
    width: 50%; 
    margin:15px auto;
}
 
.center {
	padding: 40px;
	text-align: center;
}
 
.center h2 {
    color: $baseColor;
}
 
 
@media only screen and (min-width:641px) {
    footer {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border: 1px solid blue;
    }
    .colonne-1 {
        -webkit-flex: 1 0 50%;
        flex: 1 0 50%;
    }  
 
}
 
@media only screen and (min-width:1034px) {
 
    .colonne-1 {
        -webkit-flex: 1 0 33.33%;
        flex: 1 0 33.33%;
    }
 
    .colonne-2 {
        -webkit-flex-direction: row;
        flex-direction: row;
    }
 
    .colonne-2 > div {
        flex: 1 0 50%;
    }
}

je commente les ajouts:

Code :

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

1
2
3
4
5
6
.colonne-2 {
    display: -webkit-flex; 
    display: flex;   
    -webkit-flex-direction: column;
    flex-direction: column;
}

là je définit la classe colonne-2 avec un display flex car elle contient ma deuxième colonne visuelle et ma troisième.

Code :

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

1
2
3
.colonne-2 p {
    margin: 0px;
}

je suis sous firefox et mes balises p ont un margin par défaut (il faut que j'essaye aussi avec les autres navigateurs). J'annule donc ce margin par défaut

Code :

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

1
2
3
4
.centerContactInfoDiv {
    width: 50%; 
    margin:15px auto;
}

Je centre le contenu de la deuxième colonne avec les 3 balises p justifiées à gauche

Code :

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

1
2
3
4
5
6
7
@media only screen and (min-width:641px) {
    .colonne-1 {
        -webkit-flex: 1 0 50%;
        flex: 1 0 50%;
    }  
 
}

Quand je suis au dessus de 641px ma première colonne occupe 50% de la largeur de mon viewport et donc par défaut la deuxième colonne occupe aussi 50%

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
@media only screen and (min-width:1034px) {
 
    .colonne-1 {
        -webkit-flex: 1 0 33.33%;
        flex: 1 0 33.33%;
    }
 
    .colonne-2 {
        -webkit-flex-direction: row;
        flex-direction: row;
    }
 
    .colonne-2 > div {
        flex: 1 0 50%;
    }
}

quand je suis au dessus de 1034px, la colonne 1 occupe 33.33% de la largeur de mon viewport (et donc par défaut la deuxième colonne occupe 66.66% de la largeur de mon viewport)
La colonne 2 a un display flex et est séparée en 2 div qui occupent 50% de cette dernière largeur. La direction est row

Je voulais revenir sur un point par rapport à ce que tu m'a répondu :

Lorsque je définissais auparavant conjointement

@media only screen and (max-width:1034px) {
et
@media only screen and (max-width:641px) {

je pense que c'est possible de le faire à condition de le mettre dans cet ordre. On peut garder les 2 média queries

D'autre part, sur ton conseil, j'ai créé la classe centerContactInfoDiv (que tu avais défini avec le sélecteur .item2 > div)

Code :

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

1
2
3
4
.centerContactInfoDiv {
    width: 50%; 
    margin:15px auto;
}

Cette solution comporte une lacune : la largeur de 50% tronque les lignes et il y a un retour à la ligne trop intempestif pour certaine. Si on utilise 80 ou 90%, ça ne va pas, c'est pas bien centré. L'idéal serait qu'il y ait un centrage par rapport à la plus grande longueur des 3 lignes. Est-ce à dire qu'il faut que je définisse une <div> avec la plus grande longueur de ligne en dur (width: **px)et ensuite que je centre cette <div> ?

Merci pour ton retour

PS: Ce que j'avais fait précédemment marchait très bien sur mon navigateur, mystère.......