[Résolu] Afficher un lien tout en bas à droite

Bonjour,
Encore en train de coder ce site pour "m'amuser" et apprendre, je me pose désormais une nouvelle question. Comme d'habitude _laurent va voler à mon secours j'en suis sûr x). L'objectif me semblait simple et bien codé mais ça ne fonctionne pas alors j'appelle "oskour" après relecture. C'est le suivant : positionner les mentions légales et plan du site tout en bas à droite comme sur le site duquel je m'inspire en guise d'entrainement.

Voilà mon code HTML suivi du CSS :

<div class="rubriques">
				<h6>Contactez-nous :</h6>
					<a href="#"><!--Ici je crée le lien qui renvoie à la boite mail-->
						<i class="fa-solid fa-at fa-2x"></i>
						<p>#</p>
					</a><!--Ici je ferme la balise du lien vers E-Mail-->
					<a href="#"><!--Ici je crée le lien vers le formulaire de contact-->
						<i class="fa-solid fa-envelope-open-text fa-2x"></i>
						<p>Formulaire de contact</p>
					</a><!--Ici je ferme la balise du lien vers le formulaire de contact-->
					<div id=mentionslégalesetplandusite>
						<a href="#">Mentions légales</a>
						<a href="#">Plan du site</a>
					</div>
			</div>

#pieddepage{
	display: flex;
	background-color: rgb(0, 0, 0);
	padding-bottom: 40px;
}
.rubriques{
	padding: 10px;
	flex: 1;
  display: flex;
  flex-wrap: wrap;
}
h6{
	font-size: 15px;
	color: white;
	padding: 2px;
	text-align: center;
  width: 100%;
}
.rubriques a{	
	text-align: center;
  flex: 1;
}	
#mentionslégalesetplandusite{
	position: absolute;
	right:10px;
	bottom:0px;
	font-size:10px;
}

Bonsoaaaaar,


Bon j'avoue je suis dans le coin en ce moment désolé. Par contre on va augmenter la difficulté je donnerai juste des pistes pas la solution directement

Pourquoi absolute ? J'ai pour habitude de dire aux dev avec qui je travaille et qui n'aiment pas le CSS que faire du code pour faire du code ça sert a rien. Si tu ne mets aucun code CSS quel est el comportement naturel de ta balise ? Il ne faut alors ajouter que ce dont tu as besoin. ici la position absolute me semble totalement inutile... non ?

J'aime beaucoup cette façon de faire
C'est vraiment sympa de ta part,
J'ai donc enlevé le Absolute.
Ca a en effet repositionné mon texte tout en bas, mais pas tout à droite.
Je vais me creuser les méninges du coup x).
J'ai pensé à deux trucs : soit ma classe n'est pas bien définie (mais je vois pas bien pourquoi ça ferait ça)
soit j'ai oublié d'ajouter une décla dans mon CSS mais alors... laquelle !?

Réfléchissons ! Je reviens plus tard pour découvrir (ou pas) des éléments de réponse
Merci encore Laurent !

Re,
J'ai pas lu encore votre message et votre solution mais je pense en avoir trouvé une qui marche bien.
C'est surement pas très opti, il existe surement mieux, mais ça marche.
J'aurai aimé ne pas passer par là mais j'y ai carrément sorti du pied de page et ça marche comme je le souhaite x)

Voilà mon code:

<section id="pieddepage"> <!--Ici j'ouvre ma section pied de page dans laquelle on retrouve toutes les infos importantes mais pas à première vue capitale.-->
			<div class="rubriques">
				<h6>Retrouvez-nous sur :</h6>
					<a href="https://www.instagram.com/locacheteur"> <!--Ici je crée le lien vers Instagram par icône-->
						<i class="fa-brands fa-instagram fa-2x"></i>
						<p>Instagram</p>
					</a>	<!--Ici je ferme la balise du lien vers Instagram par icône-->
					<a href="#">	<!--Ici je crée le lien vers Linkedin par icône-->
						<i class="fa-brands fa-linkedin fa-2x"></i>
						<p>LinkedIn</p>
					</a>	<!--Ici je ferme la balise du lien vers Linkedin par icône-->
					<a href="#">	<!--Ici je crée le lien vers Youtube par icône-->	
						<i class="fa-brands fa-youtube fa-2x"></i>
						<p>Youtube</p>
					</a>	<!--Ici je ferme la balise du lien vers Youtube par icône-->
			</div>
			<div class="rubriques">
				<h6>Contactez-nous :</h6>
					<a href="#?subject=Demande de Contact"><!--Ici je crée le lien qui renvoie à la boite mail-->
						<i class="fa-solid fa-at fa-2x"></i>
						<p>#</p>
					</a><!--Ici je ferme la balise du lien vers E-Mail-->
					<a href="#"><!--Ici je crée le lien vers le formulaire de contact-->
						<i class="fa-solid fa-envelope-open-text fa-2x"></i>
						<p>Formulaire de contact</p>
					</a><!--Ici je ferme la balise du lien vers le formulaire de contact-->
					
			</div>
		</section>	
			<div id=mentionslégalesetplandusite>
						<a href="#">Mentions légales</a>
						<a href="#">Plan du site</a>
			</div>

	</body>

