Discussion :

[CCACC02]

Bonjour,
il y a un truc qui m'échappe

Je souhaite faire tenir mon menu sur trois colonnes dans un flex-item de façon harmonieuse, mais comme je n'arrive pas à donner une largeur aux <a></a> ou au <li></li>, mon padding décale tout et ce n'est pas harmonieux.

Soit le 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
25
26
<footer>
			<div class="flex-container">
				<nav class="footer-flex-item1">
					<ul>
						<li class="item"><a href="">CLUB 108</a></li>
						<li><a href="">Parking et accès</a></li>
						<li><a href="">Tarifs et horaires</a></li>
						<li><a href="">Carte club</a></li>
						<li><a href="">A proximité</a></li>
						<li><a href="">Jobs étudiant</a></li>
						<li><a href="">Séances privées</a></li>
						<li><a href="">Espace partenaire</a></li>
						<li><a href="">Parking et accès</a></li>
						<li><a href="">Tarifs et horaires</a></li>
						<li><a href="">Carte club</a></li>
						<li><a href="">A proximité</a></li>
						<li><a href="">Jobs étudiant</a></li>
						<li><a href="">Séances privées</a></li>
						<li><a href="">Espace partenaire</a></li>
					</ul>
				</nav>
				<div class="footer-flex-item2">
					<img src="images/logo.png">
				</div>
			</div>
		</footer>

et le 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
.flex-container{
  display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}
footer img{
	width: 100%;
}
footer ul{
	/*width: 90%;*/
}
footer li{
	display: inline;
	width: 300px;
	padding-right: 20%;
 
}
.item{
	min-width: 300px;
}
footer li > a{
	min-width: 300px;
}
.footer-flex-item1{
	width: 55%;
}
.footer-flex-item2{
	width: 20%;
}

Pouvez-vous me dire ce que j'ai mal fait ou me donner une piste pour mon erreur?

Merci

[Desomania]

Bonjour,

Voici la solution a ton probleme :

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
 
 
.flex-container{
  display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}
footer img{
	width: 100%;
}
footer ul{
	/*width: 90%;*/
}
footer li{
	display: inline;
	width: 200px;
	padding-right: 20%;
	/*background-color: red;*/
 
}
 
.item{
	min-width: 300px;
}
footer li > a{
	min-width: 120px;
	vertical-align:middle;
	display: table-cell;
	/*background-color: yellow;*/
}
.footer-flex-item1{
	width: 55%;
}
.footer-flex-item2{
	width: 20%;
}

J'ai modifié a ton css pour le footer li

Code :

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

1
2
 
width: 200px;

et pour ton footer li a

Code :

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

1
2
3
min-width: 120px;
vertical-align:middle;
display: table-cell;

Bonne journée

[Invité]

Bonjour,

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
.flex-container {
  display: flex;
  flex-wrap: no-wrap;
  justify-content: space-between;
}
.footer-flex-item1 {
  flex:1 1 80%;
  width: 80%;
}
.footer-flex-item2 {
  flex:1 1 20%;
  width: 20%;
}
footer img{
  max-width: 100%;
}
 
.footer-flex-item1 ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.footer-flex-item1 li {
  box-sizing:border-box; /* important */
  flex:1 1 33.33%;
  list-style:none inside none; 
}
.footer-flex-item1 li a {
  display:block;
  padding:5px;
  margin-right:5px;
  text-decoration:none; 
}
.footer-flex-item1 li:hover a {
  background:yellow; 
}

@desomania
Dans ta signature :

"Tu bloques sur ton code......."

[NoSmoking]

Bonjour,

mais comme je n'arrive pas à donner une largeur aux <a></a> ou au <li></li>
(...)

Code :

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

1
2
3
4
5
footer li{
    display: inline;
    width: 300px;
    padding-right: 20%;
}

Important : La propriété width ne s'applique pas aux éléments « non remplacés » et de type inline.
↪ 10.2 Content width: the 'width' property.

Il suffit donc de passer les éléments en inline-block :

Code :

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

1
2
3
4
5
6
footer li {
    display: inline;    /* à remplacer */
    display: inline-block;
    width: 300px;
    /*padding-right: 20%; /* ne sert plus */
}