Discussion :

[Obi Juan Kenobi]

Bonjour à vous amis développeurs,

J'ai un problème insoluble pour moi en CSS3, vous pourrez certainement m'aider.

Voici un pied de page 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
<footer id="piedPrincipal">
	<nav id="menuPiedDePage">
		<ul>
			<li><a href="index.html" target="_blank"><img class="iconRs" src="inc/img/logoPetit.gif"></a></li>
			<li><a href="mentions.html" target="_blank">Mentions légales</a></li>
			<li>|</li>
			<li><a href="conditions.html" target="_blank">Conditions générales de vente</a></li>
			<li>|</li>
			<li><a href="contact.html" target="_blank">Contact</a></li>
			<li>
				<ul>
					<li><a href="#"><img class="iconRs" src="inc/img/iconeFaceBook.png"></a></li>
					<li><a href="#"><img class="iconRs" src="inc/img/iconeTwitter.png"></a></li>
					<li><a href="#"><img class="iconRs" src="inc/img/iconeGoogle.png"></a></li>
				</ul>
			</li>
		</ul>
	</nav>
</footer>

Voici la CSS associée à ce pied de page :

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
#piedPrincipal {
	background:maroon;
	color:white;
	font-size:0.8em;
	font-family: 'aleolightitalic';
}
 
#piedPrincipal li {
	display:inline;
}
 
#piedPrincipal li ul {
	display:inline;
}
 
#piedPrincipal a {
	color:white;
	text-decoration:none;
	font-size:0.8em;
	text-transform:uppercase;
	letter-spacing:1px;
	font-family: 'aleolight';
	margin:0 8px;
}
 
#piedPrincipal a:hover {
	text-decoration:underline;
}
 
#menuPiedDePage {
	width:80%;
	text-align:center;
	margin:auto;
	padding:10px 0;
}

Le résultat final est le suivant :



Mon souci est celui-ci : je n'arrive pas à centrer horizontalement la ligne des mentions, des conditions et du contact. J'ai essayé avec la propriété CSS3 "vertical-align:middle;" mais rien ne bouge. Peut être qu'il me manque quelque chose ou bien c'est une autre propriété à utiliser.

Merci pour votre aide.

[NoSmoking]

Bonjour,
as tu essayé « l'incontournable », ou presque, vertical-align: middle sur es images de ton <footer>?

[Obi Juan Kenobi]

Salut,

J'ai essayé la propriété

Code :

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

vertical-align: middle;

sur les images et il ne se passe rien.
Je vais essayer autre chose et je reviendrai plus tard.

[NoSmoking]

J'ai essayé la propriété vertical-align: middle; ...

comment l'as tu intégré dans ton style, comme ceci ?

Code :

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

1
2
3
footer img {
  vertical-align: middle;
}

Je vais essayer autre chose et je reviendrai plus tard.

pourquoi pas , il en existe d'autre comme par exemple

Code :

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

1
2
3
4
footer ul {
  display: flex;
  align-items: center;
}

[Obi Juan Kenobi]

Merci NoSmoking, j'ai essayé ton code et ça marche !
Mais maintenant, j'ai un autre souci : je n'arrive pas à centrer sur toute la largeur de la fenêtre du navigateur. J'ai essayé la propriété "text-align:center;" dans le footer et il reste calé à gauche.
Quand la fenêtre du navigateur occupe toute la largeur de l'écran, le contenu du footer s'étale en largeur comme le montre la capture écran ci dessous.



Si tu as la solution, je suis preneur.
Merci pour ton aide.

[NoSmoking]

j'ai essayé ton code et ça marche !

quelle est la mèthode que tu as finalement retenue ?

Mais maintenant, j'ai un autre souci

Certes mais

	Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue.

donc merci de passer cette discussion en résolue et d'ouvrir une nouvelle discussion en nous précisant le code utilisé