#pieddepage{
	display: flex;
	background-color: rgb(0, 0, 0);
	padding-bottom: 20px;
}
.rubriques{
	padding: 10px;
	flex: 1;
  display: flex;
  flex-wrap: wrap;
}
h6{
	font-size: 15px;
	color: white;
	padding: 2px;
	text-align: center;
  width: 100%;
}
.rubriques a{	
	text-align: center;
  flex: 1;
}	
#mentionslegalesetplandusite {
	background-color: rgb(0, 0, 0);
	text-align: right;
	font-size:10px;
	padding-bottom:50px;
}

Une question m'est venue à l'esprit, la voici :
Je mets "padding bottom" pour que ça aille jusqu'en bas de la page... n'y a-t-il pas mieux ?
Je vais maintenant lire (avec grand plaisir) votre solution et surtout la tester ! Elle sera sûrement mille fois meilleures (en même temps pour faire pire ça va être dur).

Désolé d'être aussi chiant _laurent.... Vraiment je mesure le temps que vous devez prendre à fournir ce type de réponses.

Modifié par LApprenti (19 Aug 2022 - 14:36)

OK Laurent, merci beaucoup pour votre réponse, je viens de la lire.
Une question subsiste encore avant que j'aille la tester :

a écrit :
1 conseil au passage : passe par une class et pas un id

-> Pourquoi et dans quelles situations ? Faut-il que je supprime toutes mes id par des class ?

Décidemment je suis franchement emmerdant désolé

LApprenti a écrit :
J'ai pas lu encore votre message et votre solution mais je pense en avoir trouvé une qui marche bien.
C'est surement pas très opti, il existe surement mieux, mais ça marche.

C'est parfait comme ça ! Ca faisait partie de mes solution, t'a géré tout seul je ne vois pas pourquoi ca ne serait pas "opti". Tu pourrais éventuellement le mettre à coté de tes colonnes rubriques pour garder la sémantique du regroupement dans "pied de page" mais franchement c'est du pinaillage.

LApprenti a écrit :
Je mets "padding bottom" pour que ça aille jusqu'en bas de la page... n'y a-t-il pas mieux ?

C'est pas exactement ca a mon avis. C'est juste que ton site n'est pas assez haut pour prendre toute la hauteur de ton écran. Donc là, sur un écran plus grand que le tien ca ne "touchera" pas le bas. Quelques solutions en vrac :
- la plus simple : attendre que ton site ai du contenu s'il n'est pas fini. Avec un contenu il y aura un scroll et il n'y aura plus ce soucis du "body trop court"
- plus compliqué : faire en sorte que le body de ton site prennent 100% de la hauteur et venir caller son footer en bas (mais c'est inutile de s'embeter avec cette solution si à terme le contenu pousse tout tout le temps).

LApprenti a écrit :

Elle sera sûrement mille fois meilleures (en même temps pour faire pire ça va être dur).
[...]
Désolé d'être aussi chiant _laurent.... Vraiment je mesure le temps que vous devez prendre à fournir ce type de réponses.
[...]
Décidemment je suis franchement emmerdant désolé

Allez on va dire que pour tout les prochains post (c'est valable IRL aussi) :
- On me lance pas de fleur (je fais pas ca pour ça, ca ne me fait pas répondre mieux ou plus vite, je ne suis pas si génial que ça beaucoup d'autres sur le forum sont bien meilleurs)
- On croit un peu plus en soit ! Sans aller dans l'overconfidence mais t'as trouvé une des meilleures solution à mon sens alors on arrête l'autoflagélation et on se sort les doigts
- On arrête de s'excuser. C'est bien formulé, c'est interessé, complet et c'est poli. Donc le forum c'est fait pour ça. Je prend le temps que je veux prendre, j'ai pas de flingue sur la tempe. Si j'ai pas le temps je le prendrai pas t'en fait pas. C'est tout à ton honneur de poser des question "pour comprendre" et non juste une recherche de solution toute cuite alors comme j'aime aider et partager ça me plait alors je prend le temps. C'est tout. Demain ca sera un autre

On lève la tête et on avance

Bonne soirée

LApprenti a écrit :
Pourquoi et dans quelles situations ? Faut-il que je supprime toutes mes id par des class ?

J'avais oublié celle là !

C'est un conseil perso pas une obligation. Les sélecteurs ont des poids (lis un article dessus si ca ne te dit rien c'est ESSENTIEL). Le CSS à des priorités pour savoir qui est appliqué en dernier si on défini plusieurs couleurs pour un même élément par exemple (derniers arrivé, sélecteur plus lourd, etc). une démo prendrait trop de temps ici mais lis un article dessus vraiment c'est pas très compliqué mais vraiment très important.

Donc pour des raison de maintenance et de facilité de modification de ton CSS si tu ne mets que des classes ca sera moins difficile d'overider des styles que si il y a des id en plein milieu.

Mais ca reste permis attention ! utiliser les ID pour du CSS 'est tout a fait correct et parfois très utile / recommandé !

Merci Laurent,
Donc je résume, si j'estime mon "index" comme fini alors je dois enlever les padding mis uniquement pour que ça "touche le fond" (pardonnez moi l'expression x)).
Mais par conséquent, un blanc apparait. Alors que faire ? Y laisser comme tel en sachant qu'il y a déjà un scroll mais que ça met quand même un blanc ? Opter pour la solution "plus compliquée ?
J'avoue ne pas comprendre comment enlever ce blanc qui pourtant n'a à mon sens pas lieu d'être.
Merci par avance.

mmmmm il doit me manquer des pieces de puzzle du coup. le site est en ligne ? C'est assez compliqué de trouver sans voir la globalité du site (et coller ici l'intégralité du code c'est pas cool ca va faire un scroll immense haha)

_laurent a écrit :
mmmmm il doit me manquer des pieces de puzzle du coup. le site est en ligne ? C'est assez compliqué de trouver sans voir la globalité du site (et coller ici l'intégralité du code c'est pas cool ca va faire un scroll immense haha)

Le site est pas en ligne malheureusement mais je peux peut-être vous faire passer le code autrement ?
Merci par avance,

Oui, vous pouvez faire un CodePen.

C'est pas très compliqué de comprendre comment ça fonctionne, et une fois compris ce sera bien plus simple de mettre des exemples en ligne pour se faire aider.

Bonjour Olivier. Sinon je pensais à mettre mon dossier parents sur un et l'envoyer en privé à l'un d'entre vous.
Je ne suis pas contre l'idée de vous l'envoyer via cet outil mais il contient des infos confidentielles pour le moment que j'aimerai pouvoir cacher avant de transmettre. Est ce dans ce cas possible ?
Cdlt,
Modifié par LApprenti (19 Aug 2022 - 17:06)

C'est ça qu'il vous faut ? J'ai remplacé les infos par des #
https://codepen.io/LApprenti/pen/YzaBNpX
Merci par avance

Ah oui et j'oubliais une image du problème pour que vous visualisiez bien ce que je souhaiterais "enlever".

Ce blanc en bas de la page m'escagasse un peu !
Encore merci d'avance,
Cdlt.

Merci infiniment Laurent !!!
Tout fonctionne, j'ai fait deux trois réglages de positionnement mais trois fois rien et c'est formidable. Tout fonctionne. Fier de moi pour une première création c'est pas si mal je trouve .

Encore merci, je vais passez aux autres pages connexes !

PS : pour le body margin j'en avais pas besoin car j'ai un doc CSS appelé normalize qui est censé s'en occupé (et qui l'a fait) (je l'ai pris tout cuit comme conseillé dans le livre que j'utilise )

Passez une bonne soirée,
Merci encore,
Biz

Bon je clos le Topic même si en soit, on a abordé 10 000 topics. Merci encore